Add a cross fade effect on an image gallery

Question

I have a smaller image which is of a control with 8 buttons, I have set up 8 area shapes so when what looks like a button is clicked the larger main image is updated.

When an area shape is clicked the relevant image loads, but I want the image to fade in and the old image to fade out.

Is this possible? Happy to explore Javascript and Jquery solutions. Thanks.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<script type="text/javascript">
function showImage(image){
  var mainImage = document.getElementById('mainImage');
  mainImage.src = image; 
}
</script>
</head>

<body>
<div><img src="button.jpg" width="260" height="193" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="61,21,120,55" href="#" onclick="showImage('A.jpg')"  />
<area shape="rect" coords="147,21,205,54" href="#" onclick="showImage('B.jpg')"  />
<area shape="rect" coords="60,58,121,90" href="#" onclick="showImage('C.jpg')"  />
<area shape="rect" coords="147,59,205,92" href="#" onclick="showImage('D.jpg')"  />
<area shape="rect" coords="61,92,121,125" href="#" onclick="showImage('E.jpg')"  />
<area shape="rect" coords="146,96,205,128" href="#" onclick="showImage('F.jpg')"  />
<area shape="rect" coords="60,128,122,163" href="#" onclick="showImage('G.jpg')"  />
<area shape="rect" coords="146,131,204,164" href="#" onclick="showImage('I.jpg')"  />
</map>
</div>
<div>
<img id="mainImage" src="A.jpg" /> 
</div>

</body>
</html>

Darren, I answered a similar question by you not too long ago (8 days) [here](http://stackoverflow.com/questions/16150060/gallery-with-thumbnails-that-update-a-main-image/16150390#16150390), you could have worked from that? — Bill, Apr 30 '13 at 13:26

score 1 · Answer 1 · edited Jan 29 '14 at 22:58

1

To do this you will need to create a new image and fade the old one out and the new one in.

This should work:

function showImage(image){
    var mainImage = document.getElementById('mainImage');
    $('#mainImage').before('<img src="' + image + '" id="newImage" />');
    $('#mainImage').fadeOut().remove();
    $('#newImage').attr('id','mainImage');
}

You should make sure with CSS that the new image is positioned behind the main one.

Source(s)

jQuery API - .append()
jQuery API - fading

edited Jan 29 '14 at 22:58

animuson

53,861
28
137
147

answered Apr 30 '13 at 13:16

Bill

3,478
23
42

2

To crossfade, you'll only need to fade in or fade out one of the two images, otherwise when both are at 50%, you'll see the background behind them. Once the fade transition is complete, you could then remove the original image. – zzzzBov Apr 30 '13 at 13:19
Just tried this but it didn't work. New image pops up at the top of the screen then they all start displaying. Will jsfiddle it. – Darren Riches Apr 30 '13 at 13:32
Still doesn't like it: http://jsfiddle.net/darrenriches/DYkbU/1/ - Think jsfiddle doesn't like the Area Shape have a URL in there, so it doesn't work at all. – Darren Riches Apr 30 '13 at 13:45
I also forgot to remove the original image (edited), but after that it seems to be working, but obviously there's no images; and it makes it hard to tell – Bill Apr 30 '13 at 13:48

score 1 · Accepted Answer · answered Apr 30 '13 at 13:44

I'd suggest having all the images on the page, positioned on top of each other. The below will add all the images linked to by the area to a container then crossfade when you click...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
    $('#Map area').each(function(){
        var area = $(this);
        var img = $('<img>').attr('src', area.attr('href'));
        $('#imgcontainer').append(img);
        area.click(function(){
            $('#imgcontainer img').stop().fadeOut();
            img.stop().fadeIn();
            return false;
        })
    });
    $('#imgcontainer img:first-child').show();
});
</script>
<style>
    #imgcontainer{width:260px;height:193px;}
    #imgcontainer img{display:none;position:absolute;}
</style>
<img src="button.jpg" width="260" height="193" border="0" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="rect" coords="61,21,120,55" href="A.img"  />
    <area shape="rect" coords="147,21,205,54" href="B.img"  />
    <area shape="rect" coords="60,58,121,90" href="C.img"  />
    <area shape="rect" coords="147,59,205,92" href="D.img"  />
    <area shape="rect" coords="61,92,121,125" href="E.img"  />
    <area shape="rect" coords="146,96,205,128" href="F.img"  />
    <area shape="rect" coords="60,128,122,163" href="G.img"  />
    <area shape="rect" coords="146,131,204,164" href="I.img"  />
</map>
<div id="imgcontainer"></div>

Worked absolutely perfectly, great! – Darren Riches Apr 30 '13 at 13:49 — Darren Riches, Apr 30 '13 at 13:49

Add a cross fade effect on an image gallery

2 Answers2