Advanced Search

Return to Snippet

Revision: 62195
at February 7, 2013 05:15 by ibob
Initial Code 
<script type="text/javascript">// <![CDATA[
		var TotalImages = 4;
	    var CurrentImage = 1;
		var divPrefix = 'photo_';
	    var TimerHandler = null;
	    /*
	    	<div style="width:320px; height:200px;>
	    	    <div id="photo_1" style="position:absolute; display:block;">
	    	        <img src="blah1.jpg" border="0" />
	    	    </div>
	    	    <div id="photo_2" style="position:absolute; display:none;">
	    	        <img src="blah2.jpg" border="0" />
	    	    </div>
	    	    <div id="photo_3" style="position:absolute; display:none;">
	    	        <img src="blah3.jpg" border="0" />
	    	    </div>
	    	    <div id="photo_4" style="position:absolute; display:none;">
	    	        <img src="blah4.jpg" border="0" />
	    	    </div>
	    	 </div>
	    */
	    function TimerShowNextImage(){
			$("#"+divPrefix+CurrentImage).fadeOut(600);
			if(CurrentImage==TotalImages)
		    	CurrentImage = 1;
			else
		    	CurrentImage+=1;
		    $("#"+divPrefix+CurrentImage).fadeIn(600);
	    }
	    
	    function ShowNextImage(){
			clearInterval(TimerHandler);
			$("#"+divPrefix+CurrentImage).fadeOut(600);
			if(CurrentImage==TotalImages)
		    	CurrentImage = 1;
			else
		    	CurrentImage+=1;
			$("#"+divPrefix+ssCurrentImage).fadeIn(600);
			TimerHandler = setInterval(TimerShowNextImage, 4000);
	    }
	    function ShowPrevImage(){
			clearInterval(TimerHandler);
			$("#"+divPrefix+CurrentImage).fadeOut(600);
			if(CurrentImage==1)
		    	CurrentImage = 4;
			else
		    	CurrentImage-=1;
			$("#"+divPrefix+CurrentImage).fadeIn(600);
			TimerHandler = setInterval(TimerShowNextImage, 4000);
	    }
	    $(function() {
			$( "#leftbtndiv" ).click(function() {
		    	ShowPrevImage();
		    	return true;
			});
			$( "#rightbtndiv" ).click(function() {
		    	ShowNextImage();
		    	return true;
			});
	    });
	    $(document).ready(function() {
			$("#"+divPrefix+CurrentImage).fadeIn(10);
			TimerHandler = setInterval(TimerShowNextImage, 4000);
	    });
// ]]></script>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
JQuery Slideshow

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript