This post describe the Simple fading between multiple images on click. It is a very similar to the others – just layout the images on top of each other, set them all to be transparent, then when the controls are clicked change that one to opaque.
HTML Code
1 2 3 4 5 6 7 8 9 10 11 12 | <div id="cf7" class="shadow"> <img class='opaque' src="/images/Cirques.jpg" /> <img src="/images/Clown%20Fish.jpg;" /> <img src="/images/Stones.jpg;" /> <img src="/images/Summit.jpg;" /> </div> <p id="cf7_controls"> <span class="selected">Image 1</span> <span>Image 2</span> <span>Image 3</span> <span>Image 4</span> </p> |
CSS Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | p#cf7_controls { text-align:center; } #cf7_controls span { padding-right:2em; cursor:pointer; } #cf7 { position:relative; height:281px; width:450px; margin:0 auto 10px; } #cf7 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; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } #cf7 img.opaque { opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=1); } |
JS Code
1 2 3 4 5 6 7 8 9 10 11 12 | $(document).ready(function() { $("#cf7_controls").on('click', 'span', function() { $("#cf7 img").removeClass("opaque"); var newImage = $(this).index(); $("#cf7 img").eq(newImage).addClass("opaque"); $("#cf7_controls span").removeClass("selected"); $(this).addClass("selected"); }); }); |
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: CSS, HTML 5, Jquery
