Перейти к содержимому


Хочу Сделать, Но Не Знаю Как


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 74

#41 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 23 Июль 2014 - 22:22

Просмотр сообщенияMikDark (23 Июль 2014 - 20:47) писал:

В шаблоне Страница найдите:
{PAGE_CONTENT}

перед ним добавьте:
{% IF PAGE_NAME = Услуги %}
<!-- Nyvo слайдер который отображается на главной -->



<!-- Обёртка, указывающая стиль темы -->

<div class="theme-default" style="padding: 1em; display: none;">

<!-- Непосредственный код слайдера -->

<div id="slider">

<img src="http://storeland.ru/img/faq/questions/nyvo_slider/slider.jpg" alt="" />

<a href="/"><img src="http://storeland.ru//img/faq/questions/nyvo_slider/nemo.jpg" alt="" /></a>

<img title="Пример картинки с заголовком" src="http://storeland.ru/img/faq/questions/nyvo_slider/toystory.jpg" alt="" />

<img src="http://storeland.ru/img/faq/questions/nyvo_slider/walle.jpg" alt="" />

<img src="http://storeland.ru/img/faq/questions/nyvo_slider/cars.jpg" alt="" />

</div>
</div>

<!-- Запуск слайдера -->

<script type="text/javascript">

$(window).load(function() {

$('#slider').nivoSlider().parent().show(); });

</script>

{% ENDIF %}

Пути к изображениям можете прописать свои.
Я возможно не совсем понял вас, но мне нужен вот этот слайдер http://tympanus.net/...-image-gallery/, а не нивослайдер

#42 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 23 Июль 2014 - 22:28

Просмотр сообщенияluzikov (23 Июль 2014 - 22:22) писал:

Я возможно не совсем понял вас, но мне нужен вот этот слайдер http://tympanus.net/...-image-gallery/, а не нивослайдер

Его будет внедрить намного сложнее, т.к. там используется много файлов, которые нужно подключать. Если все же решите поставить, скачайте архив с этой страницы и загрузите все css и js файлы к себе в раздел Сайт - Редактор шаблонов. Так же туда загрузите изображения из папки icons

#43 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 23 Июль 2014 - 22:40

Просмотр сообщенияMikDark (23 Июль 2014 - 22:28) писал:

Его будет внедрить намного сложнее, т.к. там используется много файлов, которые нужно подключать. Если все же решите поставить, скачайте архив с этой страницы и загрузите все css и js файлы к себе в раздел Сайт - Редактор шаблонов. Так же туда загрузите изображения из папки icons
сделал, что дальше ?

#44 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 24 Июль 2014 - 00:18

После загрузки всех необходимых файлов и их подключения - выполняйте инструкцию описанную на сайте http://tympanus.net/...-image-gallery/

Markup - это разметка, добавляется в шаблон "HTML" или "Страница". Аналогично как и при nivo slider.
CSS - это стили, добавляются в файл стилей main.css или style.css. Аналогично установке других слайдеров или nivo slider.
Общие стили

*{
	margin:0;
	padding:0;
}
body {
	background:#212121;
	overflow:hidden;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color:#fff;
	font-size:10px;
}

добавлять в файл стилей не нужно, так как они повлияют на все отображение.

JAVASCRIPT - код необходимый для размещения в файле main.js. Выполняет работу слайдера.
Используйте пример приведенный на странице. В итоге должно получится - в файл main.js размещается код

