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


Вопрос По Слайдеру Весна


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

#1 Agusha888

Agusha888

    Новичок

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

Отправлено 17 Февраль 2015 - 21:38

Скажите как сделать слайдер чтоб картинки менялись без белого (фона) пробела а плавно перетекали одна в одну. А то этот белый фон по глазам  бьет. Заранее спасибо!!!
мой сайт

#2 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 18 Февраль 2015 - 01:20

В main.js найдите:
$(window).load(function() {
	$('.flexslider').flexslider({
	  animation: "fade",
	  pauseOnHover: true,
	 touch: true,
	animationSpeed: 1300,
	slideshowSpeed: 6500,
	smoothHeight: false,
	controlNav: false,
	  directionNav: true
	});
  });

замените на:
$(window).load(function() {
	$('.flexslider').flexslider({
	  animation: "slide",
	  pauseOnHover: true,
	 touch: true,
	animationSpeed: 1300,
	slideshowSpeed: 6500,
	smoothHeight: false,
	controlNav: false,
	  directionNav: true
	});
  });


#3 sidh

sidh

    Новичок

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

Отправлено 21 Апрель 2015 - 19:19

Здравствуйте, подскажите. Есть ли решение для слайдера, что бы он был не 1920px а по размеру сайта? спрашиваю потомучто слайд весит под 2мб при таком раскладе.

#4 Cupuyc

Cupuyc

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

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

Отправлено 21 Апрель 2015 - 19:42

Просмотр сообщенияsidh (21 Апрель 2015 - 19:19) писал:

Здравствуйте, подскажите. Есть ли решение для слайдера, что бы он был не 1920px а по размеру сайта? спрашиваю потомучто слайд весит под 2мб при таком раскладе.

Здравствуйте, масштабирование слайдера не влияет на его "вес", в данный момент у вас загружено 3 фотографии общим размером в 1мбайт. Вы можете выбрать другое разрешение для фотографий тем самым изменив итоговый "вес" слайдера

#5 sidh

sidh

    Новичок

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

Отправлено 21 Апрель 2015 - 19:43

Просмотр сообщенияCupuyc (21 Апрель 2015 - 19:42) писал:

Здравствуйте, масштабирование слайдера не влияет на его "вес", в данный момент у вас загружено 3 фотографии общим размером в 1мбайт. Вы можете выбрать другое разрешение для фотографий тем самым изменив итоговый "вес" слайдера
так и сделал, спасибо)

#6 Stas_Y

Stas_Y

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

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

Отправлено 01 Май 2015 - 12:11

Уважаемые модераторы, можно реализовать такой слайдер на место стандартного? http://pcvector.net/...-na-jquery.html

с тем условием чтобы на картинке можно было разместить кнопку, например "перейти" или "купить"?

Если это невозможно, то как можно сделать вот такой вариант?
http://pcvector.net/...ry-slayder.html

#7 Ирина345

Ирина345

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

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

Отправлено 01 Май 2015 - 12:23

Просмотр сообщенияStas_Y (01 Май 2015 - 12:11) писал:

Уважаемые модераторы, можно реализовать такой слайдер на место стандартного? http://pcvector.net/...-na-jquery.html
Здравствуйте, вам необходимо скачать архив данного слайдера, далее добавьте файлы из архива
style.css
jquery.easing.1.3.js
далее найдите в шаблоне HTML

 <!-- Если в тарифном плане подключен модуль отзывов о товаре и при этом он не выключен в настройках и мы находимся на странице товара -->
	{% IF TARIFF_FEATURE_GOODS_OPINION && SETTINGS_OPINION_DISABLE=0 && MOD_LNAME=goods %}
	  <script type="text/javascript" src="{FORALL_JS_PATH}jquery.ui.stars.min.js"></script>
	{% ENDIF %}

замените на


 <!-- Если в тарифном плане подключен модуль отзывов о товаре и при этом он не выключен в настройках и мы находимся на странице товара -->
	{% IF TARIFF_FEATURE_GOODS_OPINION && SETTINGS_OPINION_DISABLE=0 && MOD_LNAME=goods %}
	  <script type="text/javascript" src="{FORALL_JS_PATH}jquery.ui.stars.min.js"></script>
	{% ENDIF %}
  <script type="text/javascript" src="{FORALL_JS_PATH}jquery.easing.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}style.css">



далее найдите
  
	   {GOODS_NAME}
  {% ELSEIF MOD_LNAME=catalog %}
  {% IF IS_FULL_CATALOG %}Каталог ({GOODS_PAGES_RESULTS} товар{GOODS_PAGES_RESULTS | gen_word_end("","а","ов")} в категории){% ELSE %}{CATEGORY_NAME}{% ENDIF %}
						  {% ENDIF %}			  
			</h1>
		  </div>
		</div>
	  {% ENDIF %}

после вставьте
{% IF index_page%}

<div id="pxs_container" class="pxs_container">
<div class="pxs_bg">
<div class="pxs_bg1"></div>
<div class="pxs_bg2"></div>
<div class="pxs_bg3"></div>
</div>
<div class="pxs_loading">Загружаем изображения...</div>
<div class="pxs_slider_wrapper">
<ul class="pxs_slider">
<li><img src="images/1.jpg" alt="Первое изображение" /></li>
<li><img src="images/2.jpg" alt="Второе изображение" /></li>
<li><img src="images/3.jpg" alt="Третье изображение" /></li>
<li><img src="images/4.jpg" alt="Четвертое изображение" /></li>
<li><img src="images/5.jpg" alt="Пятое изображение" /></li>
<li><img src="images/6.jpg" alt="Шестое изображение" /></li>
</ul>
<div class="pxs_navigation">
<span class="pxs_next"></span>
<span class="pxs_prev"></span>
</div>
<ul class="pxs_thumbnails">
<li><img src="images/thumbs/1.jpg" alt="Первое изображение" /></li>
<li><img src="images/thumbs/2.jpg" alt="Второе изображение" /></li>
<li><img src="images/thumbs/3.jpg" alt="Третье изображение" /></li>
<li><img src="images/thumbs/4.jpg" alt="Четвертое изображение" /></li>
<li><img src="images/thumbs/5.jpg" alt="Пятое изображение" /></li>
<li><img src="images/thumbs/6.jpg" alt="Шестое изображение" /></li>
</ul>
</div>
</div>


  <script type="text/javascript">
