Shine Time Gallery

User Rating: / 0
PoorBest 

Shine Time Gallery is cool gallery with a shine effect for thumb image!

Create a new html page and in the head section copy the code:

<link rel="stylesheet" type="text/css" href="styles.css"></link>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="fonts/aura_400.font.js"></script>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]--> 

In the body tag put this code:

<script type="text/javascript">
  $(document).ready(function()
  {
  
     /*Your ShineTime Welcome Image*/
     var default_image = 'images/large/default.jpg';
     var default_caption = 'Welcome to ShineTime';
     
     /*Load The Default Image*/
     loadPhoto(default_image, default_caption);
     
     
     function loadPhoto($url, $caption)
     {
     
     
        /*Image pre-loader*/
        showPreloader();
        var img = new Image();
        jQuery(img).load( function()
        {
            jQuery(img).hide();
            hidePreloader();
       
        }).attr({ "src": $url });
   
        $('#largephoto').css('background-image','url("' + $url + '")');
        $('#largephoto').data('caption', $caption);
     }

     
     /* When a thumbnail is clicked*/
     $('.thumb_container').click(function()
     {
        
          var handler = $(this).find('.large_image');
          var newsrc  = handler.attr('src');
          var newcaption  = handler.attr('rel');
          loadPhoto(newsrc, newcaption);
     
     });
     
     /*When the main photo is hovered over*/
     $('#largephoto').hover(function()
     {
       
        var currentCaption  = ($(this).data('caption'));
        var largeCaption = $(this).find('#largecaption');
       
        largeCaption.stop();
        largeCaption.css('opacity','0.9');
        largeCaption.find('.captionContent').html(currentCaption);
        largeCaption.fadeIn()
   
   
       
         largeCaption.find('.captionShine').stop();
         largeCaption.find('.captionShine').css("background-position","-550px 0");
         largeCaption.find('.captionShine').animate({backgroundPosition: '550px 0'},700);
         
         Cufon.replace('.captionContent');
       

     },
     
     function()
     {
        var largeCaption = $(this).find('#largecaption');
        largeCaption.find('.captionContent').html('');
        largeCaption.fadeOut();
     
     });
   
     
     
     /* When a thumbnail is hovered over*/
     $('.thumb_container').hover(function()
     { 
         $(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);
         $(this).find(".large_thumb_shine").stop();
         $(this).find(".large_thumb_shine").css("background-position","-99px 0");
         $(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700);
             
     }, function()
     {
        $(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200);
     });
     
     function showPreloader()
     {
       $('#loader').css('background-image','url("images/interface/loader.gif")');
     }
     
     function hidePreloader()
     {
       $('#loader').css('background-image','url("")');
     }
  
  });
</script>

<div id="container">
<div id="containertitle">
Welcome to ShineTime
</div>
   <div class="mainframe">
      <div id="largephoto">
      <div id="loader"></div>
     
     
        <div id="largecaption">
         <div class="captionShine"></div>
           <div class="captionContent"></div>
         
        </div>
       
       <div id="largetrans"> 
      </div>
           
      </div>
     
   </div>
   <div class="thumbnails">
   <br><br><br>
   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample1.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample1.jpg" class="large_image" rel="Just because I can't code, doesn't mean I can't kick your ass!" />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry-->         
      
   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample2.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample2.jpg" class="large_image" rel="Kick-Ass Is In Theatres Everywhere Now" />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry-->         
      
   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample3.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample3.jpg" class="large_image" rel="I can't see through walls, but I can still kick your ass." />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry-->          
      
   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample4.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample4.jpg" class="large_image" rel="I won't bite, I promise!" />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry-->          
      
   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample5.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample5.jpg" class="large_image" rel="Using swords to open up that ketchup bottle may not have been the best idea.." />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry-->         
      
   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample6.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample6.jpg" class="large_image" rel="We're going to..wait for it..kick your ass!" />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry-->    

   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample7.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample7.jpg" class="large_image" rel="I can't be invisible, but I can kick your ass." />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry-->   

   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample8.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample8.jpg" class="large_image" rel="Dave Lizewski is a man in a green costume. He is Kick-Ass." />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry--> 

   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample9.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample9.jpg" class="large_image" rel="I probably shouldn't have yelled 'surprise' wearing this costume.." />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry-->          
      
   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample10.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample10.jpg" class="large_image" rel="I can't read your mind, but I can kick your ass." />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry-->       

   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample11.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample11.jpg" class="large_image" rel="I love that indented text effect up there. Not bad.." />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry-->          
             
       <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample12.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample12.jpg" class="large_image" rel="I got your a present. It's an Ass-Kicking." />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry-->          
         
       <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample13.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample13.jpg" class="large_image" rel="You don't have to be super to be a hero." />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry--> 
      
       <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample15.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample15.jpg" class="large_image" rel="We Can Kick Ass - Anytime, Anyday." />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry--> 

       <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container">
                            <div class="large_thumb">
                                <img src="images/thumbnails/sample14.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample14.jpg" class="large_image" rel="You know..I had this look first. Batman copied ME." />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
                        </div>
                       </div>
       <!--end entry-->         
             
      
         
   </div>
</div>

Not let's create the css file:

body { background-color:#333; margin:0 auto; background-image:url('images/interface/bgnoise.png');}
#container { width:793px; height:498px; margin:0 auto; background-image:url('images/interface/back_noise.png'); background-color:#111; margin-top:40px;}
#container .mainframe { width: 500px; height:498px; float:left}
#container .thumbnails { float:left; width:293px; height:498px; background-repeat:no-repeat; background-image:url('images/interface/total_grid.png'); background-position:9px 70px; }
.thumbnailimage { float:left; padding:7px;}
.large_thumb    {float:left; position: relative; width:64px; height:64px; padding:0px 10px 0px 0;}
img.large_thumb_image    {position:absolute; left:5px; top:4px;}
.large_thumb_border    {width:64px; height:64px; background:url('images/interface/thumb_border.png'); position:absolute; }
.large_thumb_shine    {width:54px; height:54px; background:url('images/interface/shine.png'); position:absolute; background-position:-150px 0; left:5px; top:4px; background-repeat:no-repeat;}
.thumb_container { width:64px; height:64px; background-image:url('images/interface/thumb_holder.png'); }
#largephoto { width: 444px; height:370px; background-color:#333333; margin-top:68px; margin-left:40px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-left: 1px solid #fff; border-right: 1px solid #fff; border-bottom: 1px solid #fff; }
#largetrans { width: 444px; height:370px; background-image:url('images/interface/main_bg_trans.png'); -moz-border-radius: 10px; -webkit-border-radius: 10px;}
.large_image { display:none}
#containertitle { position:absolute; margin-top:35px; margin-left:40px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; text-shadow: 0px 1px 2px #fff;}
#largecaption {  text-align:center; height:100px; width:100%; background-color:#111; position:absolute; width: 444px; margin-top:270px; -moz-border-radius-bottomleft: 10px;  -moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; display:none; color:#fff; font-size:30px; font-family:Arial; letter-spacing:-1px; font-weight:bold}
#largecaption .captionContent { padding:5px;}
#largecaption .captionShine { background:url('images/interface/bigshine.png'); position:absolute;  width: 444px; height: 100px; background-position:-150px 0;background-repeat:no-repeat;}
#loader { width:150px; height:150px;background-image:url('images/interface/loader.gif'); background-repeat:no-repeat; position:absolute;}

The last step is to download the jQuery plugin, that was all, bye!

This script has been developed by http://addyosmani.com !