CODEWITHSUNDEEP
javascriptimageslideshowfade
Plant Boy
Plant Boy

Reputation: 59

Javascript Fade Into New Image When Clicked

Right now I have a code to switch between two images when clicking text, but I'd like to create a function where I can click on the image itself and it fades into the next one, and be able to do this with more than two images. Also the images I want to use vary in width and height, but all have a max height and width of 600px. Here's my current code:

HTML:

<div id="cf2" class="shadow">
<img class="bottom" src="/images/Cirques.jpg" />
<img class="top" src="/images/Clown%20Fish.jpg" />
</div>
<p id="cf_onclick">Click me to toggle</p>

CSS:

#cf2 {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
}
#cf2 img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#cf2 img.transparent {
    opacity:0;
}
#cf_onclick {
    cursor:pointer;
}

JavaScript:

$(document).ready(function() {
    $("#cf_onclick").click(function() {
        $("#cf2 img.top").toggleClass("transparent");
    });
});

Upvotes: 0

Views: 2699

Answers (3)

guest271314
guest271314

Reputation: 1

Try adding #cf2 img to selector initiating click event 

$("#cf_onclick, #cf2 img")


$(document).ready(function() {
  
  var n = -1 
  , imgs = $("#cf2 img")
  , fx = function(i, el) {
      return (el || imgs.eq(i)).fadeToggle(1000);
    };
  
  $("#cf_onclick, #cf2 img").click(function() {

    if (n === (-imgs.length)) {
      fx(n);
      n = -1;
      fx(null, imgs);
    } else {
      fx(n);
      --n
    };
    
  });
  
});
#cf2 {
  position: relative;
  height: 281px;
  width: 450px;
  margin: 0 auto;
}
#cf2 img {
  position: absolute;
  left: 0;
}

#cf_onclick {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="cf2" class="shadow">
  <img class="bottom" src="http://lorempixel.com/400/400/cats" />
  <img class="top" src="http://lorempixel.com/400/400/technics" />
  <img class="top" src="http://lorempixel.com/400/400/nature" />
  <img class="top" src="http://lorempixel.com/400/400/animals" />
</div>
<p id="cf_onclick">Click me to toggle</p>

Upvotes: 2

Drazen Bjelovuk
Drazen Bjelovuk

Reputation: 5492

Something like this should do it:

$(document).ready(function() {
  $("#cf_onclick").click(function() {
    var current = $("#cf2 img.top").removeClass('top');

    var next = current.next();
    next = next.length ? next : current.siblings().first();
    next.addClass('top');
  });
});
#cf2 {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf2 img {
  position:absolute;
  left:0;
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf2 img.top {
  opacity: 1;
}

#cf_onclick {
  cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="cf_onclick">Click me to toggle</p>
<div id="cf2" class="shadow">
    <img src="http://icons.iconarchive.com/icons/google/chrome/256/Google-Chrome-icon.png" />
    <img class="top" src="http://icons.iconarchive.com/icons/kyo-tux/aeon/256/Apps-Safari-icon.png" />
</div>

Upvotes: 1

user4698813
user4698813

Reputation:

This will work for multiple images:

$(document).ready(function() {
    $.fn.nextOrFirst = function (selector) {
        var next = this.next(selector);
        return (next.length) ? next : this.prevAll(selector).last();
    };
    $("#cf2 img").click(function() {
        $(this)
        .removeClass('visible')
        .nextOrFirst()
        .addClass('visible');
    });
});
#cf2 {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
}
#cf2 img {
    position:absolute;
    left:0;
    max-height: 600px;
    max-width: 600px;
    opacity: 0;
    z-index: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#cf2 img.visible {
    opacity: 1;
    z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf2" class="shadow">
    <img class="visible" src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="1"/>
    <img src="http://economictimes.indiatimes.com/thumb/msid-45891755,width-640,resizemode-4/nasas-images-of-most-remarkable-events-you-cant-miss.jpg" alt="2"/>
    <img src="http://i.dailymail.co.uk/i/pix/2013/11/03/article-2486855-192ACC5200000578-958_964x682.jpg" alt="3"/>
    <img src="http://mstatic.mit.edu/nom150/items/199-HybridImage.jpg" alt="4"/>
</div>

Instead of having an .invisible class, I used a .visible class, which also has a z-index of 1, greater than that of the default images. So the image that has that class, will be visible, while the others will have opacity: 0 by default.

I also extended the jQuery object to have a nextOrFirst method (which I stole from here), so that when the visible image is the last one of the images in the stack, the next one will be the first. So now, the order of the images, as they appear, goes from top to bottom.

I decided to do it like this in order to keep your CSS transitions, but you can also use jQuery's fadeIn and fadeOut methods.

Upvotes: 1

Related Questions