(function($) {
$.fn.parallaxSlider = function(options) {
var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
return this.each(function() {
var $pxs_container  = $(this),
o  = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;

//the main slider
var $pxs_slider = $('.pxs_slider',$pxs_container),
//the elements in the slider
$elems = $pxs_slider.children(),
//total number of elements
total_elems = $elems.length,
//the navigation buttons
$pxs_next = $('.pxs_next',$pxs_container),
$pxs_prev = $('.pxs_prev',$pxs_container),
//the bg images
$pxs_bg1 = $('.pxs_bg1',$pxs_container),
$pxs_bg2 = $('.pxs_bg2',$pxs_container),
$pxs_bg3 = $('.pxs_bg3',$pxs_container),
//current image
current = 0,
//the thumbs container
$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
//the thumbs
$thumbs = $pxs_thumbnails.children(),
//the interval for the autoplay mode
slideshow,
//the loading image
$pxs_loading = $('.pxs_loading',$pxs_container),
$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);

//first preload all the images
var loaded = 0,
$images = $pxs_slider_wrapper.find('img');

$images.each(function(){
var $img = $(this);
$('<img/>').load(function(){
++loaded;
if(loaded == total_elems*2){
$pxs_loading.hide();
$pxs_slider_wrapper.show();

//one images width (assuming all images have the same sizes)
var one_image_w = $pxs_slider.find('img:first').width();

/*
need to set width of the slider,
of each one of its elements, and of the
navigation buttons
*/
setWidths($pxs_slider,
$elems,
total_elems,
$pxs_bg1,
$pxs_bg2,
$pxs_bg3,
one_image_w,
$pxs_next,
$pxs_prev);

/*
set the width of the thumbs
and spread them evenly
*/
$pxs_thumbnails.css({
'width' : one_image_w + 'px',
'margin-left'  : -one_image_w/2 + 'px'
});
var spaces = one_image_w/(total_elems+1);
$thumbs.each(function(i){
var $this  = $(this);
var left = spaces*(i+1) - $this.width()/2;
$this.css('left',left+'px');

if(o.thumbRotation){
var angle  = Math.floor(Math.random()*41)-20;
$this.css({
'-moz-transform' : 'rotate('+ angle +'deg)',
'-webkit-transform' : 'rotate('+ angle +'deg)',
'transform' : 'rotate('+ angle +'deg)'
});
}
//hovering the thumbs animates them up and down
$this.bind('mouseenter',function(){
$(this).stop().animate({top:'-10px'},100);
}).bind('mouseleave',function(){
$(this).stop().animate({top:'0px'},100);
});
});

//make the first thumb be selected
highlight($thumbs.eq(0));

//slide when clicking the navigation buttons
$pxs_next.bind('click',function(){
++current;
if(current >= total_elems)
if(o.circular)
current = 0;
else{
--current;
return false;
}
highlight($thumbs.eq(current));
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});
$pxs_prev.bind('click',function(){
--current;
if(current < 0)
if(o.circular)
current = total_elems - 1;
else{
++current;
return false;
}
highlight($thumbs.eq(current));
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});

/*
clicking a thumb will slide to the respective image
*/
$thumbs.bind('click',function(){
var $thumb = $(this);
highlight($thumb);
//if autoplay interrupt when user clicks
if(o.auto)
clearInterval(slideshow);
current  = $thumb.index();
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});



/*
activate the autoplay mode if
that option was specified
*/
if(o.auto != 0){
o.circular = true;
slideshow = setInterval(function(){
$pxs_next.trigger('click');
},o.auto);
}

/*
when resizing the window,
we need to recalculate the widths of the
slider elements, based on the new windows width.
we need to slide again to the current one,
since the left of the slider is no longer correct
*/
$(window).resize(function(){
w_w = $(window).width();
setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev);
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
1,
o.easing,
o.easingBg);
});

}
}).error(function(){
alert('here')
}).attr('src',$img.attr('src'));
});



});
};

//the current windows width
var w_w = $(window).width();

var slide = function(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
speed,
easing,
easingBg){
var slide_to = parseInt(-w_w * current);
$pxs_slider.stop().animate({
left : slide_to + 'px'
},speed, easing);
$pxs_bg3.stop().animate({
left : slide_to/2 + 'px'
},speed, easingBg);
$pxs_bg2.stop().animate({
left : slide_to/4 + 'px'
},speed, easingBg);
$pxs_bg1.stop().animate({
left : slide_to/8 + 'px'
},speed, easingBg);
}

var highlight = function($elem){
$elem.siblings().removeClass('selected');
$elem.addClass('selected');
}

var setWidths = function($pxs_slider,
$elems,
total_elems,
$pxs_bg1,
$pxs_bg2,
$pxs_bg3,
one_image_w,
$pxs_next,
$pxs_prev){
/*
the width of the slider is the windows width
times the total number of elements in the slider
*/
var pxs_slider_w = w_w * total_elems;
$pxs_slider.width(pxs_slider_w + 'px');
//each element will have a width = windows width
$elems.width(w_w + 'px');
/*
we also set the width of each bg image div.
The value is the same calculated for the pxs_slider
*/
$pxs_bg1.width(pxs_slider_w + 'px');
$pxs_bg2.width(pxs_slider_w + 'px');
$pxs_bg3.width(pxs_slider_w + 'px');

/*
both the right and left of the
navigation next and previous buttons will be:
windowWidth/2 - imgWidth/2 + some margin (not to touch the image borders)
*/
var position_nav = w_w/2 - one_image_w/2 + 3;
$pxs_next.css('right', position_nav + 'px');
$pxs_prev.css('left', position_nav + 'px');
}

$.fn.parallaxSlider.defaults = {
auto : 0, //how many seconds to periodically slide the content.
//If set to 0 then autoplay is turned off.
speed : 1000,//speed of each slide animation
easing : 'jswing',//easing effect for the slide animation
easingBg : 'jswing',//easing effect for the background animation
circular : true,//circular slider
thumbRotation : true//the thumbs will be randomly rotated
};
//easeInOutExpo,easeInBack
})(jQuery);
</script>

{%ENDIF%}


#8 Stas_Y

Stas_Y

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

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

Отправлено 01 Май 2015 - 12:28

А с ним возможно "с тем условием чтобы на картинке можно было разместить кнопку, например "перейти" или "купить"?"

#9 Ирина345

Ирина345

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

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

Отправлено 01 Май 2015 - 12:31

Просмотр сообщенияStas_Y (01 Май 2015 - 12:28) писал:

А с ним возможно "с тем условием чтобы на картинке можно было разместить кнопку, например "перейти" или "купить"?"
кнопку купить установить не получиться, но можно установить ссылку для перехода на страницу.

#10 Stas_Y

Stas_Y

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

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

Отправлено 01 Май 2015 - 12:49

Мне кажется тогда для описания к картинке больше вот этот подходит) http://pcvector.net/...-na-jquery.html
Подскажите как профессионал своего дела, что лучше?

#11 Stas_Y

Stas_Y

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

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

Отправлено 04 Май 2015 - 07:54

Сделал все как написано выше, но что-то шрифт везде стал с тенью((

#12 Cupuyc

Cupuyc

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

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

Отправлено 04 Май 2015 - 10:45

Просмотр сообщенияStas_Y (04 Май 2015 - 07:54) писал:

Сделал все как написано выше, но что-то шрифт везде стал с тенью((

Здравствуйте. Пожалуйста уточните, где именно у текста появилась тень(желательно приложив "скриншоты")?

#13 Stas_Y

Stas_Y

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

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

Отправлено 04 Май 2015 - 10:53

тень появилась на тексте по всем страницам сайта! вообще на каждой надписи

#14 Cupuyc

Cupuyc

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

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

Отправлено 04 Май 2015 - 11:04

Просмотр сообщенияStas_Y (04 Май 2015 - 10:53) писал:

тень появилась на тексте по всем страницам сайта! вообще на каждой надписи

Пожалуйста произведите изменения согласно инструкции для продолжения.

#15 Stas_Y

Stas_Y

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

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

Отправлено 04 Май 2015 - 11:27

смотрите!

#16 Cupuyc

Cupuyc

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

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

Отправлено 04 Май 2015 - 11:52

Просмотр сообщенияStas_Y (04 Май 2015 - 11:27) писал:

смотрите!

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> style.css найдите код:
body{
font-family:"Myriad Pro", Arial, sans-serif;
font-size:14px;
background:#222;
color:#eee;
text-shadow:1px 1px 1px #333;
overflow-x:hidden;
}

Замените его на:
body{
font-family:"Myriad Pro", Arial, sans-serif;
font-size:14px;
background:#222;
color:#eee;
overflow-x:hidden;
}


#17 Stas_Y

Stas_Y

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

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

Отправлено 04 Май 2015 - 13:27

изображения ставлю а они не появляются

#18 Danil

Danil

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

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

Отправлено 05 Май 2015 - 11:15

Просмотр сообщенияStas_Y (04 Май 2015 - 13:27) писал:

изображения ставлю а они не появляются
Здравствуйте.
О каких изображениях идет речь?

#19 nrisimhi

nrisimhi

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 119 сообщений
  • ГородРостов-на-Дону

Отправлено 26 Август 2015 - 08:36

Помогите, пожалуйста. В какой-то теме находила код, блокирующий слайдер в мобильной версии, поставила его у себя. Сейчас хочу его удалить и не могу найти где.

#20 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 26 Август 2015 - 09:18

Просмотр сообщенияnrisimhi (26 Август 2015 - 08:36) писал:

Помогите, пожалуйста. В какой-то теме находила код, блокирующий слайдер в мобильной версии, поставила его у себя. Сейчас хочу его удалить и не могу найти где.

Здравствуйте.
На данный момент по вашему аккаунту Sl-39641 , слайдер присутствует в мобильной версии.
Уточните, пожалуйста, ваш вопрос всё ещё актуален или речь идёт о ином аккаунте?
Спасибо.




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

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