ok. thanks.
ok. thanks.
Put this code in the head of the page after the external tag for jQuery:
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.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>
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:
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.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>
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 10: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
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 08:44 PM. Reason: Format
You took away the styles:
I never told you to take away those styles. If you put them back things will work much better.Code:<div class="slider2"style="position: absolute; visibility: hidden;"
>
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 08:56 PM. Reason: add last line
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
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/
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
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 itwith 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 04:41 AM. Reason: merge posts
You can make any script external in the usual manner.
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:
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:<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>
Upload that new file (sliderswitch.js) to the same folder as the page. On the page where the script is, replace it with: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); });
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).Code:<script type="text/javascript" src="sliderswitch.js"></script>
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
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
++can i change the time of occurrence of entry? now takes about 8 sec./entry. i want it to 4-5 maybeI 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,
Last edited by jscheuer1; 02-20-2013 at 06:42 AM. Reason: Format
In that case, use:
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.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>
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
Bookmarks