function - how to stop and reset slides.jquery.js -
edit 4 july: still struggling issue. i'm sure that's required function stops slideshow based on class 'playing', uncertain how create function.
i'm using slides.js on single-page site multiple slideshows. had initialised script within head using following:
<script> $(function(){ $(".slides").slides({ play: 3000, fadespeed: 800, effect: 'fade' }); </script> but found multiple slideshows behaving oddly, decided have them play individually , initialised within function (that controls site content) this:
activeid = this.id, function playslides() { $('.slides#' + activeid + '-slides').addclass('playing').slides({ play: 3000, fadespeed: 800, effect: 'fade' }); } this working correctly first time each slideshow intialised, on viewing slideshow second time after that, images within slideshow seem disappear , twice pagination numbers appear.
i'm sure problem slideshows need stopped , reset each time they've played.
so how go stopping slideshow playing? tried calling following function:
function stopslides() { if($('.slides.playing')) { stop(); $('.slides.playing').removeclass('playing'); } } i tried:
function stopslides() { if($('.slides').hasclass('playing')) { stop(); $('.slides.playing').removeclass('playing'); } } however, seem anything. please advise if haven't been clear enough or need more info. mtia!
script here:
/* * slides, slideshow plugin jquery * intructions: http://slidesjs.com * by: nathan searles, http://nathansearles.com * version: 1.1.8 * updated: june 1st, 2011 * * licensed under apache license, version 2.0 (the "license"); * may not use file except in compliance license. * may obtain copy of license @ * * http://www.apache.org/licenses/license-2.0 * * unless required applicable law or agreed in writing, software * distributed under license distributed on "as is" basis, * without warranties or conditions of kind, either express or implied. * see license specific language governing permissions , * limitations under license. */ (function($){ $.fn.slides = function( option ) { // override defaults specified option option = $.extend( {}, $.fn.slides.option, option ); return this.each(function(){ // wrap slides in control container, make sure slides block level $('.' + option.container, $(this)).children().wrapall('<div class="slides_control"/>'); var elem = $(this), control = $('.slides_control',elem), total = control.children().size(), width = control.children().outerwidth(), height = control.children().outerheight(), start = option.start - 1, effect = option.effect.indexof(',') < 0 ? option.effect : option.effect.replace(' ', '').split(',')[0], paginationeffect = option.effect.indexof(',') < 0 ? effect : option.effect.replace(' ', '').split(',')[1], next = 0, prev = 0, number = 0, current = 0, loaded, active, clicked, position, direction, imageparent, pausetimeout, playinterval; // animate slides function animate(direction, effect, clicked) { if (!active && loaded) { active = true; // start of animation option.animationstart(current + 1); switch(direction) { case 'next': // change current slide previous prev = current; // next current + 1 next = current + 1; // if last slide, set next first slide next = total === next ? 0 : next; // set position of next slide right of previous position = width*2; // distance slide based on width of slides direction = -width*2; // store new current slide current = next; break; case 'prev': // change current slide previous prev = current; // next current - 1 next = current - 1; // if first slide, set next last slide next = next === -1 ? total-1 : next; // set position of next slide left of previous position = 0; // distance slide based on width of slides direction = 0; // store new current slide current = next; break; case 'pagination': // next pagination item clicked, convert number next = parseint(clicked,10); // previous pagination item class of current prev = $('.' + option.paginationclass + ' li.'+ option.currentclass +' a', elem).attr('href').match('[^#/]+$'); // if next greater previous set position of next slide right of previous if (next > prev) { position = width*2; direction = -width*2; } else { // if next less previous set position of next slide left of previous position = 0; direction = 0; } // store new current slide current = next; break; } // fade animation if (effect === 'fade') { // fade animation crossfade if (option.crossfade) { // put hidden next above current control.children(':eq('+ next +')', elem).css({ zindex: 10 // fade in next }).fadein(option.fadespeed, option.fadeeasing, function(){ if (option.autoheight) { // animate container height of next control.animate({ height: control.children(':eq('+ next +')', elem).outerheight() }, option.autoheightspeed, function(){ // hide previous control.children(':eq('+ prev +')', elem).css({ display: 'none', zindex: 0 }); // reset z index control.children(':eq('+ next +')', elem).css({ zindex: 0 }); // end of animation option.animationcomplete(next + 1); active = false; }); } else { // hide previous control.children(':eq('+ prev +')', elem).css({ display: 'none', zindex: 0 }); // reset zindex control.children(':eq('+ next +')', elem).css({ zindex: 0 }); // end of animation option.animationcomplete(next + 1); active = false; } }); } else { // fade animation no crossfade control.children(':eq('+ prev +')', elem).fadeout(option.fadespeed, option.fadeeasing, function(){ // animate new height if (option.autoheight) { control.animate({ // animate container height of next height: control.children(':eq('+ next +')', elem).outerheight() }, option.autoheightspeed, // fade in next slide function(){ control.children(':eq('+ next +')', elem).fadein(option.fadespeed, option.fadeeasing); }); } else { // if fixed height control.children(':eq('+ next +')', elem).fadein(option.fadespeed, option.fadeeasing, function(){ // fix font rendering in ie, lame if($.browser.msie) { $(this).get(0).style.removeattribute('filter'); } }); } // end of animation option.animationcomplete(next + 1); active = false; }); } // slide animation } else { // move next slide right of previous control.children(':eq('+ next +')').css({ left: position, display: 'block' }); // animate new height if (option.autoheight) { control.animate({ left: direction, height: control.children(':eq('+ next +')').outerheight() },option.slidespeed, option.slideeasing, function(){ control.css({ left: -width }); control.children(':eq('+ next +')').css({ left: width, zindex: 5 }); // reset previous slide control.children(':eq('+ prev +')').css({ left: width, display: 'none', zindex: 0 }); // end of animation option.animationcomplete(next + 1); active = false; }); // if fixed height } else { // animate control control.animate({ left: direction },option.slidespeed, option.slideeasing, function(){ // after animation reset control position control.css({ left: -width }); // reset , show next control.children(':eq('+ next +')').css({ left: width, zindex: 5 }); // reset previous slide control.children(':eq('+ prev +')').css({ left: width, display: 'none', zindex: 0 }); // end of animation option.animationcomplete(next + 1); active = false; }); } } // set current state pagination if (option.pagination) { // remove current class $('.'+ option.paginationclass +' li.' + option.currentclass, elem).removeclass(option.currentclass); // add current class next $('.' + option.paginationclass + ' li:eq('+ next +')', elem).addclass(option.currentclass); } } } // end animate function function stop() { // clear interval stored id clearinterval(elem.data('interval')); } function pause() { if (option.pause) { // clear timeout , interval cleartimeout(elem.data('pause')); clearinterval(elem.data('interval')); // pause slide show option.pause amount pausetimeout = settimeout(function() { // clear pause timeout cleartimeout(elem.data('pause')); // start play interval after pause playinterval = setinterval( function(){ animate("next", effect); },option.play); // store play interval elem.data('interval',playinterval); },option.pause); // store pause interval elem.data('pause',pausetimeout); } else { // if no pause, stop stop(); } } // 2 or more slides required if (total < 2) { return; } // error corection start slide if (start < 0) { start = 0; } if (start > total) { start = total - 1; } // change current based on start option number if (option.start) { current = start; } // randomizes slide order if (option.randomize) { control.randomize(); } // make sure overflow hidden, width set $('.' + option.container, elem).css({ overflow: 'hidden', // fix ie position: 'relative' }); // set css slides control.children().css({ position: 'absolute', top: 0, left: control.children().outerwidth(), zindex: 0, display: 'none' }); // set css control div control.css({ position: 'relative', // size of control 3 x slide width width: (width * 3), // set height slide height height: height, // center control slide left: -width }); // show slides $('.' + option.container, elem).css({ display: 'block' }); // if autoheight true, , set height of first slide if (option.autoheight) { control.children().css({ height: 'auto' }); control.animate({ height: control.children(':eq('+ start +')').outerheight() },option.autoheightspeed); } // checks if image loaded if (option.preload && control.find('img:eq(' + start + ')').length) { // adds preload image $('.' + option.container, elem).css({ background: 'url(' + option.preloadimage + ') no-repeat 50% 50%' }); // gets image src, cache buster var img = control.find('img:eq(' + start + ')').attr('src') + '?' + (new date()).gettime(); // check if image has parent if ($('img', elem).parent().attr('class') != 'slides_control') { // if image has parent, tag name imageparent = control.children(':eq(0)')[0].tagname.tolowercase(); } else { // image doesn't have parent, use image tag name imageparent = control.find('img:eq(' + start + ')'); } // checks if image loaded control.find('img:eq(' + start + ')').attr('src', img).load(function() { // once image loaded, fade in control.find(imageparent + ':eq(' + start + ')').fadein(option.fadespeed, option.fadeeasing, function(){ $(this).css({ zindex: 5 }); // removes preload image $('.' + option.container, elem).css({ background: '' }); // let script know loaded loaded = true; // call loaded funciton option.slidesloaded(); }); }); } else { // if no preloader fade in start slide control.children(':eq(' + start + ')').fadein(option.fadespeed, option.fadeeasing, function(){ // let script know loaded loaded = true; // call loaded funciton option.slidesloaded(); }); } // click slide next if (option.bigtarget) { // set cursor pointer control.children().css({ cursor: 'pointer' }); // click handler control.children().click(function(){ // animate next on slide click animate('next', effect); return false; }); } // pause on mouseover if (option.hoverpause && option.play) { control.bind('mouseover',function(){ // on mouse on stop stop(); }); control.bind('mouseleave',function(){ // on mouse leave start pause timeout pause(); }); } // generate next/prev buttons if (option.generatenextprev) { $('.' + option.container, elem).after('<a href="#" class="'+ option.prev +'">prev</a>'); $('.' + option.prev, elem).after('<a href="#" class="'+ option.next +'">next</a>'); } // next button $('.' + option.next ,elem).click(function(e){ e.preventdefault(); if (option.play) { pause(); } animate('next', effect); }); // previous button $('.' + option.prev, elem).click(function(e){ e.preventdefault(); if (option.play) { pause(); } animate('prev', effect); }); // generate pagination if (option.generatepagination) { // create unordered list if (option.prependpagination) { elem.prepend('<ul class='+ option.paginationclass +'></ul>'); } else { elem.append('<ul class='+ option.paginationclass +'></ul>'); } // each slide create list item , link control.children().each(function(){ $('.' + option.paginationclass, elem).append('<li><a href="#'+ number +'">'+ (number+1) +'</a></li>'); number++; }); } else { // if pagination exists, add href w/ value of item number links $('.' + option.paginationclass + ' li a', elem).each(function(){ $(this).attr('href', '#' + number); number++; }); } // add current class start slide pagination $('.' + option.paginationclass + ' li:eq('+ start +')', elem).addclass(option.currentclass); // click handling $('.' + option.paginationclass + ' li a', elem ).click(function(){ // pause slideshow if (option.play) { pause(); } // clicked, pass animate function clicked = $(this).attr('href').match('[^#/]+$'); // if current slide equals clicked, don't if (current != clicked) { animate('pagination', paginationeffect, clicked); } return false; }); // click handling $('a.link', elem).click(function(){ // pause slideshow if (option.play) { pause(); } // clicked, pass animate function clicked = $(this).attr('href').match('[^#/]+$') - 1; // if current slide equals clicked, don't if (current != clicked) { animate('pagination', paginationeffect, clicked); } return false; }); if (option.play) { // set interval playinterval = setinterval(function() { animate('next', effect); }, option.play); // store interval id elem.data('interval',playinterval); } }); }; // default options $.fn.slides.option = { preload: false, // boolean, set true preload images in image based slideshow preloadimage: '/img/loading.gif', // string, name , location of loading image preloader. default "/img/loading.gif" container: 'slides_container', // string, class name slides container. default "slides_container" generatenextprev: false, // boolean, auto generate next/prev buttons next: 'next', // string, class name next button prev: 'prev', // string, class name previous button pagination: true, // boolean, if you're not using pagination can set false, don't have generatepagination: true, // boolean, auto generate pagination prependpagination: false, // boolean, prepend pagination paginationclass: 'pagination', // string, class name pagination currentclass: 'current', // string, class name current class fadespeed: 350, // number, set speed of fading animation in milliseconds fadeeasing: '', // string, must load jquery's easing plugin before http://gsgd.co.uk/sandbox/jquery/easing/ slidespeed: 350, // number, set speed of sliding animation in milliseconds slideeasing: '', // string, must load jquery's easing plugin before http://gsgd.co.uk/sandbox/jquery/easing/ start: 1, // number, set speed of sliding animation in milliseconds effect: 'slide', // string, '[next/prev], [pagination]', e.g. 'slide, fade' or 'fade' both crossfade: false, // boolean, crossfade images in image based slideshow randomize: false, // boolean, set true randomize slides play: 0, // number, autoplay slideshow, positive number set true , time between slide animation in milliseconds pause: 0, // number, pause slideshow on click of next/prev or pagination. positive number set true , time of pause in milliseconds hoverpause: false, // boolean, set true , hovering on slideshow pause autoheight: false, // boolean, set true auto adjust height autoheightspeed: 350, // number, set auto height animation time in milliseconds bigtarget: false, // boolean, set true , whole slide link next slide on click animationstart: function(){}, // function called @ start of animation animationcomplete: function(){}, // function called @ completion of animation slidesloaded: function() {} // function called when slides loaded }; // randomize slide order on load $.fn.randomize = function(callback) { function randomizeorder() { return(math.round(math.random())-0.5); } return($(this).each(function() { var $this = $(this); var $children = $this.children(); var childcount = $children.length; if (childcount > 1) { $children.hide(); var indices = []; (i=0;i<childcount;i++) { indices[indices.length] = i; } indices = indices.sort(randomizeorder); $.each(indices,function(j,k) { var $child = $children.eq(k); var $clone = $child.clone(true); $clone.show().appendto($this); if (callback !== undefined) { callback($child, $clone); } $child.remove(); }); } })); }; })(jquery);
i don't know if best solution found 1 - purposes anyways. i'm using slides.js plugin , client requested slidshow stop on last slide. used animationcomplete callback function trigger click event on pagination (which stops autoplay functionality).
$("#slides").slides({ crossfade: false, effect: 'fade', fadeeasing: "easeoutquad", fadespeed: 500, play: 6000, animationcomplete: function(){ introslides(); if($('.pagination li:last').hasclass('current')){ $('.pagination li:last a').trigger('click'); } } }); hope helps :)
Comments
Post a Comment