• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 775
  • Last Modified:

Jquery Rotating Banner

Hi Experts,

I'm using the following control for a rotating banner with text - http://www.queness.com/resources/html/newsslider/index.html. I would like to make the following modifications - however given my lack of knowledge I don't know where to start:

1. Instead of rewinding to the beginning I would like it on an infinate loop, so that it goes 1, 2, 3 then back to 1, 2, 3 and so forth.
2. I would also like to figure out how to control the timing of the change of slide. It seems that the cycle is fixed and sometimes when I click the back button - it moves back on to the slide I've just gone back from (the same is for when I click on the forward button). If I click the back button the timer should reset, rather than continue from the previous transition.

Any help provided would be much appreciated. I'm learning Jquery - so please bear with me :-)

Many thanks in advance.
0
Webbo_1980
Asked:
Webbo_1980
  • 2
1 Solution
 
P1ST0LPETECommented:
Give me a few min, working on seeing how it works now.
0
 
Webbo_1980Author Commented:
Thats great thanks :-)
0
 
P1ST0LPETECommented:
Ok, so to start off with, I've reduced all the code to just the core elements, deleting all the extra adds and tracking BS that was on the page.  Also at the top of the page I placed a link to the current version of jQuery, which replaces the need of having a local version of jQuery.  I was not however able to find an online hosted version of the jQuery plugin "ScrollTo", so you'll still have to have a local copy of that which you can download here:

    http://flesler.blogspot.com/2007/10/jqueryscrollto.html

So I've created a local folder "Script" and stuck the ScrollTo plugin in there, and I also created a local folder "Images" and stuck the 3 images files in there (pretty common stuff) and then adjusted the html.

Now, to the changes you're after:

The time between changes is hard coded and set to 5 seconds.  This is done at the very top of the javascript in this line of code:

            //Speed of the slideshow
            var speed = 5000;

5000 milliseconds = 5 seconds as I'm sure you know.  You can adjust this however you like.

The timer is kicked off in this line of code:

            //Assign a timer, so it will run periodically
            var run = setInterval('newsscoller(0)', speed);

And it only stopped and started when the play or pause button is clicked respectively.
The next and previous buttons do nothing to alter the timer and their original code looks like this:

            //Next Slide by calling the function
            $('#btn-next').click(function ()
            {
                newsscoller(0);;
                return false;
            });

            //Previous slide by passing prev=1
            $('#btn-prev').click(function ()
            {
                newsscoller(1);
                return false;
            });

However, we can easily reset the timer when pressing next or previous by using the same techniques used in the play and pause buttons.  See the following adjusted code which will reset the timer:

            //Next Slide by calling the function
            $('#btn-next').click(function ()
            {
                newsscoller(0);
                clearInterval(run);
                run = setInterval('newsscoller(0)', speed);
                return false;
            });

            //Previous slide by passing prev=1
            $('#btn-prev').click(function ()
            {
                newsscoller(1);
                clearInterval(run);
                run = setInterval('newsscoller(0)', speed);
                return false;
            });

Regarding the scrolling 1-2-3 and then scrolling right into 1 without scrolling backwards - I don't have the time to provide a fix for this, as the author of this jQuery slider is using the ScrollTo plugin (which I'm not too familiar with) to do the sliding, and it's the plugin that defines how the sliding works.  So I don't know if the plugin provides a different kind of slidding, or if you would have to write your own code to get the scrolling to work the way you want.

Anyway, attached is working code.  Good luck.
 
