slideshow fade out/fade in

[kpk1l]

ok. thanks.

[jscheuer1]

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

<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:

<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.

[kpk1l]

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

[jscheuer1]

You took away the styles:

<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.

[kpk1l]

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/

[jscheuer1]

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:

<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>

[kpk1l]

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!

[jscheuer1]

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.

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:

<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>

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:

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:

<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).

[kpk1l]

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

[jscheuer1]

In that case, use:

<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.