Animating from one image to another

Hello,

I am trying to figure out if it's possible to have an image fade to a completely different image? The gallery sections that are provided do not appear to offer this functionality. Furthermore, not only would I like the image changed, but the underlying text fade to a new set of text.

Thanks!

Hi. If you share link to your site, we can give some code to achieve this

Many thanks @tuanphan,

https://eagle-frog-8r4w.squarespace.com/

Will be on standby if you need more information

13 hours ago, BGCTechSupport said:

Many thanks @tuanphan,

https://eagle-frog-8r4w.squarespace.com/

Will be on standby if you need more information

You mean Our Partners slide?

On 7/18/2022 at 11:31 PM, tuanphan said:

You mean Our Partners slide?

The main home page, specifically the section "Responsible Gaming Tips". Right now, we have a manual slider that changes the photos and underlining text. I hope this helps!

20 hours ago, BGCTechSupport said:

The main home page, specifically the section "Responsible Gaming Tips". Right now, we have a manual slider that changes the photos and underlining text. I hope this helps!

Try adding to Design > Custom CSS

.user-items-list-item-container[data-section-id="62bc3d7438653525db6f4014"] {
li {
    pointer-events: initial !important;
}
li:nth-child(1):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/04/19/09/08/flowers-7142409__480.jpg);
}
li:nth-child(2):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/06/21/07/35/poppy-7275283__340.jpg);
}
li:nth-child(3):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/07/04/04/37/musician-7300353__340.jpg);
}}

On 7/23/2022 at 5:03 AM, tuanphan said:

Try adding to Design > Custom CSS

.user-items-list-item-container[data-section-id="62bc3d7438653525db6f4014"] {
li {
    pointer-events: initial !important;
}
li:nth-child(1):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/04/19/09/08/flowers-7142409__480.jpg);
}
li:nth-child(2):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/06/21/07/35/poppy-7275283__340.jpg);
}
li:nth-child(3):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/07/04/04/37/musician-7300353__340.jpg);
}}

 

Thank you for this. Is there a way to have the photos change automatically, without the mouse hovering over to change the photo?

20 hours ago, BGCTechSupport said:

Thank you for this. Is there a way to have the photos change automatically, without the mouse hovering over to change the photo?

You mean make list scroll automatic, or make image auto change after X seconds?

On 7/26/2022 at 5:53 AM, tuanphan said:

You mean make list scroll automatic, or make image auto change after X seconds?

Hi there, we would like the images to automatically change after "X" seconds, including the text under the images to change after "X" seconds, to be in line with images. I hope this helps!

Hi @tuanphan, may you advise of the above when you have a moment? I greatly appreciate your support!

On 8/5/2022 at 11:25 PM, BGCTechSupport said:

Hi there, we would like the images to automatically change after "X" seconds, including the text under the images to change after "X" seconds, to be in line with images. I hope this helps!

Like this effect? 

https://codepen.io/milepaor/details/QvRLoK

On 8/19/2022 at 11:59 PM, tuanphan said:

Like this effect? 

https://codepen.io/milepaor/details/QvRLoK

Hi, yes like this, with a fade-in animation and text below that changes with the image.

Hi @tuanphan, may you advise of the above when you have a moment? I greatly appreciate your support!

I thought you can add Gallery Section or Gallery Block or List Section 

Then we can give the code to make it autoplay.

The effect is quite similar, not quite 100% the same, but I think it's the easiest way.

What do you think?

On 9/2/2022 at 9:22 PM, tuanphan said:

I thought you can add Gallery Section or Gallery Block or List Section 

Then we can give the code to make it autoplay.

The effect is quite similar, not quite 100% the same, but I think it's the easiest way.

What do you think?

Hi tuanphan,

The section is currently set as a gallery so i think we should be able to do this. If you can have a look at the site again www.bgc.bm and take a look for code that would be great.

On 9/30/2022 at 11:58 PM, BGCTechSupport said:

Hi tuanphan,

The section is currently set as a gallery so i think we should be able to do this. If you can have a look at the site again www.bgc.bm and take a look for code that would be great.

Hi,

This slide?

Hi any update on this? 

I would also like to make a image fade in swap with 2 images on my first page. 

All the best, 

Tony

On 10/3/2022 at 1:49 PM, tonton said:

Hi any update on this? 

I would also like to make a image fade in swap with 2 images on my first page. 

All the best, 

Tony

Add a Code Block > Paste this code

<div id="slideshow">
  <img src="https://cdn.pixabay.com/photo/2022/09/07/21/23/ferris-wheel-7439636__480.jpg" alt="" />
  <img src="https://cdn.pixabay.com/photo/2022/08/01/12/36/city-7358078__480.jpg" alt="" />
  <img src="http://baby-animals.net/wp-content/gallery/baby-puma-wallpapers/Cute-puma-wallpapers.jpg" alt="" />
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBcJWt4VyAyNSNww1F3LOs0dz0pQMr5bN12mh7m3n6zVRsk-wL" alt="" />
  <img src="https://s-media-cache-ak0.pinimg.com/originals/59/13/8b/59138bd0deee528b08b23293a09cfab3.jpg" alt="" />
  <img src="http://static.igre123.com/slike/172542-338241/mucka.jpg" alt="" />
</div>
<style>
#slideshow img{
  width: 500px;
  height: 300px;
}
#slideshow{
  border: 3px solid black;
  display: inline-block;
  
}
</style>
<script>
  var slideShow = function(container) {
    this.images = [];//public var
    this.curImage = 0; 
    for (i = 0; i < container.childElementCount; i++) {
        this.images.push(container.children[i]);
        this.images[i].style.display = "none";
    }
    
    // Handle going to to the next slide
    var nextSlide = function() {
        for (var i = 0; i < this.images.length; i++) {
            this.images[i].style.display = "none";
        }
        this.images[this.curImage].style.display = "block";
        this.curImage++;
        if (this.curImage >= this.images.length) {
            this.curImage = 0;
        }
        window.setTimeout(nextSlide.bind(this), 5000);
    };
    
    nextSlide.call(this);
};
var slike = document.getElementById("slideshow");
slideShow(slike);
</script>

Hey thanks for getting back to me tuanphan  I will try this! 

//Tony