A Kick Ass new Jquery slide show

Jquery Slide Show photo gallery

The Animated ‘Shine’ Effect

The idea behind a Shine Effect is to give your graphics the appearance of being on a glossy surface that have just had a light beam pass over them. This can make them appear to be made of glass and can increase the visual experience your end users see.

Before we get into any code, lets go through the basic concepts behind the effect. We want to pass a light-beam (in this case an image simulating a shine) past our image when the user hovers over it. Now because I wanted to style up today’s gallery so that each thumbnail appeared to float out of it’s container, the steps to achieving the below animation are as follows:

1. Change the margins of the thumbnail element so that it floats away from it’s container
2. Set the background-position of your “shine” graphic to be –1 * (it’s total width)
3. Animate your background-position to value of the total width. Effectively we’re hiding the gloss off-stage and then animating it across the image.

You can see this being achieved in the diagram below.

Shine Effect

Now, because ShineTime is going to also apply this effect to the caption holder component (see the demo), I needed to come up with a much larger shine graphic for this that cleanly executes the desired effect without being slow or making the text unreadable. Using an image about 20% longer than the container in each direction at a layer below the text made this possible.

Designing ShineTime

Graphics-wise, there are a few important things to note about ShineTime. I wanted to give this demo an extra-depth of design detail so the following techniques were applied to create the final main-photo area:

1. CSS3 is used to create the rounded-corner borders around the main container div. It is also used on the indented shadow layer (which you can see below). In order for the caption container to also fit this design spec, it’s bottom rounded corners use CSS3 to keep everything looking like it’s inside the same box.
2. Layering is heavily used in this demo to achieve a photographic-depth effect. The choice to do this using an image rather than CSS3 was in order to preserve the effect displaying in browsers like IE6.
3. Normally, image galleries are based on UL/LI elements which are wrapped together using jQuery & CSS to turn them into something pretty. Here, because the actual image needs to be behind a few other layers so that it can have (a) Rounded corners and (b) the photo-effect, it’s necessary for all images to be loaded using the background-image property of the ‘largephoto’ div (take a look at the HTML code to see what I’m talking about)
4. CSS3 is finally also used on the ShineTime Header. Whilst I’ve included Cufon for a little added cleanliness to my typographic elements, in the header it’s simply used for adding an indented feel to the text to give the background that extra ‘metallic’ feel to it.

The Code

Finally, for the part you’ve been waiting for: the code.

HTML (Sample)

1. <div class="thumbnailimage">  
2. <div class="thumb_container">  
3. <div class="large_thumb"> <img src="images/thumbnails/sample1.jpg" class="large_thumb_image" alt="thumb">   <img alt="" src="images/large/sample1.jpg" class="large_image" rel="Just because I can't code,  
4. doesn't mean I can't kick your ass!">  
5. <div class="large_thumb_border"> </div>  
6. <div class="large_thumb_shine"> </div>  
7. </div>  
8. </div>  
9. </div>  
10.          
11.   
12. <div id="containertitle">Welcome to ShineTime</div>  
13. <div class="mainframe">  
14. <div id="largephoto">  
15. <div id="loader"> </div>  
16. <div id="largecaption">  
17. <div class="captionShine"> </div>  
18. <div class="captionContent"> </div>  
19. </div>  
20. <div id="largetrans"> </div>  
21. </div>  
22. </div>  

CSS

1. body { background-color:#333; margin:0 auto;  
2. background-image:url('images/interface/bgnoise.png');}  
3. #container { width:793px; height:498px; margin:0 auto;  
4. background-image:url('images/interface/back_noise.png');  
5. background-color:#111; margin-top:40px;}  
6. #container .mainframe { width: 500px; height:498px; float:left}  
7. #container .thumbnails { float:left; width:293px; height:498px;  
8. background-repeat:no-repeat; background-image:url('images/interface/total_grid.png');  
9. background-position:9px 70px; }  
10. .thumbnailimage { float:left; padding:7px;}  
11. .large_thumb    {float:left; position: relative; width:64px;  
12. height:64px; padding:0px 10px 0px 0;}  
13. img.large_thumb_image   {position:absolute; left:5px; top:4px;}  
14. .large_thumb_border {width:64px; height:64px;  
15. background:url('images/interface/thumb_border.png'); position:absolute; }  
16. .large_thumb_shine  {width:54px; height:54px;  
17. background:url('images/interface/shine.png'); position:absolute;  
18. background-position:-150px 0; left:5px; top:4px; background-repeat:no-repeat;}  
19. .thumb_container { width:64px; height:64px;  
20. background-image:url('images/interface/thumb_holder.png'); }  
21. #largephoto { width: 444px; height:370px; background-color:#333333;  
22. margin-top:68px; margin-left:40px; -moz-border-radius: 10px;  
23. -webkit-border-radius: 10px; border-left: 1px solid #fff;  
24. border-right: 1px solid #fff; border-bottom: 1px solid #fff; }  
25. #largetrans { width: 444px; height:370px;  
26. background-image:url('images/interface/main_bg_trans.png');  
27. -moz-border-radius: 10px; -webkit-border-radius: 10px;}  
28. .large_image { display:none}  
29. #containertitle { position:absolute; margin-top:35px;  
30. margin-left:40px; font-family:Arial, Helvetica, sans-serif;  
31. font-weight:bold; text-shadow: 0px 1px 2px #fff;}  
32. #largecaption {  text-align:center; height:100px;  
33. width:100%; background-color:#111; position:absolute; width: 444px;  
34. margin-top:270px; -moz-border-radius-bottomleft: 10px;  
35. -moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius: 10px;  
36. -webkit-border-bottom-rightright-radius: 10px;  
37. display:none; color:#fff; font-size:30px;  
38. font-family:Arial; letter-spacing:-1px; font-weight:bold}  
39. #largecaption .captionContent { padding:5px;}  
40. #largecaption .captionShine { background:url('images/interface/bigshine.png');  
41.  position:absolute;  width: 444px; height: 100px;  
42.  background-position:-150px 0;background-repeat:no-repeat;}  
43. #loader { width:150px; height:150px;  
44. background-image:url('images/interface/loader.gif');  
45. background-repeat:no-repeat; position:absolute;}  

JavaScript 

1. $(document).ready(function()  
2.  {  
3.  /*Your ShineTime Welcome Image*/  
4.  var default_image = 'images/large/default.jpg';  
5.  var default_caption = 'Welcome to ShineTime';  
6.  /*Load The Default Image*/  
7.  loadPhoto(default_image, default_caption);  
8.  function loadPhoto($url, $caption)  
9.  {  
10.     /*Image pre-loader*/  
11.     showPreloader();  
12.     var img = new Image();  
13.     jQuery(img).load( function()  
14.     {  
15.         jQuery(img).hide();  
16.         hidePreloader();  
17.        }).attr({ "src": $url });  
18.     $('#largephoto').css('background-image','url("' + $url + '")');  
19.     $('#largephoto').data('caption', $caption);  
20.  }  
21.  /* When a thumbnail is clicked*/  
22.  $('.thumb_container').click(function()  
23.  {  
24.       var handler = $(this).find('.large_image');  
25.       var newsrc  = handler.attr('src');  
26.       var newcaption  = handler.attr('rel');  
27.       loadPhoto(newsrc, newcaption);  
28.  });  
29.  /*When the main photo is hovered over*/  
30.  $('#largephoto').hover(function()  
31.  {  
32.     var currentCaption  = ($(this).data('caption'));  
33.     var largeCaption = $(this).find('#largecaption');  
34.     largeCaption.stop();  
35.     largeCaption.css('opacity','0.9');  
36.     largeCaption.find('.captionContent').html(currentCaption);  
37.     largeCaption.fadeIn()  
38.      largeCaption.find('.captionShine').stop();  
39.         largeCaption.find('.captionShine').css("background-position","-550px 0");  
40.         largeCaption.find('.captionShine').animate({backgroundPosition: '550px 0'},700);  
41.      Cufon.replace('.captionContent');  
42.  },  
43.  function()  
44.  {  
45.     var largeCaption = $(this).find('#largecaption');  
46.     largeCaption.find('.captionContent').html('');  
47.     largeCaption.fadeOut();  
48.  });  
49.     /* When a thumbnail is hovered over*/  
50.  $('.thumb_container').hover(function()  
51.  {  
52.         $(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);  
53.      $(this).find(".large_thumb_shine").stop();  
54.         $(this).find(".large_thumb_shine").css("background-position","-99px 0");  
55.         $(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700);  
56.  }, function()  
57.  {  
58.     $(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200);  
59.  });  
60.  function showPreloader()  
61.  {  
62.    $('#loader').css('background-image','url("images/interface/loader.gif")');  
63.  }  
64.  function hidePreloader()  
65.  {  
66.    $('#loader').css('background-image','url("")');  
67.  }  
68.  });  

 The End.