<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>jQuery News Slider Demo | Queness</title>
    <style type="text/css">
        #slider { width:300px; height:186px; position:relative;	overflow:hidden; }
        #mask-gallery { overflow:hidden; }
        /* width = total items multiply with #mask gallery width */
        #gallery { list-style:none; margin:0; padding:0; z-index:0; width:900px; overflow:hidden; }
        #gallery li { float:left; }
        /* width should be lesser than #slider width */
        #mask-excerpt { position:absolute; top:0; left:0; z-index:500px; width:100px; overflow:hidden; }
        #excerpt { filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; }
        #excerpt { list-style:none; margin:0; padding:0; z-index:10; position:absolute; top:0; left:0; }
        #excerpt { width:100px; background-color:#000; overflow:hidden; font-family:arial; font-size:10px; color:#fff; }
        #excerpt li { padding:5px; }
        .clear { clear:both; }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="Script/jquery.scrollTo.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {

            //Speed of the slideshow
            var speed = 5000;

            //You have to specify width and height in #slider CSS properties
            //After that, the following script will set the width and height accordingly
            $('#mask-gallery, #gallery li').width($('#slider').width());
            $('#gallery').width($('#slider').width() * $('#gallery li').length);
            $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());

            //Assign a timer, so it will run periodically
            var run = setInterval('newsscoller(0)', speed);

            $('#gallery li:first, #excerpt li:first').addClass('selected');

            //Pause the slidershow with clearInterval
            $('#btn-pause').click(function ()
            {
                clearInterval(run);
                return false;
            });

            //Continue the slideshow with setInterval
            $('#btn-play').click(function ()
            {
                run = setInterval('newsscoller(0)', speed);
                return false;
            });

            //Next Slide by calling the function
            $('#btn-next').click(function ()
            {
                newsscoller(0);
                clearInterval(run);
                run = setInterval('newsscoller(0)', speed);
                return false;
            });

            //Previous slide by passing prev=1
            $('#btn-prev').click(function ()
            {
                newsscoller(1);
                clearInterval(run);
                run = setInterval('newsscoller(0)', speed);
                return false;
            });

            //Mouse over, pause it, on mouse out, resume the slider show
            $('#slider').hover(

		        function ()
		        {
		            clearInterval(run);
		        },
		        function ()
		        {
		            run = setInterval('newsscoller(0)', speed);
		        }
	        );

        });


        function newsscoller(prev) {

	        //Get the current selected item (with selected class), if none was found, get the first item
	        var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
	        var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

	        //if prev is set to 1 (previous item)
	        if (prev) {
		
		        //Get previous sibling
		        var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
		        var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
	
	        //if prev is set to 0 (next item)
	        } else {
		
		        //Get next sibling
		        var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
		        var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
	        }

	        //clear the selected class
	        $('#excerpt li, #gallery li').removeClass('selected');
	
	        //reassign the selected class to current items
	        next_image.addClass('selected');
	        next_excerpt.addClass('selected');

	        //Scroll the items
	        $('#mask-gallery').scrollTo(next_image, 800);		
	        $('#mask-excerpt').scrollTo(next_excerpt, 800);					
	
        }
    </script>
</head>
<body>
    <div id="debug"></div>
    <div id="slider">
	    <div id="mask-gallery" style="width: 300px; height: 186px; ">
	    <ul id="gallery" style="width: 900px; ">
		    <li style="width: 300px; height: 186px; " class="selected"><img src="Images/pier1.jpg" width="300" height="186" alt=""></li>
		    <li style="width: 300px; height: 186px; " class=""><img src="Images/pier2.jpg" width="300" height="186" alt=""></li>
		    <li style="width: 300px; height: 186px; " class=""><img src="Images/pier3.jpg" width="300" height="186" alt=""></li>
	    </ul>
	    </div>
	    <div id="mask-excerpt" style="height: 186px; ">
	    <ul id="excerpt">
		    <li style="height: 186px; " class="selected">Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.</li>
		    <li style="height: 186px; " class="">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
		    <li style="height: 186px; " class="">Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li>
	    </ul>
	    </div>
    </div>
    <div id="buttons">
	    <a href="http://www.queness.com/resources/html/newsslider/index.html#" id="btn-prev">prev</a> 
	    <a href="http://www.queness.com/resources/html/newsslider/index.html#" id="btn-pause">pause</a> 
	    <a href="http://www.queness.com/resources/html/newsslider/index.html#" id="btn-play">play</a> 
	    <a href="http://www.queness.com/resources/html/newsslider/index.html#" id="btn-next">next</a>
    </div>
    <div class="clear"></div>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now