CODEWITHSUNDEEP
javascriptjquerycss
user1320487
user1320487

Reputation: 2149

slideshow using overlapping transparent images

I have looked at the very helpful suggestions for the css for handling a bunch of exactly overlapping transparent images placed on a non-transparent image (in my case, a map but not a google-type map, just a line drawing). Could someone help me with turning that into a slideshow? I want to progressively stack images directly on top of each other so that the user sees an accumulation of visual information.

Upvotes: 0

Views: 1084

Answers (1)

thirtydot
thirtydot

Reputation: 228182

Here's a very simplified implementation: http://jsfiddle.net/r7B4n/

JavaScript:

$('#showNext').click(function(e){
    e.stopPropagation();
    $('#slideShow li:hidden:first').fadeIn();
});

CSS:

#slideShow {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid #444;
    list-style: none;
    margin: 0;
    padding: 0;
    background: url(http://dummyimage.com/300x200/ccc/fff)
}
#slideShow li {
    position: absolute;
    left: 0; top: 0;
    display: none
}

HTML:

<ul id="slideShow">
    <li><img src="https://i.sstatic.net/hCTLO.png" /></li>
    <li><img src="https://i.sstatic.net/Zm25l.png" /></li>
    <li><img src="https://i.sstatic.net/3Rtc5.png" /></li>
    <li><img src="https://i.sstatic.net/cg3MF.png" /></li>
</ul>
<a href="#" id="showNext">Show next image</a>

Upvotes: 1

Related Questions