$(window) .load(function () {
  sliderLeft = $('#thumbScroller .container') .position() .left;
  padding = $('#outer_container') .css('paddingRight') .replace('px', '');
  sliderWidth = $(window) .width() - padding;
  $('#thumbScroller') .css('width', sliderWidth);
  var totalContent = 0;
  $('#thumbScroller .content') .each(function () {
	totalContent += $(this) .innerWidth();
	$('#thumbScroller .container') .css('width', totalContent);
  });
  $('#thumbScroller') .mousemove(function (e) {
	if ($('#thumbScroller  .container') .width() > sliderWidth) {
	  var mouseCoords = (e.pageX - this.offsetLeft);
	  var mousePercentX = mouseCoords / sliderWidth;
	  var destX = - (((totalContent - (sliderWidth)) - sliderWidth) * (mousePercentX));
	  var thePosA = mouseCoords - destX;
	  var thePosB = destX - mouseCoords;
	  var animSpeed = 600;
	  //ease amount
	  var easeType = 'easeOutCirc';
	  if (mouseCoords == destX) {
		$('#thumbScroller .container') .stop();
	  }
	  else if (mouseCoords > destX) {
		//$('#thumbScroller .container').css('left',-thePosA); //without easing
		$('#thumbScroller .container') .stop() .animate({
		  left: - thePosA
		}, animSpeed, easeType);
		//with easing
	  }
	  else if (mouseCoords < destX) {
		//$('#thumbScroller .container').css('left',thePosB); //without easing
		$('#thumbScroller .container') .stop() .animate({
		  left: thePosB
		}, animSpeed, easeType);
		//with easing
	  }
	}
  });
  $('#thumbScroller  .thumb') .each(function () {
	$(this) .fadeTo(fadeSpeed, 0.6);
  });
  var fadeSpeed = 200;
  $('#thumbScroller .thumb') .hover(function () {
	//mouse over
	$(this) .fadeTo(fadeSpeed, 1);
  }, function () {
	//mouse out
	$(this) .fadeTo(fadeSpeed, 0.6);
  }
  );
});
$(window) .resize(function () {
  //$('#thumbScroller .container').css('left',sliderLeft); //without easing
  $('#thumbScroller .container') .stop() .animate({
	left: sliderLeft
  }, 400, 'easeOutCirc');
  //with easing
  $('#thumbScroller') .css('width', $(window) .width() - padding);
  sliderWidth = $(window) .width() - padding;
});
$(function () {
  //current thumb's index being viewed
  var current = - 1;
  //cache some elements
  var $btn_thumbs = $('#fp_thumbtoggle');
  var $loader = $('#fp_loading');
  var $btn_next = $('#fp_next');
  var $btn_prev = $('#fp_prev');
  var $thumbScroller = $('#thumbScroller');
  //total number of thumbs
  var nmb_thumbs = $thumbScroller.find('.content') .length;
  //preload thumbs
  var cnt_thumbs = 0;
  for (var i = 0; i < nmb_thumbs; ++i) {
	var $thumb = $thumbScroller.find('.content:nth-child(' + parseInt(i + 1) + ')');
	$('<img/>') .load(function () {
	  ++cnt_thumbs;
	  if (cnt_thumbs == nmb_thumbs)
	  //display the thumbs on the bottom of the page
	  showThumbs(2000);
	}) .attr('src', $thumb.find('img') .attr('src'));
  }
  //make the document scrollable
  //when the the mouse is moved up/down
  //the user will be able to see the full image
  makeScrollable();
  //clicking on a thumb...
  $thumbScroller.find('.content') .bind('click', function (e) {
	var $content = $(this);
	var $elem = $content.find('img');
	//keep track of the current clicked thumb
	//it will be used for the navigation arrows
	current = $content.index() + 1;
	//get the positions of the clicked thumb
	var pos_left = $elem.offset() .left;
	var pos_top = $elem.offset() .top;
	//clone the thumb and place
	//the clone on the top of it
	var $clone = $elem.clone() .addClass('clone') .css({
	  'position': 'fixed',
	  'left': pos_left + 'px',
	  'top': pos_top + 'px'
	}) .insertAfter($('BODY'));
	var windowW = $(window) .width();
	var windowH = $(window) .height();
	//animate the clone to the center of the page
	$clone.stop() .animate({
	  'left': windowW / 2 + 'px',
	  'top': windowH / 2 + 'px',
	  'margin-left': - $clone.width() / 2 - 5 + 'px',
	  'margin-top': - $clone.height() / 2 - 5 + 'px'
	}, 500, function () {
	  var $theClone = $(this);
	  var ratio = $clone.width() / 120;
	  var final_w = 400 * ratio;
	  $loader.show();
	  //expand the clone when large image is loaded
	  $('<img class="fp_preview"/>') .load(function () {
		var $newimg = $(this);
		var $currImage = $('#fp_gallery') .children('img:first');
		$newimg.insertBefore($currImage);
		$loader.hide();
		//expand clone
		$theClone.animate({
		  'opacity': 0,
		  'top': windowH / 2 + 'px',
		  'left': windowW / 2 + 'px',
		  'margin-top': '-200px',
		  'margin-left': - final_w / 2 + 'px',
		  'width': final_w + 'px',
		  'height': '400px'
		}, 1000, function () {
		  $(this) .remove();
		});
		//now we have two large images on the page
		//fadeOut the old one so that the new one gets shown
		$currImage.fadeOut(2000, function () {
		  $(this) .remove();
		});
		//show the navigation arrows
		showNav();
	  }) .attr('src', $elem.attr('alt'));
	});
	//hide the thumbs container
	hideThumbs();
	e.preventDefault();
  });
  //clicking on the "show thumbs"
  //displays the thumbs container and hides
  //the navigation arrows
  $btn_thumbs.bind('click', function () {
	showThumbs(500);
	hideNav();
  });
  function hideThumbs() {
	$('#outer_container') .stop() .animate({
	  'bottom': '-160px'
	}, 500);
	showThumbsBtn();
  }
  function showThumbs(speed) {
	$('#outer_container') .stop() .animate({
	  'bottom': '0px'
	}, speed);
	hideThumbsBtn();
  }
  function hideThumbsBtn() {
	$btn_thumbs.stop() .animate({
	  'bottom': '-50px'
	}, 500);
  }
  function showThumbsBtn() {
	$btn_thumbs.stop() .animate({
	  'bottom': '0px'
	}, 500);
  }
  function hideNav() {
	$btn_next.stop() .animate({
	  'right': '-50px'
	}, 500);
	$btn_prev.stop() .animate({
	  'left': '-50px'
	}, 500);
  }
  function showNav() {
	$btn_next.stop() .animate({
	  'right': '0px'
	}, 500);
	$btn_prev.stop() .animate({
	  'left': '0px'
	}, 500);
  }
  //events for navigating through the set of images
  $btn_next.bind('click', showNext);
  $btn_prev.bind('click', showPrev);
  //the aim is to load the new image,
  //place it before the old one and fadeOut the old one
  //we use the current variable to keep track which
  //image comes next / before
  function showNext() {
	++current;
	var $e_next = $thumbScroller.find('.content:nth-child(' + current + ')');
	if ($e_next.length == 0) {
	  current = 1;
	  $e_next = $thumbScroller.find('.content:nth-child(' + current + ')');
	}
	$loader.show();
	$('<img class="fp_preview"/>') .load(function () {
	  var $newimg = $(this);
	  var $currImage = $('#fp_gallery') .children('img:first');
	  $newimg.insertBefore($currImage);
	  $loader.hide();
	  $currImage.fadeOut(2000, function () {
		$(this) .remove();
	  });
	}) .attr('src', $e_next.find('img') .attr('alt'));
  }
  function showPrev() {
	--current;
	var $e_next = $thumbScroller.find('.content:nth-child(' + current + ')');
	if ($e_next.length == 0) {
	  current = nmb_thumbs;
	  $e_next = $thumbScroller.find('.content:nth-child(' + current + ')');
	}
	$loader.show();
	$('<img class="fp_preview"/>') .load(function () {
	  var $newimg = $(this);
	  var $currImage = $('#fp_gallery') .children('img:first');
	  $newimg.insertBefore($currImage);
	  $loader.hide();
	  $currImage.fadeOut(2000, function () {
		$(this) .remove();
	  });
	}) .attr('src', $e_next.find('img') .attr('alt'));
  }
  function makeScrollable() {
	$(document) .bind('mousemove', function (e) {
	  var top = (e.pageY - $(document) .scrollTop() / 2);
	  $(document) .scrollTop(top);
	});
  }
});

разметка получит вид

<div id="fp_gallery" class="fp_gallery">
						<img src="{ASSETS_IMAGES_PATH}1.jpg" alt="" class="fp_preview" style="display:none;"/>
						<div class="fp_overlay"></div>
						<div id="fp_loading" class="fp_loading"></div>
						<div id="fp_next" class="fp_next"></div>
						<div id="fp_prev" class="fp_prev"></div>
						<div id="outer_container">
								<div id="thumbScroller">
										<div class="container">
												<div class="content">
														<div><a href="#"><img src="{ASSETS_IMAGES_PATH}t1.jpg" alt="{ASSETS_IMAGES_PATH}1.jpg" class="thumb" /></a></div>
												</div>
												<div class="content">
														<div><a href="#"><img src="{ASSETS_IMAGES_PATH}t2.jpg" alt="{ASSETS_IMAGES_PATH}2.jpg" class="thumb" /></a></div>
												</div>
												<div class="content">
														<div><a href="#"><img src="{ASSETS_IMAGES_PATH}t3.jpg" alt="{ASSETS_IMAGES_PATH}3.jpg" class="thumb" /></a></div>
												</div>
												<div class="content">
														<div><a href="#"><img src="{ASSETS_IMAGES_PATH}t4.jpg" alt="{ASSETS_IMAGES_PATH}4.jpg" class="thumb" /></a></div>
												</div>
												<div class="content">
														<div><a href="#"><img src="{ASSETS_IMAGES_PATH}t5.jpg" alt="{ASSETS_IMAGES_PATH}5.jpg" class="thumb" /></a></div>
												</div>
										</div>
								</div>
						</div>
						<div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div>
				</div>

