Solved

Jquery Rotating Banner

Posted on 2011-02-14
3
754 Views
Last Modified: 2012-05-11
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
Comment
Question by:Webbo_1980
  • 2
3 Comments
 
LVL 10

Expert Comment

by:P1ST0LPETE
ID: 34888835
Give me a few min, working on seeing how it works now.
0
 

Author Comment

by:Webbo_1980
ID: 34888872
Thats great thanks :-)
0
 
LVL 10

Accepted Solution

by:
P1ST0LPETE earned 500 total points
ID: 34889252
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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question