Home/ Questions/Q 7968789
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T07:07:58+00:00

I’m using the Simple jQuery Slideshow Script by Jon Raasch (http://jonraasch.com/blog/a-simple-jquery-slideshow) and was wondering

  • 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&#8221;>

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0