WebCssDesign

shineTime galerie jQuery xHTML CSS3

• Accueil
• Ajax
• shineTime galerie jQuery xHTML CSS3

Voici shineTime une galerie utilisant jQuery avec du xHTML/CSS3 pour des effets « shiny » plutôt sympas.

Une façon originale de présenté quelques images/photos sur son site.

Addy Osmani, le créateur nous gratifie ici d’une belle galerie avec uniquement avec du CSS et jQuery !

Voici le code HTML

<!– start entry–>
<div>
<div>
<div> <img alt= »thumb » src= »images/thumbnails/sample1.jpg »>   <img rel= »Just because I can’t code,
doesn’t mean I can’t kick your ass! » src= »images/large/sample1.jpg » alt= »">
<div> </div>
<div> </div>
</div>
</div>
</div>

<!–end entry–>

<!– whilst the main image container itself looks like–>
<div id= »containertitle »>Welcome to ShineTime</div>
<div>
<div id= »largephoto »>
<div id= »loader »> </div>
<div id= »largecaption »>
<div> </div>
<div> </div>
</div>
<div id= »largetrans »> </div>
</div>
</div>

Voici le code 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;}

Voici le code 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("")');
	 }

  });

Site Addy Osmani : http://addyosmani.com/blog/shinetime/
Démonstration : http://www.addyosmani.com/resources/shinetime
Télécharger : http://www.addyosmani.com/resources/shinetime/shinetime.1.01.zip
Vous avez même droit à un screencast : http://screenr.com/Z0W