изображения "{ASSETS_IMAGES_PATH}t5.jpg" это ранее изображения с адресом вида images/thumbs/5.jpg а изображения "{ASSETS_IMAGES_PATH}5.jpg" ато изображения с адресом "images/5.jpg".

Данный слайдер доволно сложен в установке, и нет вероятности что все заработает в первого раза.

#45 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 24 Июль 2014 - 12:14

Просмотр сообщенияСake (24 Июль 2014 - 00:18) писал:

После загрузки всех необходимых файлов и их подключения - выполняйте инструкцию описанную на сайте http://tympanus.net/...-image-gallery/

Markup - это разметка, добавляется в шаблон "HTML" или "Страница". Аналогично как и при nivo slider.
CSS - это стили, добавляются в файл стилей main.css или style.css. Аналогично установке других слайдеров или nivo slider.
Общие стили

*{
margin:0;
padding:0;
}
body {
background:#212121;
overflow:hidden;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#fff;
font-size:10px;
}

добавлять в файл стилей не нужно, так как они повлияют на все отображение.

JAVASCRIPT - код необходимый для размещения в файле main.js. Выполняет работу слайдера.
Используйте пример приведенный на странице. В итоге должно получится - в файл main.js размещается код

$(window) .load(function () {
sliderLeft = $('#thumbScroller .container') .position() .left;
padding = $('#outer_container') .css('paddingRight') .replace('px', '');
sliderWidth = $(window) .width() - padding;
$('#thumbScroller') .css('width', sliderWidth);
var totalContent = 0;
$('#thumbScroller .content') .each(function () {
totalContent += $(this) .innerWidth();
$('#thumbScroller .container') .css('width', totalContent);
});
$('#thumbScroller') .mousemove(function (e) {
if ($('#thumbScroller .container') .width() > sliderWidth) {
	 var mouseCoords = (e.pageX - this.offsetLeft);
	 var mousePercentX = mouseCoords / sliderWidth;
	 var destX = - (((totalContent - (sliderWidth)) - sliderWidth) * (mousePercentX));
	 var thePosA = mouseCoords - destX;
	 var thePosB = destX - mouseCoords;
	 var animSpeed = 600;
	 //ease amount
	 var easeType = 'easeOutCirc';
	 if (mouseCoords == destX) {
	 $('#thumbScroller .container') .stop();
	 }
	 else if (mouseCoords > destX) {
	 //$('#thumbScroller .container').css('left',-thePosA); //without easing
	 $('#thumbScroller .container') .stop() .animate({
		 left: - thePosA
	 }, animSpeed, easeType);
	 //with easing
	 }
	 else if (mouseCoords < destX) {
	 //$('#thumbScroller .container').css('left',thePosB); //without easing
	 $('#thumbScroller .container') .stop() .animate({
		 left: thePosB
	 }, animSpeed, easeType);
	 //with easing
	 }
}
});
$('#thumbScroller .thumb') .each(function () {
$(this) .fadeTo(fadeSpeed, 0.6);
});
var fadeSpeed = 200;
$('#thumbScroller .thumb') .hover(function () {
//mouse over
$(this) .fadeTo(fadeSpeed, 1);
}, function () {
//mouse out
$(this) .fadeTo(fadeSpeed, 0.6);
}
);
});
$(window) .resize(function () {
//$('#thumbScroller .container').css('left',sliderLeft); //without easing
$('#thumbScroller .container') .stop() .animate({
left: sliderLeft
}, 400, 'easeOutCirc');
//with easing
$('#thumbScroller') .css('width', $(window) .width() - padding);
sliderWidth = $(window) .width() - padding;
});
$(function () {
//current thumb's index being viewed
var current = - 1;
//cache some elements
var $btn_thumbs = $('#fp_thumbtoggle');
var $loader = $('#fp_loading');
var $btn_next = $('#fp_next');
var $btn_prev = $('#fp_prev');
var $thumbScroller = $('#thumbScroller');
//total number of thumbs
var nmb_thumbs = $thumbScroller.find('.content') .length;
//preload thumbs
var cnt_thumbs = 0;
for (var i = 0; i < nmb_thumbs; ++i) {
var $thumb = $thumbScroller.find('.content:nth-child(' + parseInt(i + 1) + ')');
$('<img/>') .load(function () {
	 ++cnt_thumbs;
	 if (cnt_thumbs == nmb_thumbs)
	 //display the thumbs on the bottom of the page
	 showThumbs(2000);
}) .attr('src', $thumb.find('img') .attr('src'));
}
//make the document scrollable
//when the the mouse is moved up/down
//the user will be able to see the full image
makeScrollable();
//clicking on a thumb...
$thumbScroller.find('.content') .bind('click', function (e) {
var $content = $(this);
var $elem = $content.find('img');
//keep track of the current clicked thumb
//it will be used for the navigation arrows
current = $content.index() + 1;
//get the positions of the clicked thumb
var pos_left = $elem.offset() .left;
var pos_top = $elem.offset() .top;
//clone the thumb and place
//the clone on the top of it
var $clone = $elem.clone() .addClass('clone') .css({
	 'position': 'fixed',
	 'left': pos_left + 'px',
	 'top': pos_top + 'px'
}) .insertAfter($('BODY'));
var windowW = $(window) .width();
var windowH = $(window) .height();
//animate the clone to the center of the page
$clone.stop() .animate({
	 'left': windowW / 2 + 'px',
	 'top': windowH / 2 + 'px',
	 'margin-left': - $clone.width() / 2 - 5 + 'px',
	 'margin-top': - $clone.height() / 2 - 5 + 'px'
}, 500, function () {
	 var $theClone = $(this);
	 var ratio = $clone.width() / 120;
	 var final_w = 400 * ratio;
	 $loader.show();
	 //expand the clone when large image is loaded
	 $('<img class="fp_preview"/>') .load(function () {
	 var $newimg = $(this);
	 var $currImage = $('#fp_gallery') .children('img:first');
	 $newimg.insertBefore($currImage);
	 $loader.hide();
	 //expand clone
	 $theClone.animate({
		 'opacity': 0,
		 'top': windowH / 2 + 'px',
		 'left': windowW / 2 + 'px',
		 'margin-top': '-200px',
		 'margin-left': - final_w / 2 + 'px',
		 'width': final_w + 'px',
		 'height': '400px'
	 }, 1000, function () {
		 $(this) .remove();
	 });
	 //now we have two large images on the page
	 //fadeOut the old one so that the new one gets shown
	 $currImage.fadeOut(2000, function () {
		 $(this) .remove();
	 });
	 //show the navigation arrows
	 showNav();
	 }) .attr('src', $elem.attr('alt'));
});
//hide the thumbs container
hideThumbs();
e.preventDefault();
});
//clicking on the "show thumbs"
//displays the thumbs container and hides
//the navigation arrows
$btn_thumbs.bind('click', function () {
showThumbs(500);
hideNav();
});
function hideThumbs() {
$('#outer_container') .stop() .animate({
	 'bottom': '-160px'
}, 500);
showThumbsBtn();
}
function showThumbs(speed) {
$('#outer_container') .stop() .animate({
	 'bottom': '0px'
}, speed);
hideThumbsBtn();
}
function hideThumbsBtn() {
$btn_thumbs.stop() .animate({
	 'bottom': '-50px'
}, 500);
}
function showThumbsBtn() {
$btn_thumbs.stop() .animate({
	 'bottom': '0px'
}, 500);
}
function hideNav() {
$btn_next.stop() .animate({
	 'right': '-50px'
}, 500);
$btn_prev.stop() .animate({
	 'left': '-50px'
}, 500);
}
function showNav() {
$btn_next.stop() .animate({
	 'right': '0px'
}, 500);
$btn_prev.stop() .animate({
	 'left': '0px'
}, 500);
}
//events for navigating through the set of images
$btn_next.bind('click', showNext);
$btn_prev.bind('click', showPrev);
//the aim is to load the new image,
//place it before the old one and fadeOut the old one
//we use the current variable to keep track which
//image comes next / before
function showNext() {
++current;
var $e_next = $thumbScroller.find('.content:nth-child(' + current + ')');
if ($e_next.length == 0) {
	 current = 1;
	 $e_next = $thumbScroller.find('.content:nth-child(' + current + ')');
}
$loader.show();
$('<img class="fp_preview"/>') .load(function () {
	 var $newimg = $(this);
	 var $currImage = $('#fp_gallery') .children('img:first');
	 $newimg.insertBefore($currImage);
	 $loader.hide();
	 $currImage.fadeOut(2000, function () {
	 $(this) .remove();
	 });
}) .attr('src', $e_next.find('img') .attr('alt'));
}
function showPrev() {
--current;
var $e_next = $thumbScroller.find('.content:nth-child(' + current + ')');
if ($e_next.length == 0) {
	 current = nmb_thumbs;
	 $e_next = $thumbScroller.find('.content:nth-child(' + current + ')');
}
$loader.show();
$('<img class="fp_preview"/>') .load(function () {
	 var $newimg = $(this);
	 var $currImage = $('#fp_gallery') .children('img:first');
	 $newimg.insertBefore($currImage);
	 $loader.hide();
	 $currImage.fadeOut(2000, function () {
	 $(this) .remove();
	 });
}) .attr('src', $e_next.find('img') .attr('alt'));
}
function makeScrollable() {
$(document) .bind('mousemove', function (e) {
	 var top = (e.pageY - $(document) .scrollTop() / 2);
	 $(document) .scrollTop(top);
});
}
});

разметка получит вид

<div id="fp_gallery" class="fp_gallery">
					 <img src="{ASSETS_IMAGES_PATH}1.jpg" alt="" class="fp_preview" style="display:none;"/>
					 <div class="fp_overlay"></div>
					 <div id="fp_loading" class="fp_loading"></div>
					 <div id="fp_next" class="fp_next"></div>
					 <div id="fp_prev" class="fp_prev"></div>
					 <div id="outer_container">
							 <div id="thumbScroller">
									 <div class="container">
											 <div class="content">
													 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}t1.jpg" alt="{ASSETS_IMAGES_PATH}1.jpg" class="thumb" /></a></div>
											 </div>
											 <div class="content">
													 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}t2.jpg" alt="{ASSETS_IMAGES_PATH}2.jpg" class="thumb" /></a></div>
											 </div>
											 <div class="content">
													 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}t3.jpg" alt="{ASSETS_IMAGES_PATH}3.jpg" class="thumb" /></a></div>
											 </div>
											 <div class="content">
													 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}t4.jpg" alt="{ASSETS_IMAGES_PATH}4.jpg" class="thumb" /></a></div>
											 </div>
											 <div class="content">
													 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}t5.jpg" alt="{ASSETS_IMAGES_PATH}5.jpg" class="thumb" /></a></div>
											 </div>
									 </div>
							 </div>
					 </div>
					 <div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div>
			 </div>

изображения "{ASSETS_IMAGES_PATH}t5.jpg" это ранее изображения с адресом вида images/thumbs/5.jpg а изображения "{ASSETS_IMAGES_PATH}5.jpg" ато изображения с адресом "images/5.jpg".

Данный слайдер доволно сложен в установке, и нет вероятности что все заработает в первого раза.
Так-с, я что то сделал, что то получилось в целом, но:
1. Мне нужен слайдер только на странице Услуги и только на ней
2. Так же нужно справить ошибки, что бы страница ходуном не ходила.
3. Все ссылки и кнопки не работают на страницах где отображается слайдер, что делать?
Заранее спасибо!

Помогите, это все очень срочно

#46 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 24 Июль 2014 - 15:02

Просмотр сообщенияluzikov (24 Июль 2014 - 12:14) писал:

Так-с, я что то сделал, что то получилось в целом, но:
1. Мне нужен слайдер только на странице Услуги и только на ней
2. Так же нужно справить ошибки, что бы страница ходуном не ходила.
3. Все ссылки и кнопки не работают на страницах где отображается слайдер, что делать?
Заранее спасибо!

Помогите, это все очень срочно

Здравствуйте,
В шаблоне "Страница"
Находим:
<div id="fp_gallery" class="fp_gallery">

												<div class="fp_overlay"></div>
												<div id="fp_loading" class="fp_loading"></div>
												<div id="fp_next" class="fp_next"></div>
												<div id="fp_prev" class="fp_prev"></div>
												<div id="outer_container">
																<div id="thumbScroller">
																				<div class="container">
																								<div class="content">
																												<div><a href="#"><img src="{ASSETS_IMAGES_PATH}1.jpg" alt="{ASSETS_IMAGES_PATH}1.jpg" class="thumb" /></a></div>
																								</div>
																								<div class="content">
																												<div><a href="#"><img src="{ASSETS_IMAGES_PATH}2.jpg" alt="{ASSETS_IMAGES_PATH}2.jpg" class="thumb" /></a></div>
																								</div>
																								<div class="content">
																												<div><a href="#"><img src="{ASSETS_IMAGES_PATH}3.jpg" alt="{ASSETS_IMAGES_PATH}3.jpg" class="thumb" /></a></div>
																								</div>
																								<div class="content">
																												<div><a href="#"><img src="{ASSETS_IMAGES_PATH}4.jpg" alt="{ASSETS_IMAGES_PATH}4.jpg" class="thumb" /></a></div>
																								</div>
																								<div class="content">
																												<div><a href="#"><img src="{ASSETS_IMAGES_PATH}5.jpg" alt="{ASSETS_IMAGES_PATH}5.jpg" class="thumb" /></a></div>
																								</div>
																				</div>
																</div>
												</div>
												<div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div>
								</div>

Заменяем на:
{% IF PAGE_NAME = Услуги %}
<div id="fp_gallery" class="fp_gallery">

												<div class="fp_overlay"></div>
												<div id="fp_loading" class="fp_loading"></div>
												<div id="fp_next" class="fp_next"></div>
												<div id="fp_prev" class="fp_prev"></div>
												<div id="outer_container">
																<div id="thumbScroller">
																				<div class="container">
																								<div class="content">
																												<div><a href="#"><img src="{ASSETS_IMAGES_PATH}1.jpg" alt="{ASSETS_IMAGES_PATH}1.jpg" class="thumb" /></a></div>
																								</div>
																								<div class="content">
																												<div><a href="#"><img src="{ASSETS_IMAGES_PATH}2.jpg" alt="{ASSETS_IMAGES_PATH}2.jpg" class="thumb" /></a></div>
																								</div>
																								<div class="content">
																												<div><a href="#"><img src="{ASSETS_IMAGES_PATH}3.jpg" alt="{ASSETS_IMAGES_PATH}3.jpg" class="thumb" /></a></div>
																								</div>
																								<div class="content">
																												<div><a href="#"><img src="{ASSETS_IMAGES_PATH}4.jpg" alt="{ASSETS_IMAGES_PATH}4.jpg" class="thumb" /></a></div>
																								</div>
																								<div class="content">
																												<div><a href="#"><img src="{ASSETS_IMAGES_PATH}5.jpg" alt="{ASSETS_IMAGES_PATH}5.jpg" class="thumb" /></a></div>
																								</div>
																				</div>
																</div>
												</div>
												<div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div>
								</div>
{% ENDIF %}


2. Приведите пример на скриншоте страницы где она отображается не корректно и так же прямую ссылку на данную страницу.

3. Уточните пожалуйста какие именно ссылки не работают (выделите на скриншоте)

#47 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 24 Июль 2014 - 15:40

Уже не бегает, но картинки слайдера при нажатии на них открываются вроде как, но не отображаются. На странице http://m36697.storel...ru/page/service.Выделенное там же не работает. И еще глючит блок "С этим товаром так же смотрят" (см скрин)

Прикрепленные изображения

  • дьдь.png
  • ббб.jpg


#48 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 24 Июль 2014 - 22:08

ау

#49 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 24 Июль 2014 - 22:13

Так же вопрос, можно ли анимацию слайдера на главной изменить и сделать так, что бы он просто прокручивал картинки?

#50 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 24 Июль 2014 - 23:26

.

#51 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 25 Июль 2014 - 01:24

У вас потерялась строка

<img src="{ASSETS_IMAGES_PATH}1.jpg" alt="" class="fp_preview" style="display:none;"/>

которая должна следовать после строки

<div id="fp_gallery" class="fp_gallery">

Пожалуйста, проверьте вставленную вами разметку.

#52 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 25 Июль 2014 - 12:45

Сделал, спасибо. Подскажте как сделать открываемое изображение меньше, но при этом оно должно оставаться по середине!
И после того как открыли изображение не получается его закрыть..
По остальным все еще нужна помощь! Ребят помогите пожалуйста разобраться с этим слайдером, ни одно, так другое

#53 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 25 Июль 2014 - 12:52

Просмотр сообщенияluzikov (25 Июль 2014 - 12:45) писал:

Сделал, спасибо. Подскажте как сделать открываемое изображение меньше, но при этом оно должно оставаться по середине!
По остальным все еще нужна помощь!
Здравствуйте, чтобы уменьшить изображение найдите в style1.css
img.fp_preview {
position: absolute;
left: 0;
top: 0px;
width: 100%x;
z-index: 999999;
}
замените на

img.fp_preview {
position: absolute;
left: 31%;
top: 0px;
width: 46%;
z-index: 999999;
}
за размер отвечает значение width: 46%; его можно менять
отступ слева left: 31% его можно менять чтобы выставить изображение по середине.

#54 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 25 Июль 2014 - 13:27

Просмотр сообщенияluzikov (25 Июль 2014 - 12:45) писал:

И после того как открыли изображение не получается его закрыть..
Эта проблема еще висит, как и остальные! Спасибо

#55 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 25 Июль 2014 - 17:03

ап

#56 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 26 Июль 2014 - 00:33

ап

#57 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 26 Июль 2014 - 02:19

Найдите в вашем файле main.js код

//the navigation arrows
$btn_thumbs.bind('click', function () {
   showThumbs(500);
   hideNav();
});

и замените его на

//the navigation arrows
$btn_thumbs.bind('click', function () {
   showThumbs(500);
   $('.fp_preview').hide();
   hideNav();
});

Полное закрытие будет происходить при клике по "View Thumbs". Чтобы данный текст отображался корректно - в файл стилей style.css добавьте код

.fp_thumbtoggle {
  color: #fff;
}


#58 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 26 Июль 2014 - 12:00

Просмотр сообщенияСake (26 Июль 2014 - 02:19) писал:

Найдите в вашем файле main.js код

//the navigation arrows
$btn_thumbs.bind('click', function () {
showThumbs(500);
hideNav();
});

и замените его на

//the navigation arrows
$btn_thumbs.bind('click', function () {
showThumbs(500);
$('.fp_preview').hide();
hideNav();
});

Полное закрытие будет происходить при клике по "View Thumbs". Чтобы данный текст отображался корректно - в файл стилей style.css добавьте код

.fp_thumbtoggle {
color: #fff;
}
Спасибо Вам большое, работает, но пишут что есть ошибка js.. И еще, подскажите как сделать листание слайдера на главной обычным?

#59 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 27 Июль 2014 - 23:53

Блок ХИТЫ ПРОДАЖ и С ЭТИМ ТОВАРОМ ТАК ЖЕ СМОТРЕЛИ отображаются крайне ужасно (см скрин) На них какие то непонятные полосы, все уезжает в бок, все функции спрятаны ниже и их не видно + еще нужно добавить икнонки соц сетей в подвал в раздел контакты, как это сделать ?

Прикрепленные изображения

  • Безымянный.jpg


#60 luzikov

luzikov

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 436 сообщений

Отправлено 28 Июль 2014 - 14:11

ап




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных