Advanced Search

Page 3 of 4 FirstFirst 1234 LastLast
Results 21 to 30 of 40

Thread: slideshow fade out/fade in

  1. #21
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    ok. thanks.

  2. #22
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,130 Times in 3,096 Posts
    Blog Entries
    12

    Default

    Put this code in the head of the page after the external tag for jQuery:

    Code:
    <script type="text/javascript">
    jQuery(window).load(function(){
    	var $ = jQuery, secs = 28, $slider1 = $('.slider'), $slider2 = $('.slider2'), $stored1 = $('<div></div>'),
    		$firstset = $('.slider .slider-item-small'), $wrap = $('<div></div>'), shownum = 0, functions = [
    			function(){ // #0
    				$slider1.children().appendTo($stored1);
    				$slider1.append($slider2.children());
    				functions[3]();
    			},
    			function(){ // #1
    				$slider1.children().appendTo($slider2);
    				$stored1.children().appendTo($slider1);
    				functions[3]();
    			},
    			function(){ // #2
    				$slider1.animate({opacity: 1}, 550);
    				shownum = (++shownum) % 2;
    				setTimeout(switchsliders, secs * 1000);
    			},
    			function(){ // #3
    				steps = 0;
    				$slider1.css({opacity: 0});
    				$parent.slideDown({duration: 800, step: functions[4], complete: functions[2]});
    			},
    			function(){ // #4
    				++steps === 2 && $slider1.find('.slider-item-small').eq(0).trigger('mouseenter');
    				$slider1.css({opacity: ($parent.height() / parentheight) * 0.55});
    			},
    			function(){ // #5
    				$slider1.css({opacity: ($parent.height() / parentheight) * 0.7});
    			}
    		], $parent = $slider1.parent(), parentheight = $parent.height(), steps, begintimer;
    	$parent.wrap($wrap.css({height: $parent.outerHeight(), width: $parent.outerWidth()}));
    	$('.slider2 .slider-item-small').each(function(i, el){
    		el.style.top = $firstset.eq(i).css('top');
    	});
    	function switchsliders(){
    		$parent.slideUp({duration: 800, step: functions[5], complete: function(){setTimeout(functions[shownum], 200);}});
    	}
    	begintimer = setInterval(function(){
    		if($slider1.children().eq(3).hasClass('slider-item-active')){
    			clearInterval(begintimer);
    			setTimeout(switchsliders, 6000);
    		}
    	}, 20);
    });
    </script>
    Unfortunately it won't be easy to separate sliding up and down from fading in and out because in order to get them to work together, opacity changes had to be part of each step of the sliding up and down process.

    I did make an earlier version that only fades in and out. It would need a little tweaking perhaps as a result of what I've learned combining that with the sliding, but here is the fade only version:

    Code:
    <script type="text/javascript">
    jQuery(window).load(function(){
    	var $ = jQuery, secs = 30, $slider1 = $('.slider'), $slider2 = $('.slider2'), $stored1 = $('<div></div>'),
    		$firstset = $('.slider .slider-item-small'), shownum = 0, total = 2, functions = [
    			function(){
    				$slider1.children().appendTo($stored1);
    				$slider1.append($('.slider2').children());
    				$slider1.find('.slider-item-small').eq(0).trigger('mouseenter');
    			},
    			function(){
    				$slider1.children().appendTo('.slider2');
    				$stored1.children().appendTo($slider1);
    				$slider1.find('.slider-item-small').eq(0).trigger('mouseenter');
    			},
    			function(){
    				shownum = (++shownum) % 2;
    				setTimeout(switchsliders, secs * 1000);
    			}
    		];
    	$('.slider2 .slider-item-small').each(function(i, el){
    		el.style.top = $firstset.eq(i).css('top');
    	});
    	function switchsliders(){
    		$slider1.animate({opacity: 0}, 'slow', functions[shownum])
    			.delay(500).animate({opacity: 1}, 'slow', functions[2]);
    	}
    	setTimeout(switchsliders, secs * 1000);
    });
    </script>
    One thing I added in the combined version is that instead of waiting for the configured seconds (secs variable) to start, it listens to the first slider to see when it has reached the last slide. I'm not sure if this will be better or worse than waiting for the configured secs before beginning. In most cases it will be better. It all depends upon where the slider is when the page signals that it has loaded. It has a 3 in 4, a 75% chance of being in a good spot with the listener, only 25% with the configured timer. In either approach, once the first change has passed, it goes over to the configured timer, which I made a little longer to allow people to see the last slide for more than a second before it switches back to the other slider.

    Any questions about any of this, let me know.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    Last edited by jscheuer1; 02-18-2013 at 09:11 PM. Reason: fix typo in second code block
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #23
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    i put first code here : animationddd.ucoz.net/
    and i make another site. and i put second code : tpm.ucoz.net/

    i like first...with slide effects..but the entries of the second slide are behind of entries from first slide
    if you can bring the entries from first slide when it's playing...over second slide...and set position..


    if you think that slide effect don't work with sliders, you can remove it, or change with fade
    Last edited by jscheuer1; 02-18-2013 at 07:44 PM. Reason: Format

  4. #24
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,130 Times in 3,096 Posts
    Blog Entries
    12

    Default

    You took away the styles:

    Code:
    <div class="slider2" style="position: absolute; visibility: hidden;">
    I never told you to take away those styles. If you put them back things will work much better.

    I'm also thinking that document ready might work better than window load. Let's get it working right first before experimenting.
    Last edited by jscheuer1; 02-18-2013 at 07:56 PM. Reason: add last line
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #25
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    i try with it..but second slider don't show. I thought that's the problem and i try without it.
    now i see that at animationddd.ucoz.net/ that the first code with slide works! .. I can't figure out why it works now
    but second code don't working - tpm.ucoz.net/

  6. #26
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,130 Times in 3,096 Posts
    Blog Entries
    12

    Default

    I left out a trailing }); from the second script. I just went back and fixed it.

    Here's a version of the first one that uses document ready. It might be better because it should detect the first loop of the first slider even when the page takes a while to load as sometimes happens I noticed when working on it. However, other information it might need might not be available yet. It's worth a try:

    Code:
    <script type="text/javascript">
    jQuery(function($){ // document ready
    	var secs = 28, $slider1 = $('.slider'), $slider2 = $('.slider2'), $stored1 = $('<div></div>'),
    		$firstset = $('.slider .slider-item-small'), $wrap = $('<div></div>'), shownum = 0, functions = [
    			function(){ // #0
    				$slider1.children().appendTo($stored1);
    				$slider1.append($slider2.children());
    				functions[3]();
    			},
    			function(){ // #1
    				$slider1.children().appendTo($slider2);
    				$stored1.children().appendTo($slider1);
    				functions[3]();
    			},
    			function(){ // #2
    				$slider1.animate({opacity: 1}, 550);
    				shownum = (++shownum) % 2;
    				setTimeout(switchsliders, secs * 1000);
    			},
    			function(){ // #3
    				steps = 0;
    				$slider1.css({opacity: 0});
    				$parent.slideDown({duration: 800, step: functions[4], complete: functions[2]});
    			},
    			function(){ // #4
    				++steps === 2 && $slider1.find('.slider-item-small').eq(0).trigger('mouseenter');
    				$slider1.css({opacity: ($parent.height() / parentheight) * 0.55});
    			},
    			function(){ // #5
    				$slider1.css({opacity: ($parent.height() / parentheight) * 0.7});
    			}
    		], $parent = $slider1.parent(), parentheight = $parent.height(), steps, begintimer;
    	$parent.wrap($wrap.css({height: $parent.outerHeight(), width: $parent.outerWidth()}));
    	$('.slider2 .slider-item-small').each(function(i, el){
    		el.style.top = $firstset.eq(i).css('top');
    	});
    	function switchsliders(){
    		$parent.slideUp({duration: 800, step: functions[5], complete: function(){setTimeout(functions[shownum], 200);}});
    	}
    	begintimer = setInterval(function(){
    		if($slider1.children().eq(3).hasClass('slider-item-active')){
    			clearInterval(begintimer);
    			setTimeout(switchsliders, 6000);
    		}
    	}, 20);
    });
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #27
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    thankyou! i have a question: it's possible to hide that script form you? and no one can see it from source from example

    the last code that you give it to me move position of entries from slider 2
    animationddd.ucoz.net/

    I'll use the second code. i like it with that fade effect. thankyou for all help.
    if it's possible to hide that script from source page..it's great!
    Last edited by jscheuer1; 02-19-2013 at 03:41 AM. Reason: merge posts

  8. #28
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,130 Times in 3,096 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by kpk1l View Post
    thankyou! i have a question: it's possible to hide that script form you? and no one can see it from source from example
    You can make any script external in the usual manner.

    Quote Originally Posted by kpk1l View Post
    the last code that you give it to me move position of entries from slider 2
    animationddd.ucoz.net/
    I see that. I was worried something like that might happen, but I like the way it responds to the slider when it reaches the end of the first set of slides the first time regardless of how long it takes to load the page. Try this variation:

    Code:
    <script type="text/javascript">
    jQuery(function($){ // document ready
    	var secs = 28, $slider1 = $('.slider'), $slider2 = $('.slider2'), $stored1 = $('<div></div>'),
    		$firstset = $('.slider .slider-item-small'), $wrap = $('<div></div>'), shownum = 0, functions = [
    			function(){ // #0
    				$slider1.children().appendTo($stored1);
    				$slider1.append($slider2.children());
    				functions[3]();
    			},
    			function(){ // #1
    				$slider1.children().appendTo($slider2);
    				$stored1.children().appendTo($slider1);
    				functions[3]();
    			},
    			function(){ // #2
    				$slider1.animate({opacity: 1}, 550);
    				shownum = (++shownum) % 2;
    				setTimeout(switchsliders, secs * 1000);
    			},
    			function(){ // #3
    				steps = 0;
    				$slider1.css({opacity: 0});
    				$parent.slideDown({duration: 800, step: functions[4], complete: functions[2]});
    			},
    			function(){ // #4
    				++steps === 2 && $slider1.find('.slider-item-small').eq(0).trigger('mouseenter');
    				$slider1.css({opacity: ($parent.height() / parentheight) * 0.55});
    			},
    			function(){ // #5
    				$slider1.css({opacity: ($parent.height() / parentheight) * 0.7});
    			}
    		], $parent = $slider1.parent(), parentheight, steps, begintimer;
    	function switchsliders(){
    		$parent.slideUp({duration: 800, step: functions[5], complete: function(){setTimeout(functions[shownum], 200);}});
    	}
    	begintimer = setInterval(function(){
    		if($slider1.children().eq(3).hasClass('slider-item-active')){
    			clearInterval(begintimer);
    			parentheight = $parent.height();
    			$parent.wrap($wrap.css({height: $parent.outerHeight(), width: $parent.outerWidth()}));
    			$('.slider2 .slider-item-small').each(function(i, el){
    				el.style.top = $firstset.eq(i).css('top');
    			});
    			setTimeout(switchsliders, 6000);
    		}
    	}, 20);
    });
    </script>
    Quote Originally Posted by kpk1l View Post
    I'll use the second code. i like it with that fade effect. thankyou for all help.
    if it's possible to hide that script from source page..it's great!
    Like I said above, you can make any script external in the usual manner, if that's what you mean. Just take the code of the script without the script tags. Using a text only editor like NotePad, save that to a file. Call it something that will help you remember what it is, like for this it could be sliderswitch.js - save it as that. So, for the one you say you like, take only its code:

    Code:
    jQuery(window).load(function(){
    	var $ = jQuery, secs = 30, $slider1 = $('.slider'), $slider2 = $('.slider2'), $stored1 = $('<div></div>'),
    		$firstset = $('.slider .slider-item-small'), shownum = 0, total = 2, functions = [
    			function(){
    				$slider1.children().appendTo($stored1);
    				$slider1.append($('.slider2').children());
    				$slider1.find('.slider-item-small').eq(0).trigger('mouseenter');
    			},
    			function(){
    				$slider1.children().appendTo('.slider2');
    				$stored1.children().appendTo($slider1);
    				$slider1.find('.slider-item-small').eq(0).trigger('mouseenter');
    			},
    			function(){
    				shownum = (++shownum) % 2;
    				setTimeout(switchsliders, secs * 1000);
    			}
    		];
    	$('.slider2 .slider-item-small').each(function(i, el){
    		el.style.top = $firstset.eq(i).css('top');
    	});
    	function switchsliders(){
    		$slider1.animate({opacity: 0}, 'slow', functions[shownum])
    			.delay(500).animate({opacity: 1}, 'slow', functions[2]);
    	}
    	setTimeout(switchsliders, secs * 1000);
    });
    Upload that new file (sliderswitch.js) to the same folder as the page. On the page where the script is, replace it with:

    Code:
    <script type="text/javascript" src="sliderswitch.js"></script>
    That one can be improved though given what we are learning about the first one. Let me know how things work when you try the code at the top of this post. Depending upon how that goes, I will have an update for the one you say you like. I will either add just the timing mechanism for completion of the first set of slides, or that plus keying off of document ready, if the change at the top of this post fixes the positioning problem (or if it doesn't, if I can figure out some other way to fix that for document ready).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #29
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    first code that you give it to me , with slide effect, you can see it here: tpm.ucoz.net/--now it works
    and second code , with fade effect: nimationddd.ucoz.net/ --it looks great!
    i like it more. i like how you can see the fade effect from slider1 to slider2.

    thankyou very much and sorry that i will use only this fade effect, since you have worked hard at the first code with slide effect


    ++
    I will have an update for the one you say you like. I will either add just the timing mechanism for completion of the first set of slides,
    can i change the time of occurrence of entry? now takes about 8 sec./entry. i want it to 4-5 maybe
    Last edited by jscheuer1; 02-20-2013 at 05:42 AM. Reason: Format

  10. #30
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,130 Times in 3,096 Posts
    Blog Entries
    12

    Default

    In that case, use:

    Code:
    <script type="text/javascript">
    // Custom Switch Slider Script (c)2013 John Davenport Scheuer
    // as first seen in http://www.dynamicdrive.com/forums/
    // username: jscheuer1 - This Notice Must Remain for Legal Use
    jQuery(function($){
    	var secs = 30, $slider1 = $('.slider'), $slider2 = $('.slider2'), $stored1 = $('<div></div>'),
    		$firstset = $('.slider .slider-item-small'), shownum = 0, begintimer, functions = [
    			function(){
    				$slider1.children().appendTo($stored1);
    				$slider1.append($('.slider2').children());
    				$slider1.find('.slider-item-small').eq(0).trigger('mouseenter');
    			},
    			function(){
    				$slider1.children().appendTo('.slider2');
    				$stored1.children().appendTo($slider1);
    				$slider1.find('.slider-item-small').eq(0).trigger('mouseenter');
    			},
    			function(){
    				shownum = (++shownum) % 2;
    				setTimeout(switchsliders, secs * 1000);
    			}
    		];
    	function switchsliders(){
    		$slider1.animate({opacity: 0}, 'slow', functions[shownum])
    			.delay(500).animate({opacity: 1}, 'slow', functions[2]);
    	}
    	begintimer = setInterval(function(){
    		if($slider1.children().eq(3).hasClass('slider-item-active')){
    			clearInterval(begintimer);
    			$('.slider2 .slider-item-small').each(function(i, el){
    				el.style.top = $firstset.eq(i).css('top');
    			});
    			setTimeout(switchsliders, 6000);
    		}
    	}, 20);
    });
    </script>
    Please keep the credit notice. You can still make it external if you want to hide it, I can even minify it for you if you like. That won't save many bytes, but will make it harder to copy.

    The sliding one fades, it's just a little harder to notice because it's also sliding as it's fading. But you can notice it. You would also notice if it didn't fade. On the page you're using it on now, there's a gray background that shows through when it slides. That color can be changed.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Ultimate Fade-in Slideshow -- Fade Duration and Pause
    By ellenjones6 in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-21-2014, 04:18 PM
  2. Ultimate Fade-in slideshow - STOP FADE IN ON FIRST IMAGE
    By trillodigital in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-10-2011, 12:18 PM
  3. Replies: 3
    Last Post: 07-12-2010, 04:04 PM
  4. Ultimate Fade in Slideshow - how to require FIRST image to fade in?
    By charmedworks in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-17-2008, 07:12 PM
  5. Change fade time in Ultimate Fade In slideshow
    By Zaphodz in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-17-2006, 12:08 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •