Fading slideshow with a couple of...

User 2823310 Photo


Registered User
312 posts

Since we can't make a fading slideshow in foundation try this.
Put a container in a column give it the class slide-container and make the position relative
ADD the ID slideshow to it
Put in that container say 4 pictures
ADD the class slide-div on each picture and make them max-width 100% (or whatever)
Then when you are ready make that slide-div class absolute in position
That will make them all be on top of each other,
make it static to change anything and then back to absolute

Put this script in the footer and preview...
<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
</script>

*POOF* slideshow
User 2699991 Photo


Registered User
5,397 posts
Online Now

Alter Eagle wrote:
Since we can't make a fading slideshow in foundation try this.
Put a container in a column give it the class slide-container and make the position relative
ADD the ID slideshow to it
Put in that container say 4 pictures
ADD the class slide-div on each picture and make them max-width 100% (or whatever)
Then when you are ready make that slide-div class absolute in position
That will make them all be on top of each other,
make it static to change anything and then back to absolute

Put this script in the footer and preview...
<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
</script>

*POOF* slideshow


Well B****r me if you haven't gone & done it again Brilliant so far will be playing with that one tomorrow
Hope everything ok now over there & the wild fires under control
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,397 posts
Online Now

Hi Alter Eagle
Found a little bit of time to play

Just out of curiosity, how would I get the transition fade between slides to slow down

I tried changing that 1000 figure to 3000 thinking that was the control for the speed, but it doesn't seem to have any effect
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2823310 Photo


Registered User
312 posts

That's one I found written by Jon Snooks that I used on another website program I used work at. Pretty cool how he got it to only a few lines of code.

Wayan, 1000 is the fade perimeters you can slow it down in this line
.appendTo('#slideshow');
}, 3000);

so try 3500 or 4000 until you get it where you like.

They aren't able to get all the fires under control, we haven't been evacuated yet but 2000 homes around us are gone. They are sending in fire bombers and crews from across the US so hopefully they'll be able to fight some of the larger ones back today? It's sad to see whole neighborhoods gone, we have a few survivors living with us until it's safe to go back.
User 2699991 Photo


Registered User
5,397 posts
Online Now

Alter Eagle wrote:
That's one I found written by Jon Snooks that I used on another website program I used work at. Pretty cool how he got it to only a few lines of code.

Wayan, 1000 is the fade perimeters you can slow it down in this line
.appendTo('#slideshow');
}, 3000);

so try 3500 or 4000 until you get it where you like.

They aren't able to get all the fires under control, we haven't been evacuated yet but 2000 homes around us are gone. They are sending in fire bombers and crews from across the US so hopefully they'll be able to fight some of the larger ones back today? It's sad to see whole neighborhoods gone, we have a few survivors living with us until it's safe to go back.


Hi Alter Eagle
I got the delay (slow down) cracked thank you
This is a wonderful easy little slider thing that can be done within RSD, I played with it a lot today and got some real nice thing going, the only thing that happens now is that you can't put it onto a page with anything else underneath it, because once it scrolls out of view, when the slider image changes it springs back into view for a brief moment, then disappears until the next slider comes. Ahh well back to the drawing board
but nice one anyway if it's just for on it's own on a page
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2823310 Photo


Registered User
312 posts

Okay I changed the script a bit and did an example
Now you can use it as many times as you like on a page
the instructions are on there how to add and style it
Temporary Fading Slideshow Link
Let me know if that is okay... if it is I'll put it on step by step with a download & stuff.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.