<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="gallery"> <a href="#" class="show"> <img src="http://www.proprofs.com/quiz-school/images/explore_market/fun.jpg" alt="Flowing Rock" alt="" title="" width="1024" height="768" rel="<h3>Flowing Rock</h3>You can put html element inside the REL attribute."/></a> </a> <a href="#"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ3dCj_tGUfpaqh7uuIYJ7SCAZ1xOeFDFTzvBCcPHKIHRJOV6VB" alt="Grass Blades" alt="" title="" width="1024" height="768" rel="<h3>Grass Blades</h3>description"/> </a> <div class="caption"><div class="content"></div></div> </div> <div class="clear"></div>

#gallery { position:relative; height:360px } #gallery a { float:left; position:absolute; } #gallery a img { border:none; width: auto; height: auto; } #gallery a.show { z-index:500 } #gallery .caption { z-index:600; background-color:#000; color:#ffffff; height:100px; width:auto; position:absolute; bottom:0; } #gallery .caption .content { margin:5px } #gallery .caption .content h3 { margin:1px; padding:1px; color:#1DCCEF; }

$(document).ready(function() { slideShow(); }); function slideShow() { $('#gallery a').css({opacity: 0.0}); $('#gallery a:first').css({opacity: 1.0}); $('#gallery .caption').css({opacity: 0.7}); $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')}); $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')) .animate({opacity: 0.7}, 400); setInterval('gallery()',6000); } function gallery() { var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first')); var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); var caption = next.find('img').attr('rel'); next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); current.animate({opacity: 0.0}, 1000) .removeClass('show'); $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 ); $('#gallery .content').html(caption); }