jquery next slide auto play

I have a basic script that does all I need except an auto-play feature. I just need this to loop through the images and update the pagination on page load.

// JavaScript Document
$(document).ready(function (){
	$('#button a').click(function(){
		var integer = $(this).attr('rel');
		var cap= $(this).attr('title');
		$('#spotSlide .spotCover').css({left:-216*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div spotContent (here 216) ------ */
		$('#button a').each(function(){
		$(this).removeClass('active');
			if($(this).hasClass('button'+integer)){
				$(this).addClass('active')}
		});
		$('#titleTxt').html(cap);
	});
	$('#lib_button a').click(function(){
		var integer = $(this).attr('rel');
		var cap= $(this).attr('title');
		$('#libSlide .libCover').css({left:-216*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div libContent (here 216) ------ */
		$('#lib_button a').each(function(){
		$(this).removeClass('active');
			if($(this).hasClass('lib_button'+integer)){
				$(this).addClass('active')}
		});
		//$('libtitleText').text(cap);
		$('#libtitleTxt').html(cap);
	});
	
});




<div class="featureBoxEnd" id="library">LIBRARY
<div id="libSlide">
<div class="libCover" style="left: -648px; display: block; ">
<div class="libContent"><a href="#"><img src="http://www.starzglobal.com/images/featured/pkj.jpg" title="Painkiller Jane" alt="" width="216" height="103"></a></div>
<div class="libContent"><a href="#"><img src="http://www.starzglobal.com/images/featured/moh.jpg" title="Masters of Horror" alt="" width="216" height="103"></a></div>
<div class="libContent"><a href="#"><img src="http://www.starzglobal.com/images/featured/pd.jpg" title="Party Down" alt="" width="216" height="103"></a></div>
</div> 
</div>


<div class="bottomWrapper">
<div id="lib_button">
<a class="lib_button1" rel="1" title="Painkiller Jane" href="#"></a>
<a class="lib_button2" rel="2" title="Masters of Horror" href="#"></a>
<a class="lib_button3" rel="3" title="Party Down" href="#"></a>
</div>
</div>
</div>

Open in new window

gvilla23Asked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
I modified the original code a bit - did not have styling so made that up.
This code does what I think you want - I have included both a index panel to select image but also an autoplay function.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
// JavaScript Document
var autoplay = true;
var timeout = 5000;
var fade = 750;
$(document).ready(function (){
  if (autoplay) {
    setTimeout('cycleImage()', timeout);
  }
  
  $('#lib_button a').click(function(e) {
    e.preventDefault();
    var idx = $('#lib_button a').index($(this)) + 1;
    showImage(idx);
  });
  
});
function cycleImage()
{
  var i = $('.libContent').index($('.libContent:visible'))+2;
  if (i > $('.libContent').length) i=1;
  $('.libContent:visible').fadeOut(fade, function() {
    $('.libContent:nth-child(' + i + ')').fadeIn(fade);
    if (autoplay) {
      setTimeout('cycleImage()', timeout);
    }
  });
}
function showImage(idx)
{
  var i = $('.libContent').index($('.libContent:visible')) + 1;
  if (i != idx) {
    $('.libContent:visible').fadeOut(fade, function() {
      $('.libContent:nth-child(' + idx + ')').fadeIn(fade);
    });
  }
}
</script>
<style type="text/css">
#libSlide {
  width: 216px;
  height: 103px;
  overflow: hidden;
  border: 1px solid blue;
  position: relative;
}
.libCover {
  width: 648px;
  position: absolute;
  top: 0;
}
.libContent {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  width: 216px;
  height: 103px;
  float: left;
}
</style>
</head>
<body>

<div class="featureBoxEnd" id="library">LIBRARY
<div id="libSlide">
<div class="libCover">
<div class="libContent" style="display:block"><a href="#"><img src="http://www.starzglobal.com/images/featured/pkj.jpg" title="Painkiller Jane" alt="" width="216" height="103"></a></div>
<div class="libContent"><a href="#"><img src="http://www.starzglobal.com/images/featured/moh.jpg" title="Masters of Horror" alt="" width="216" height="103"></a></div>
<div class="libContent"><a href="#"><img src="http://www.starzglobal.com/images/featured/pd.jpg" title="Party Down" alt="" width="216" height="103"></a></div>
</div> 
</div>


<div class="bottomWrapper">
<div id="lib_button">
<a class="lib_button1" rel="1" title="Painkiller Jane" href="#">x</a>
<a class="lib_button2" rel="2" title="Masters of Horror" href="#">y</a>
<a class="lib_button3" rel="3" title="Party Down" href="#">z</a>
</div>
</div>
</div>
                                  
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
please provide a link to your page
0
 
hieloCommented:
assuming that #button is what causes this to begin playin, try adding:

$('#button').trigger('click');
OR
$('#button a').trigger('click');

on line 26 of your posted code.
0
 
gvilla23Author Commented:
Here is the complete code

<html><head>
     
    <style>
    #spotSlide {
	width:216px;
	overflow:hidden;
	position: relative;
	height:110px;
	margin-bottom:4px
}
	#spotSlide .spotCover{
		width:1080px; /*------- class spotContent width * number of spotContent divs (216 * 3 )---------- */
		position: absolute;
		height:216px;
	}
	#spotSlide .spotContent {
	width:216px;
	float:left;
	margin-top: 6px;
}
	.button1,.button2,.button3,.button4,.button5{
	background:#fdb14e;
	padding:4px;
	display:block;
	float:left;
	margin-left: 5px;
}
.bottomWrapper {
	width: 216px;
}
#button {
	float: left;
}
#titleTxt {
	float: right;
}


