Solved

How to add a timer slideshow in this slider jquery script?

Posted on 2011-03-10
4
550 Views
Last Modified: 2012-05-11
Hi,

I would like to know how can I add a timer function (like a slideshow) that will show each <li> content by 10 seconds and after will show the next and goes on...

Here is the slider function http://www.marcosrocha.me

Below follow the jQuery script that controls this component.

Thank you
(function($){

// Creating the sweetPages jQuery plugin:
$.fn.sweetPages = function(opts){
	
	// If no options were passed, create an empty opts object
	if(!opts) opts = {};
	
	var resultsPerPage = opts.perPage || 3;
	
	// The plugin works best for unordered lists, althugh ols would do just as well:
	var ul = this;
	var li = ul.find('li');
	
	li.each(function(){
		// Calculating the height of each li element, and storing it with the data method:
		var el = $(this);
		el.data('height',el.outerHeight(true));
	});
	
	// Calculating the total number of pages:
	var pagesNumber = Math.ceil(li.length/resultsPerPage);
	
	// If the pages are less than two, do nothing:
	if(pagesNumber<2) return this;

	// Creating the controls div:
	var swControls = $('<div class="swControls">');
	
	for(var i=0;i<pagesNumber;i++)
	{
		// Slice a portion of the lis, and wrap it in a swPage div:
		li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');
		
		// Adding a link to the swControls div:
		swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');
	}

	ul.append(swControls);
	
	var maxHeight = 0;
	var totalWidth = 0;
	
	var swPage = ul.find('.swPage');
	swPage.each(function(){
		
		// Looping through all the newly created pages:
		
		var elem = $(this);

		var tmpHeight = 0;
		elem.find('li').each(function(){tmpHeight+=$(this).data('height');});

		if(tmpHeight>maxHeight)
			maxHeight = tmpHeight;

		totalWidth+=elem.outerWidth();
		
		elem.css('float','left').width(ul.width());
	});
	
	swPage.wrapAll('<div class="swSlider" />');
	
	// Setting the height of the ul to the height of the tallest page:
	ul.height(maxHeight);
	
	var swSlider = ul.find('.swSlider');
	swSlider.append('<div class="clear" />').width(totalWidth);

	var hyperLinks = ul.find('a.swShowPage');
	
	hyperLinks.click(function(e){
		
		// If one of the control links is clicked, slide the swSlider div 
		// (which contains all the pages) and mark it as active:

		$(this).addClass('active').siblings().removeClass('active');
		
		swSlider.stop().animate({'margin-left':-(parseInt($(this).text())-1)*ul.width()},'slow');
		e.preventDefault();
	});
	
	// Mark the first link as active the first time this code runs:
	hyperLinks.eq(0).addClass('active');
	
	// Center the control div:
	swControls.css({
		'left':'50%',
		'margin-left':-swControls.width()/2
	});
	
	return this;
	
}})(jQuery);


$(document).ready(function(){
	/* The following code is executed once the DOM is loaded */
	
	// Calling the jQuery plugin and splitting the
	// #holder UL into pages of 3 LIs each:
	
	$('#holder').sweetPages({perPage:1});
	
	// The default behaviour of the plugin is to insert the 
	// page links in the ul, but we need them in the main container:

	var controls = $('.swControls').detach();
	controls.appendTo('#main');
	
});

Open in new window

0
Comment
Question by:marcoloppo
  • 2
  • 2
4 Comments
 
LVL 8

Accepted Solution

by:
McNetic earned 500 total points
Comment Utility
After this line:
hyperLinks.eq(0).addClass('active');

Open in new window


try adding the following:

var slideTimer = function() {
  var activePage = ul.find('a.swShowPage.active');
  var nextPage;

	if (0 < activePage.next().length) {
		nextPage = activePage.next().first();
	} else {
	  nextPage = activePage.siblings().first();
	}
  nextPage.addClass('active').siblings().removeClass('active');

  swSlider.stop().animate({'margin-left':-(parseInt(nextPage.text())-1)*ul.width()},'slow');
	setTimeout(slideTimer, 10000);
}
setTimeout(slideTimer, 10000);

Open in new window

0
 

Author Comment

by:marcoloppo
Comment Utility
Hi,

Thank you for your answer. I added the code lines above as you asked, but unfortunately it did not work as you can see http://www.marcosrocha.me

Can u see what's happening?

0
 
LVL 8

Assisted Solution

by:McNetic
McNetic earned 500 total points
Comment Utility
Sorry for that. Try replacing the second line by:

var activePage = $('div.swControls a.swShowPage.active');

Open in new window

0
 

Author Closing Comment

by:marcoloppo
Comment Utility
Perfect solution, thank you.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Read about why website design really matters in today's demanding market.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

763 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

14 Experts available now in Live!

Get 1:1 Help Now