Tutoriales en la web

Galeria Jquery – Tron Legacy

Posteado el 21. Oct, 2010 por tuto in Desarrollo Web, HTML y CSS, Jquery

PASO 1
Creamos una nueva carpeta llamada galeria con jquery y dentro de ella creamos una nueva carpeta llamada imágenes, dentro de la cual vamos a crear 3 subs carpetas una llamada grandes, otra llamada interface y otra llamada miniaturas, dentro de la carpeta grande vamos a guardar las imágenes de tamaño grande que vamos a usar para la galería; dentro de la carpeta miniaturas vamos a guardar las miniaturas de las imágenes de nuestra galería y dentro de la carpeta interface vamos a guardar las imágenes del diseño de la galería.

PASO 2
Ahora vamos a Adobe Dreamweaver y creamos un nuevo documento HTML en blanco.

PASO 3
Debajo de las etiquetas vamos a copiar el siguiente código html4strict

Code block

<link rel="stylesheet" type="text/css" href="css/galeria.css"></link>
<script type="text/javascript" src="js/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>
</head>
 
<script type="text/javascript">
  $(document).ready(function()
  {
	 var default_image = 'imagenes/grandes/default.jpg';
	 var default_caption = 'Tutoriales en la web';
	 loadPhoto(default_image, default_caption);
 
	 function loadPhoto($url, $caption)
	 {
 
	    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);
	 }
 
	 $('.thumb_container').click(function()
	 {
 
		  var handler = $(this).find('.large_image');
		  var newsrc  = handler.attr('src');
		  var newcaption  = handler.attr('rel');
		  loadPhoto(newsrc, newcaption);
 
	 });
 
	 $('#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();
 
	 });
 
	 $('.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("imagenes/interface/loader.gif")');
	 }
 
	 function hidePreloader()
	 {
	   $('#loader').css('background-image','url("")');
	 }
 
  });
</script>

PASO 4
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta galeria con jquery con el nombre de galeria.html.

PASO 5
Presionamos el comando Ctrl + N y creamos un nuevo documento CSS.

PASO 6
Dentro del documento copiamos el siguiente código CSS.

Code block

@charset "utf-8";
/* CSS Document */
 
body { background-color:#333; margin:0 auto; background-image:url('../imagenes/interface/bgnoise.png');}
#container { width:793px; height:498px; margin:0 auto; background-image:url('../imagenes/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('../imagenes/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('../imagenes/interface/thumb_border.png'); position:absolute; }
.large_thumb_shine	{width:54px; height:54px; background:url('../imagenes/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('../imagenes/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('../imagenes/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('../imagenes/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('../imagenes/interface/loader.gif'); background-repeat:no-repeat; position:absolute;}

PASO 7
Ahora dentro de la carpeta galería con jquery creamos una carpeta llamada css donde guardamos nuestro documento CSS con el nombre de galeria.css.

PASO 8
Regresamos a nuestro documento HTML y dentro de las etiquetas copiamos el siguiente código html4strict

Code block

<div id="container">
<div id="containertitle">
Galería con jQuery y CSS
</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="imagenes/miniaturas/sample1.jpg" class="large_thumb_image" alt="thumb" /> 
                                <img src="imagenes/grandes/sample1.jpg" class="large_image" rel="Thor - TRON" />
                                <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="imagenes/miniaturas/sample2.jpg" class="large_thumb_image" alt="thumb" /> 
                                <img src="imagenes/grandes/sample2.jpg" class="large_image" rel="Spiderwoman - TRON" />
                                <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="imagenes/miniaturas/sample3.jpg" class="large_thumb_image" alt="thumb" /> 
                                <img src="imagenes/grandes/sample3.jpg" class="large_image" rel="Spiderman - TRON" />
                                <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="imagenes/miniaturas/sample4.jpg" class="large_thumb_image" alt="thumb" /> 
                                <img src="imagenes/grandes/sample4.jpg" class="large_image" rel="Secret Avengers - TRON" />
                                <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="imagenes/miniaturas/sample5.jpg" class="large_thumb_image" alt="thumb" /> 
                                <img src="imagenes/grandes/sample5.jpg" class="large_image" rel="Quicksilver - TRON" />
                                <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="imagenes/miniaturas/sample6.jpg" class="large_thumb_image" alt="thumb" /> 
                                <img src="imagenes/grandes/sample6.jpg" class="large_image" rel="Ms Marvel - TRON" />
                                <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="imagenes/miniaturas/sample7.jpg" class="large_thumb_image" alt="thumb" /> 
                                <img src="imagenes/grandes/sample7.jpg" class="large_image" rel="Iron Man - TRON" />
                                <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="imagenes/miniaturas/sample8.jpg" class="large_thumb_image" alt="thumb" /> 
                                <img src="imagenes/grandes/sample8.jpg" class="large_image" rel="Ghost Rider - TRON" />
                                <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="imagenes/miniaturas/sample9.jpg" class="large_thumb_image" alt="thumb" /> 
                                <img src="imagenes/grandes/sample9.jpg" class="large_image" rel="Captain America - TRON" />
                                <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="imagenes/miniaturas/sample10.jpg" class="large_thumb_image" alt="thumb" /> 
                                <img src="imagenes/grandes/sample10.jpg" class="large_image" rel="Wolverine - TRON" />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
						</div>
                       </div>
       <!--end entry-->    		   
 
   </div>
</div>