DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets Manager

Snippets has posted 5883 posts at DZone. View Full User Profile

Miniature Slideshow For DIVs Using Scriptaculous

01.05.2006

| 119050 views |

<div id="slideshow1" class="slide"><div>frame 1</div></div>
<div id="slideshow2" class="slide" style="display: none"><div>frame 2</div></div>
<div id="slideshow3" class="slide" style="display: none"><div>frame 3</div></div>
<div id="slideshow4" class="slide" style="display: none"><div>frame 4</div></div>

<script type="text/javascript">
    
    start_slideshow(1, 4, 2000);
    
    function start_slideshow(start_frame, end_frame, delay) {
        setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
    }
                            
    function switch_slides(frame, start_frame, end_frame, delay) {
        return (function() {
            Effect.Fade('slideshow' + frame);
            if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
            setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
            setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
        })
    }

</script>

Tags:

Comments

Snippets Manager replied on Wed, 2010/03/31 - 10:44am

Hi! I just installed this script and it works great. I only have a couple of questions : 1. which part of the script defines the time between slides? 2. which part of the script defines the time the slide stays up? and - 3. how do I make it stop on slide 4? Right now it just loops... Thank you so much!

Snippets Manager replied on Fri, 2010/01/29 - 12:56am

^^ about the http://www.blueacorn.com/... Can anyone also give me the code for the slideshow on the site? Thanks.

Snippets Manager replied on Fri, 2010/01/29 - 12:56am

Hello, I'm new with using div and scripts. I've tried getting the code of the slideshow from http://www.northpoint.org/ but it wont work. I think I missed something. Can anyone here help me? Here's the code that I get from the site :




North Point Community Church :: Home


div#slidescontainer {
	height:225px;
	width:450px;
	position:relative;
	padding-bottom:20px;
}

div#slideshow {
	height:225px;
	z-index:10;
	text-align:center;
	width:450px;
	margin-left:auto;
	margin-right:auto;
overflow: hidden;
position: relative;
}


div#slideshow a {
  left: 0px;
  width: 450px !important;
  height: 225px !important;
overflow: hidden;
}

img#next {
	position:absolute;
	bottom:30px;
	left:430px;
	z-index:50;
	cursor:pointer;
}

img#prev {
	position:absolute;
	bottom:30px;
	left:6px;
	z-index:50;
	cursor:pointer;
}







$(document).ready(function() {



    $("#tabs").tabs( { event: 'click'} );

$(".tab a").hoverIntent(function(){$(this).click();}, function()
{});

  
    /* Slideshow Initialization */
    $("#slideshow").cycle({ 
 	    fx: 'fade', 
	    speed: 300, 
	    timeout: 7000, 
	    next: '#next', 
	    prev: '#prev',
	    pause: 1 
    });	  

$('#qlTextLink').click(function() {
        $('#callout').hide();
        $('#quicklinks').slideToggle();
        $('#qlButton').css('background-color','#3A6F8F');
        $.cookie('quicklinks_close','true', {expires: 1, path: '/'});
        pageTracker._trackEvent('Quick_Links', 'Click');
    });	 

});

Got the top script, below from http://www.northpoint.org/styles/home http://www.blueacorn.com/

Snippets Manager replied on Sun, 2009/04/26 - 6:05pm

Thanks for the code sample - we're developing a "slideshow" type functionality for a homepage that already uses scriptaculous/prototytpe - even though it seems better/easier with mootools. But this code seems to work just fine - thanks! eCommerce Consulting

Lucy0422 Lucy replied on Wed, 2009/03/18 - 1:46am

wholesale jewelry handmade jewelry jewelry wholesale costume jewelry wholesale costume jewelry wholesale fashion jewelry wholesale pearl wholesale crystal discount jewelry cheap jewelry wholesale gemstone wholesale swarovski

Snippets Manager replied on Mon, 2009/01/12 - 7:14pm

The flicker you see is the div that will be replaced disappearing and the new div getting put in it's place appearing. There is time in between those two events where there is no div being displayed so the browser thinks there's nothing there and adjusts accordingly. The wrapper div will maintain that space throughout the replacement process and keep the flicker from happening. - acne skin

Snippets Manager replied on Wed, 2008/06/25 - 4:33pm

Thank You! This worked perfect. Thanks for the work. The only other thing I would love is a list on the top or right that let users click back to a certain frame and stop the slideshow. Here is my example Hubbell Homes

Snippets Manager replied on Mon, 2007/09/17 - 5:33am

Thanks bro...you read my mind!

Snippets Manager replied on Wed, 2007/07/25 - 5:51am

Hi Marc.gzr, If you wrap all of you slideshowX divs inside of a wrapper div that has the same width and height as the images (or even a little bigger) then you won't get the flicker. The flicker you see is the div that will be replaced disappearing and the new div getting put in it's place appearing. There is time in between those two events where there is no div being displayed so the browser thinks there's nothing there and adjusts accordingly. The wrapper div will maintain that space throughout the replacement process and keep the flicker from happening. Thanks for the snippet peter!

Snippets Manager replied on Fri, 2006/12/08 - 10:56pm

Please help! My site is - www.gamezrule.org - and I use this code. But, this code makes my middle column 'flicker' or 'stutter'. Please help me. The code I use is:







    
    start_slideshow(1, 5, 2000);
    
    function start_slideshow(start_frame, end_frame, delay) {
        setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
    }
                            
    function switch_slides(frame, start_frame, end_frame, delay) {
        return (function() {
            Effect.Fade('slideshow' + frame);
            if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
            setTimeout("Effect.Appear('slideshow" + frame + "');", 950);
            setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 950);
        })
    }