Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Шаблоны (TPL) Перезапускается скрипт при обновлении страницы, как бороться?

Перезапускается скрипт при обновлении страницы, как бороться?


     31.12.2015    Шаблоны (TPL), jQuery, Ламерские вопросы    720

вопрос
Вот код шаблона.
<script async type="text/javascript" src="{THEME}/js/slides.js"></script>
<script async type="text/javascript">
    $(function(){
        $('#slides').slides({
            preloadImage: '/templates/Gemini/images/loading.gif',
            effect: 'fade',
            play: 5000,
            pause: 2500,
            generatePagination: false,
            preload: true,
            hoverPause: true
        });
    });
</script>
<div id="slides">
    <div class="slides_container">
    <div><a href="#"><img src="{THEME}/img/slide1-min.jpg" alt="" /></a></div>
    <div><a href="#"><img src="{THEME}/img/slide2-min.jpg" alt="" /></a></div>
    <div><a href="#"><img src="{THEME}/img/slide3-min.jpg" alt="" /></a></div>
    <div><a href="#"><img src="{THEME}/img/slide4-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide5-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide6-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide7-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide8-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide9-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide10-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide11-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide12-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide13-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide14-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide15-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide16-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide18-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide19-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide20-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide21-min.jpg" alt="" /></a></div>
        <div><a href="#"><img src="{THEME}/img/slide22-min.jpg" alt="" /></a></div>
    </div>
    <a href="#" class="thide prev">&lt;</a>
    <a href="#" class="thide next">&gt;</a>
</div>


А вот скрипт, что подключается в шаблоне.

(function(a){a.fn.slides=function(b){return b=a.extend({},a.fn.slides.option,b),this.each(function(){function w(g,h,i){if(!p&&o){switch(p=!0,b.animationStart(n+1),g){case"next":l=n,k=n+1,k=e===k?0:k,r=2*f,g=2*-f,n=k;break;case"prev":l=n,k=n-1,k=-1===k?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.paginationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=2*f,g=2*-f):(r=0,g=0),n=k}"fade"===h?b.crossfade?d.children(":eq("+k+")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}):d.children(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing)}):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block"}),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1}):d.animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+" li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+" li:eq("+k+")",c).addClass(b.currentClass))}}function x(){clearInterval(c.data("interval"))}function y(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeout(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x()}a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');var o,p,q,r,t,u,v,c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h=b.start-1,i=0>b.effect.indexOf(",")?b.effect:b.effect.replace(" ","").split(",")[0],j=0>b.effect.indexOf(",")?i:b.effect.replace(" ","").split(",")[1],k=0,l=0,m=0,n=0;if(2>e)return a("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+", ."+b.prev).fadeOut(0),!1;if(!(2>e)){if(0>h&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a("."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.children().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:3*f,height:g,left:-f}),a("."+b.container,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq("+h+")").outerHeight()},b.autoHeightSpeed)),b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c).css({background:"url("+b.preloadImage+") no-repeat 50% 50%"});var z=d.find("img:eq("+h+")").attr("src")+"?"+(new Date).getTime();t="slides_control"!=a("img",c).parent().attr("class")?d.children(":eq(0)")[0].tagName.toLowerCase():d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slidesLoaded()})})}else d.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.children().css({cursor:"pointer"}),d.children().on("click",function(){return w("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function(){y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).on("click",function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a("."+b.prev,c).on("click",function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagination?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><a href="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+" li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+" li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).on("click",function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).on("click",function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(function(){w("next",i)},b.play),c.data("interval",v))}})},a.fn.slides.option={preload:!1,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,prependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,autoHeightSpeed:350,bigTarget:!1,animationStart:function(){},animationComplete:function(){},slidesLoaded:function(){}},a.fn.randomize=function(b){function c(){return Math.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;f>i;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){var f=e.eq(c),g=f.clone(!0);g.show().appendTo(d),void 0!==b&&b(f,g),f.remove()})}})}})(jQuery);



Суть проблемы: когда пользователь обновляет страницу, то у него перезагружается цикл слайдера и он с 15 слайда (допустим), прыгает сразу на первый и так при любом обновлении страницы. Постоянно первый слайд...Он глаза мозолит и вообще это не дело и не комильфо...

Обшарил всё что мог, но ничего не нашел годного. Видимо не то ищу, подскажите хотя бы что искать. Спасибо.

Как сделать так, чтобы при обновлении страницы процесс не сбрасывался а сохранялся, ну или, был тупо независим от перезагрузок страницы???

Ответа пока нет


Комментарии пользователей (2)

nowheremany
192

1659 | 1292

nowheremany - 31 декабря 2015 16:58 - Эксперт

<script src="https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js"></script>
<script>
    $(function(){
        $('#slides').slides({
            preloadImage: '/templates/Gemini/images/loading.gif',
            effect: 'fade',
            play: 5000,
            pause: 2500,
            generatePagination: false,
            preload: true,
            hoverPause: true,
start: $.cookie("slidesStart")||1,
animationComplete: function(a){  $.cookie("slidesStart",a,{path:'/',expires:10})}
        });
    });
</script>

Через куки

Благодарность принимаю тут Связь

Петрушка
7 | 1

Петрушка - 31 декабря 2015 18:40 - Юзер

Премного благодарен.
Кому интересно, сделал я так: скопировал скрпит с этой ссылки https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js себе и создал отдельный файл у себя на сервере с этим кодом, вот так вот назвал его coocle.js, подключил его в шаблоне и всё заработало!
<script async type="text/javascript" src="{THEME}/js/coocle.js"></script>
<script async type="text/javascript" src="{THEME}/js/slides.js"></script>
<script async type="text/javascript">
    $(function(){
        $('#slides').slides({
            preloadImage: '/templates/Gemini/images/loading.gif',
            effect: 'fade',
            play: 5000,
            pause: 2500,
            generatePagination: false,
            preload: true,
            hoverPause: true,
start: $.cookie("slidesStart")||1,
animationComplete: function(a){  $.cookie("slidesStart",a,{path:'/',expires:10})}
        });
    });
</script>

Ещё раз выражаю благодарность Александру (nowheremany)
P.S при попытке подключения скрипта со ссылки выдавало ошибку, именно поэтому пришлось создавать отдельно тот же скрипт.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы