| <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
|
| 1:<script type="text/javascript">
|
| 2:
|
| 3:$(document).ready(function() {
|
| 4:
|
| 5: //Execute the slideShow
|
| 6: slideShow();
|
| 7:
|
| 8:});
|
| 9:
|
| 10:function slideShow() {
|
| 11:
|
| 12: //Set the opacity of all images to 0
|
| 13: $('#gallery a').css({opacity: 0.0});
|
| 14:
|
| 15: //Get the first image and display it (set it to full opacity)
|
| 16: $('#gallery a:first').css({opacity: 1.0});
|
| 17:
|
| 18: //Set the caption background to semi-transparent
|
| 19: $('#gallery .caption').css({opacity: 0.7});
|
| 20:
|
| 21: //Resize the width of the caption according to the image width
|
| 22: $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
|
| 23:
|
| 24: //Get the caption of the first image from REL attribute and display it
|
| 25: $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
|
| 26: .animate({opacity: 0.7}, 400);
|
| 27:
|
| 28: //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
|
| 29: setInterval('gallery()',6000);
|
| 30:
|
| 31:}
|
| 32:
|
| 33:function gallery() {
|
| 34:
|
| 35: //if no IMGs have the show class, grab the first image
|
| 36: var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
|
| 37:
|
| 38: //Get next image, if it reached the end of the slideshow, rotate it back to the first image
|
| 39: var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
|
| 40:
|
| 41: //Get next image caption
|
| 42: var caption = next.find('img').attr('rel');
|
| 43:
|
| 44: //Set the fade in effect for the next image, show class has higher z-index
|
| 45: next.css({opacity: 0.0})
|
| 46: .addClass('show')
|
| 47: .animate({opacity: 1.0}, 1000);
|
| 48:
|
| 49: //Hide the current image
|
| 50: current.animate({opacity: 0.0}, 1000)
|
| 51: .removeClass('show');
|
| 52:
|
| 53: //Set the opacity to 0 and height to 1px
|
| 54: $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:50 }).animate({height: '1px'}, { queue:true, duration:300 });
|
| 55:
|
| 56: //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
|
| 57: $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
|
| 58:
|
| 59: //Display the content
|
| 60: $('#gallery .content').html(caption);
|
| 61:
|
| 62:
|
| 63:}
|
| 64:
|
| 65:</script>
|
| 66:<style type="text/css">
|
| 67:body{
|
| 68: font-family:arial
|
| 69:}
|
| 70:
|
| 71:.clear {
|
| 72: clear:both
|
| 73:}
|
| 74:
|
| 75:#gallery {
|
| 76: position:relative;
|
| 77: height:360px
|
| 78:}
|
| 79: #gallery a {
|
| 80: float:left;
|
| 81: position:absolute;
|
| 82: }
|
| 83:
|
| 84: #gallery a img {
|
| 85: border:none;
|
| 86: }
|
| 87:
|
| 88: #gallery a.show {
|
| 89: z-index:500
|
| 90: }
|
| 91:
|
| 92: #gallery .caption {
|
| 93: z-index:600;
|
| 94: background-color:#000;
|
| 95: color:#ffffff;
|
| 96: height:100px;
|
| 97: width:100%;
|
| 98: position:absolute;
|
| 99: bottom:0;
|
| 100: }
|
| 101:
|
| 102: #gallery .caption .content {
|
| 103: margin:5px
|
| 104: }
|
| 105:
|
| 106: #gallery .caption .content h3 {
|
| 107: margin:0;
|
| 108: padding:0;
|
| 109: color:#1DCCEF;
|
| 110: }
|
| 111:
|
| 112:
|
| 113:</style>
|
| 114:
|
| 115:<h1>JQuery Photo changes with transparent effect</h1>
|
| 116:<div id="gallery" style="width:248px;" >
|
| 117:
|
| 118: <a href="#" class="show">
|
| 119: <img src="images/pic-1.gif" alt="Flowing Rock" title="" alt="" rel="<h3>Heading One</h3> Saree is really transparent, so be carefull. "/>
|
| 120: </a>
|
| 121:
|
| 122: <a href="#">
|
| 123: <img src="images/pic-2.gif" alt="Grass Blades" title="" alt="" rel="<h3>Heading Two</h3> Hey ..what r u looking at ."/>
|
| 124: </a>
|
| 125:
|
| 126: <a href="#">
|
| 127: <img src="images/pic-3.gif" alt="Ladybug" title="" alt="" rel="<h3>Heading There</h3> How is she dude!"/>
|
| 128: </a>
|
| 129:
|
| 130:
|
| 131:
|
| 132: <div class="caption">
|
| 133: <div class="content"></div>
|
| 134: </div>
|
| 135:</div>
|
| 136:
|
| 137:<div class="clear"></div>
|
| 138:
|
| 139:<br/><br/>
|
| 140: |