0

I'm using the Simple jQuery Slideshow Script by Jon Raasch (http://jonraasch.com/blog/a-simple-jquery-slideshow) and was wondering how I could enable the user to click on the image to go to the next image while also keeping the autoplay mode of the slideshow on. First time in trying to built a website, so I have very basic knowledge in source coding/ css/jquery.

Would I have to modify both the js file and the source coding too? And how would I modify it? If anyone can help it'll be much appreciated.

Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

xmlns="http://www.w3.org/1999/xhtml">

csutoras+liando

/*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ function slideSwitch() { var $active = $('#slideshow DIV.active'); 
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

// use this to pull the divs in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow DIV:first');

// uncomment below to pull the divs randomly
// var $sibs  = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next  = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    }); }
$(function() { setInterval( "slideSwitch()", 5000 ); });

/* set the width and height to match your images **/

slideshow { position:relative; height:350px; width: 500px; margin: 0 auto; }

slideshow DIV { position:absolute; top:0; left:0; z-index:8; opacity:0.0; height: 400px; background-color: #FFF; min-width:

100%; filter: alpha(opacity=0); }

slideshow DIV.active {

z-index:10;
opacity:1.0;  filter: alpha(opacity=100); }

slideshow DIV.last-active {

z-index:9; }

slideshow DIV IMG { height: 350px; display: block; border: 0; margin-bottom: 10px; width: 500px; }

Test

info

    Caption for image 1   </div>

<div>
    <img src="../../Images/images/photo (9).jpg" alt="Slideshow Image 2" /></a>
    Caption for image 2   </div>

<div>
    <img src="../../Images/images/photo (8).jpg" alt="Slideshow Image 3" /></a>
    Caption for image 3   </div>


<div>
    <img src="../../Images/images/photo (7).jpg" alt="Slideshow Image 4" /></a>
    Caption for image 4
</div>
 </div>

 

ABOUT

enter code here

waikiki
  • 3
  • 1
  • 3
  • 1
    check http://stackoverflow.com/questions/7615850/advance-slideshow-manually-with-jquery – Sully May 16 '12 at 17:35

1 Answers1

0

It would appear that his layout is to just execute slideSwitch() to advance to the next slide. However, there is a running timer going on in the background; firing every 5 seconds indefinitely. You'll need to clear that timeout and probably set it going again. Here's the general idea:

// What you should already have:
$(function() {
    setInterval( "slideSwitch()", 5000 );
});

// what you need to change it into:
var intervalID = ""; // keep track of the timeout going on in the background so you can cancel it
$(function() {
    intervalID = setInterval( "slideSwitch()", 5000 );
});

// On any image that is clicked, execute the following
$("img").on("click", function() {
    clearInterval(intervalID); // stop the current slideshow changes
    slideSwitch(); // switch now
    intervalID = setInterval( "slideSwitch()", 5000); // set up the next change
});

For a great explanation on setInterval/clearInterval, see these discussions

Update: In order to properly grasp what you are getting yourself into, be sure to read the documentation jQuery has. There are a lot of really great tutorials but jQuery's own page is useful, too. If something doesn't seem to be firing when you expect then check your Browser's 'Developer Tools' (or firebug install for Firefox). You can set breakpoints in your code for when the javascript executes or you can execute javascript alerts within your code if you want to test something briefly.

You may need to set your image click event handler inside $(document).ready(function() {...} so that it knows about all your images. The how jQuery works page is going to be really helpful for understanding what that does / can do.

// make sure the page has been fully loaded when the following executes
$(document).ready(function() {
    // On any image that is clicked, execute the following
    $("img").on("click", function() {
        clearInterval(intervalID); // stop the current slideshow changes
        slideSwitch(); // switch now
        intervalID = setInterval( "slideSwitch()", 5000); // set up the next change
    });
});

Be sure to start getting familiar with the api; you'll find things like .on() documented there, selectors, how to get at attributes of DOM elements, and everything else that jQuery has built on top of javascript.

Lots of reading but you're going to be glad you took the time to understand the powers that you are trying to wield.

Community
  • 1
  • 1
veeTrain
  • 2,915
  • 2
  • 26
  • 43
  • Thanks VeeTrain,Where exactly should I add the $(img).onclick code? would it be straight after the part before ? I've edited my question to include the full code. – waikiki May 16 '12 at 19:16
  • You might want to wrap it inside `$(document).ready( function() {...});`. I hadn't tested the above so be sure to watch your Developer Console to make sure there aren't any javascript errors. Set breakpoints to find out when things are firing. – veeTrain May 16 '12 at 19:28
  • Sorry VeeTrain, you lost me there...I could not find any reference to $(document).ready( function()...in the source code script of the page? Do I need to open the js file? Apologies..am a newbie and rather clueless about this. Thanks – waikiki May 16 '12 at 23:04
  • @waikiki; not a problem. But in order to understand what you're doing, you're going to need to start reading some [documentation](http://docs.jquery.com/Main_Page). <-- that is an excellent place to look and the 'How jQuery Works' article will really help you get a feel for what powers you have at your disposal. [here](http://api.jquery.com/) is the list of functions jQuery can leverage and the menu on the left should become an old friend. I'll update my answer soon. – veeTrain May 17 '12 at 11:39
  • @waikiki; when you get done with what you are trying to get working, be sure to come back and mark this as your answer if it has helped you along your way. – veeTrain May 17 '12 at 11:52
  • it works! Thank you so much...am so happy...have been struggling for awhile...doing the 'how jquery works' demo helps a lot too in understanding the basics..thanks again..really really appreciate your help! – waikiki May 17 '12 at 18:19
  • @D3mon-1stVFW; thanks as well for the link – waikiki May 17 '12 at 18:22
  • @waikiki; no problem and glad you got what you needed. – veeTrain May 17 '12 at 19:15
  • sorry veeTrain...one more question...if I'd like the cursor to change into a pointer when it hovers on the image, how should i go about doing that? – waikiki May 17 '12 at 21:12
  • @waikiki; be sure to do a search to make sure a question hasn't already been answered. If [this question/answer](http://stackoverflow.com/q/8809909/469643) isn't what you're looking for, then you might want to ask a new question. My search terms were 'change cursor into pointer' and it was the first result. – veeTrain May 18 '12 at 11:37