?
Solved

jquery next slide auto play

Posted on 2012-09-18
7
Medium Priority
?
285 Views
Last Modified: 2013-11-29
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

0
Comment
Question by:gvilla23
5 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 38411169
please provide a link to your page
0
 
LVL 82

Expert Comment

by:hielo
ID: 38411182
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
 

Author Comment

by:gvilla23
ID: 38411548
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
 
LVL 82

Expert Comment

by:hielo
ID: 38411811
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
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38412543
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses
Course of the Month15 days, 11 hours left to enroll

850 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