Вопрос По Слайдеру Весна
#1
Отправлено 17 Февраль 2015 - 21:38
мой сайт
#2
Отправлено 18 Февраль 2015 - 01:20
$(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
Отправлено 21 Апрель 2015 - 19:19
#4
Отправлено 21 Апрель 2015 - 19:42
sidh (21 Апрель 2015 - 19:19) писал:
Здравствуйте, масштабирование слайдера не влияет на его "вес", в данный момент у вас загружено 3 фотографии общим размером в 1мбайт. Вы можете выбрать другое разрешение для фотографий тем самым изменив итоговый "вес" слайдера
#5
Отправлено 21 Апрель 2015 - 19:43
Cupuyc (21 Апрель 2015 - 19:42) писал:
#6
Отправлено 01 Май 2015 - 12:11
с тем условием чтобы на картинке можно было разместить кнопку, например "перейти" или "купить"?
Если это невозможно, то как можно сделать вот такой вариант?
http://pcvector.net/...ry-slayder.html
#7
Отправлено 01 Май 2015 - 12:23
Stas_Y (01 Май 2015 - 12:11) писал:
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
Отправлено 01 Май 2015 - 12:28
#10
Отправлено 01 Май 2015 - 12:49
Подскажите как профессионал своего дела, что лучше?
#11
Отправлено 04 Май 2015 - 07:54
#13
Отправлено 04 Май 2015 - 10:53
#15
Отправлено 04 Май 2015 - 11:27
#16
Отправлено 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
Отправлено 04 Май 2015 - 13:27
#19
Отправлено 26 Август 2015 - 08:36
#20
Отправлено 26 Август 2015 - 09:18
nrisimhi (26 Август 2015 - 08:36) писал:
Здравствуйте.
На данный момент по вашему аккаунту Sl-39641 , слайдер присутствует в мобильной версии.
Уточните, пожалуйста, ваш вопрос всё ещё актуален или речь идёт о ином аккаунте?
Спасибо.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных