Solved

Jquery Rotating Banner

Posted on 2011-02-14
3
747 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

760 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now