ShineTime -Un slideshow CSS3 et jQuery avec des effets de lueurs

ShineTime est un slideshow original développé en XHTML/CSS3 et jQuery, avec des effets de lueurs sur les images.

Si vous avez des photos à présenter originalement, ce script jQuery vous permettra de les mettre en page efficacement avec un rendu très sympathique.

Addy Osmani, le créateur, a eu l'idée de créer un effet de lueur au passage de la souris et au chargement des images, et uniquement avec du CSS et jQuery !

Il nous livre les sources de son slideshow, que vous pourrez facilement adapter à votre site web:

Le HTML:

<!-- Each entry takes the form -->
<!-- start entry-->
<div class="thumbnailimage">
    <div class="thumb_container"> 
        <div class="large_thumb"> 
            <img alt="thumb" class="large_thumb_image" src="images/thumbnails/sample1.jpg">   
            <img rel="Just because I can't code, doesn't mean I can't kick your ass!" class="large_image" src="images/large/sample1.jpg" alt="">
            <div class="large_thumb_border"> </div>
            <div class="large_thumb_shine"> </div>
        </div>
    </div>
</div>
<!--end entry-->       

<!-- whilst the main image container itself looks like-->
<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>

Le CSS:

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;
}

Et le jQuery:

 $(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("")');
     }

  });

Démo

Site Officiel