CODEWITHSUNDEEP
javascripthtmlcssimagegallery
Sami Leier
Sami Leier

Reputation: 61

Automatic clickable image gallery using jQuery, first image fades in/out but the others don't fade in?

I have a gallery of sponsor logos that are set to fade into the next image every 4 seconds, made using jQuery and CSS. The problem is that these images must link to the appropriate webpage when clicked. The code works completely fine when the image tags are NOT in link tags, but as soon as you add a link around the image, the first image fades in, fades out after 4 seconds, and then the next image never fades in, so the whole section basically diappears. Is there a way around this?

jQuery code:

$(function () {
        $('.fadein img:gt(0)').hide();
        setInterval(function () {
            $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
        }, 4000);
});

CSS code:

.img {
position: absolute;
width: 20%;
margin-left: 40%;
}
.fadein {
position: relative;
}
.fadein img {
    top: 0;
}

HTML code:

<div class="fadein">
    <a href="https://google.com/"><img class="img" alt="" src="ex1"/></a>
        <a href="https://google.com/"><img class="img" alt="" src="ex2"/></a>
        <a href="https://google.com/"><img class="img" alt="" src="ex3"/></a>
</div>

URL: http://example.samileier.com

Basically, I want the images to fade into one another every 4 or so seconds, but I also want them to be clickable links to other websites.

Upvotes: 0

Views: 31

Answers (1)

JAzelvandre
JAzelvandre

Reputation: 26

I think you need to focus on fading the 'a' tag instead of the 'img'. I slightly modified your code.

<script>
    $(function () {
        $('.fadein a:gt(0)').hide();
        setInterval(function () {
        $('.fadein a:first-child').fadeOut().next('a').fadeIn().end().appendTo('.fadein');
        }, 4000);
    });
</script>
<style>
    body {
        background-color: black;
    }
    .image-container {
        width: 20%;
        margin-left: 42%;
    }
    .fadein {
        position: relative;
    }
    .fadein a {
        display: block;
    }
    .fadein img {
        top: 0;
        position: absolute;
        width: 20%;
        margin-left: 40%;
    }
</style>

Upvotes: 1

Related Questions