html - Use jQuery to swap/switch between 'div's? -
i using this guide sort out automatic image switching @ intervals.
what i'd adapt (or new ideas) images links i've got (this structural purposes, link#
, image#
variables actual elements in code):
<div id="mygallery"> <div class="active"> <a href="link1"><img src="image1" /></a> </div> <div> <a href="link2"><img src="image2" /></a> </div> <div> <a href="link3"><img src="image3" /></a> </div> </div>
i tried changing bits in tutorial referenced img
div
.
the difference first image took ages load , none of them 'clickable' links.
here, script:
<script> function swapimages(){ var $active = $('#mygallery .active'); var $next = ($('#mygallery .active').next().length > 0) ? $('#mygallery .active').next() : $('#mygallery div:first'); $active.fadeout(function(){ $active.removeclass('active'); $next.fadein().addclass('active'); }); } $(document).ready(function(){ // run our swapimages() function every 5secs setinterval('swapimages()', 2000); }) </script>
style :
<style> #mygallery{ position:relative; width:400px; /* set image width */ height:300px; /* set image height */ } #mygallery div{ display:none; position:absolute; top:0; left:0; } #mygallery div.active{ display:block; } </style>
Comments
Post a Comment