#libSlide {
	width:216px;
	overflow:hidden;
	position: relative;
	height:110px;
	margin-bottom:4px
}
	#libSlide .libCover{
		width:1080px; /*------- class libContent width * number of libContent divs (216 * 3 = 480)---------- */
		position: absolute;
		height:216px;
	}
#libSlide .libContent {
	width:216px;
	float:left;
	margin-top: 6px;
}

.lib_button1,.lib_button2,.lib_button3,.lib_button4{
	background:#fdb14e;
	padding:4px;
	display:block;
	float:left;
	margin-left: 5px;
}

.bottomWrapper {
	width: 216px;
}

#lib_button {
	float: left;
}

#libtitleTxt {
	float: right;
}

#temp {
	position: absolute;
	top: 240px;
}

.active{
	background:#f2f4e1;
	padding:4px;
	display:block;
	float:left;
	outline:none;
}

    </style>
  
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" >
	    
	// JavaScript Document
$(document).ready(function (){
	$('#button a').click(function(){
		var integer = $(this).attr('rel');
		var cap= $(this).attr('title');
		$('#spotSlide .spotCover').css({left:-216*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div spotContent (here 216) ------ */
		$('#button a').each(function(){
		$(this).removeClass('active');
			if($(this).hasClass('button'+integer)){å
				$(this).addClass('active')}
		});
		$('#titleTxt').html(cap);
	});
	$('#lib_button a').click(function(){
		var integer = $(this).attr('rel');
		var cap= $(this).attr('title');
		$('#libSlide .libCover').css({left:-216*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div libContent (here 216) ------ */
		$('#lib_button a').each(function(){
		$(this).removeClass('active');
			if($(this).hasClass('lib_button'+integer)){
				$(this).addClass('active')}
		});
		//$('libtitleText').text(cap);
		$('#libtitleTxt').html(cap);
	});
	
});    
	    
   </script>
    
</head>

<body>

<div id="wrap">
  
<div class="featureBoxEnd" id="library">LIBRARY
<div id="libSlide">
<div class="libCover" style="left: -216px; display: block; ">
<div class="libContent"><a href="title.php?title=painkillerjane"><img src="http://www.starzglobal.com/images/featured/pkj.jpg" title="Painkiller Jane" alt="Painkiller Jane" width="216" height="103"></a></div>
<div class="libContent"><a href="title.php?title=mastersofhorror"><img src="http://www.starzglobal.com/images/featured/moh.jpg" title="Masters of Horror" alt="Masters of Horror" width="216" height="103"></a></div>
<div class="libContent"><a href="title.php?title=partydown"><img src="http://www.starzglobal.com/images/featured/pd.jpg" title="Party Down" alt="Party Down" width="216" height="103"></a></div>
<div class="libContent"><a href="title.php?title=megafault"><img src="http://www.starzglobal.com/images/featured/megafault.jpg" title="Megafault" alt="Megafault" width="216" height="103"></a></div>


</div> </div>


<div class="bottomWrapper">
<div id="lib_button">

<a class="lib_button1" rel="1" title="Painkiller Jane" href="#"></a>
<a class="lib_button2 active" rel="2" title="Masters of Horror" href="#"></a>
<a class="lib_button3" rel="3" title="Party Down" href="#"></a>
<a class="lib_button4" rel="4" title="Megafault" href="#"></a>
<!--  <a class="lib_button1 active" rel="1" title='Painkiller Jane'  href="#"></a>
<a class="lib_button2" rel="2"  title='Masters of Horror' href="#"></a>
<a class="lib_button3" rel="3"  title='Party Down' href="#"></a> 
<a class="lib_button4" rel="4"  title='Megafault' href="#"></a>  --> 

</div>
<!-- end of div button-->
<div class="featuredCaption" id="libtitleTxt">Masters of Horror</div>
</div>
</div>
</div>

</body></html>

Open in new window

0
 
hieloCommented:
Try:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" >
	 var DELAY=3000;//delay in seconds between transitions

	 var timer=null;//do not touch this

	// JavaScript Document
$(document).ready(function (){
	$('#button a').click(function(){
		var integer = $(this).attr('rel');
		var cap= $(this).attr('title');
		$('#spotSlide .spotCover').css({left:-216*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div spotContent (here 216) ------ */
		$('#button a').each(function(){
		$(this).removeClass('active');
			if($(this).hasClass('button'+integer)){
				$(this).addClass('active')}
		});
		$('#titleTxt').html(cap);
	});
	$('#lib_button a').click(function(){
		var integer = $(this).attr('rel');
		var cap= $(this).attr('title');
		$('#libSlide .libCover').css({left:-216*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div libContent (here 216) ------ */
		$('#lib_button a').each(function(){
			$(this).removeClass('active');
			if($(this).hasClass('lib_button'+integer)){
				$(this).addClass('active')
			}
		});
		//$('libtitleText').text(cap);
		$('#libtitleTxt').html(cap);
		loop(DELAY);
	});
	$('.libContent a').on('mouseover','img',function(){
		clearTimeout(timer);
	}).on('mouseout','img',function(){
		loop(DELAY);
	});
	
	loop(DELAY);
});

function loop(delay){
		timer=setTimeout(function(){
			if($('a.active','#lib_button').next().size())
			{
				$('a.active','#lib_button').next().trigger('click');
			}
			else
			{
				$('a.active','#lib_button').removeClass('active');
				$('a:eq(0)','#lib_button').addClass('active').trigger('click');
			}
		},delay);

}	    
   </script>

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.

All Courses

From novice to tech pro — start learning today.