Unos meses atrás hablé sobre jQuery Easy Background Resize, un plugin jQuery que muestra y cambia las imágenes de fondo de una página web. Hoy voy hablar sobre Full Page Image Gallery.
Full Page Image Gallery es una galería de imágenes a pantalla completa con jQuery. Además de mostrar las imágenes ocupando toda la pantalla, posee controles para avanzar y retroceder y vistas miniaturas, todo esto con unos elaborados efectos de animación.
Implementar Full Page Image Gallery
Primero tenemos que enlazar los archivos JS, el de jQuery, el plugin y agregar el código Javascript:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"
src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(window).load(function() {
sliderLeft=$('#thumbScroller .container').position().left;
padding=$('#outer_container').css('paddingRight').replace("px", "");
sliderWidth=$(window).width()-padding;
$('#thumbScroller').css('width',sliderWidth);
var totalContent=0;
$('#thumbScroller .content').each(function () {
totalContent+=$(this).innerWidth();
$('#thumbScroller .container').css('width',totalContent);
});
$('#thumbScroller').mousemove(function(e){
if($('#thumbScroller .container').width()>sliderWidth){
var mouseCoords=(e.pageX - this.offsetLeft);
var mousePercentX=mouseCoords/sliderWidth;
var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
var thePosA=mouseCoords-destX;
var thePosB=destX-mouseCoords;
var animSpeed=600; //ease amount
var easeType='easeOutCirc';
if(mouseCoords==destX){
$('#thumbScroller .container').stop();
}
else if(mouseCoords>destX){
//$('#thumbScroller .container').css('left',-thePosA); //without easing
$('#thumbScroller .container').stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
}
else if(mouseCoords<destX){
//$('#thumbScroller .container').css('left',thePosB); //without easing
$('#thumbScroller .container').stop().animate({left: thePosB}, animSpeed,easeType); //with easing
}
}
});
$('#thumbScroller .thumb').each(function () {
$(this).fadeTo(fadeSpeed, 0.6);
});
var fadeSpeed=200;
$('#thumbScroller .thumb').hover(
function(){ //mouse over
$(this).fadeTo(fadeSpeed, 1);
},
function(){ //mouse out
$(this).fadeTo(fadeSpeed, 0.6);
}
);
});
$(window).resize(function() {
//$('#thumbScroller .container').css('left',sliderLeft); //without easing
$('#thumbScroller .container').stop().animate({left: sliderLeft}, 400,'easeOutCirc'); //with easing
$('#thumbScroller').css('width',$(window).width()-padding);
sliderWidth=$(window).width()-padding;
});
</script>
Luego creamos la estructura HTML de la galería:
<div id="fp_gallery" class="fp_gallery"> <img src="images/1.jpg" alt="" class="fp_preview" style="display:none;"/> <div class="fp_overlay"></div> <div id="fp_loading" class="fp_loading"></div> <div id="fp_next" class="fp_next"></div> <div id="fp_prev" class="fp_prev"></div> <div id="outer_container"> <div id="thumbScroller"> <div class="container"> <div class="content"> <div><a href="#"><img src="images/thumbs/1.jpg" alt="images/1.jpg" class="thumb" /></a></div> </div> <div class="content"> <div><a href="#"><img src="images/thumbs/2.jpg" alt="images/2.jpg" class="thumb" /></a></div> </div> <div class="content"> <div><a href="#"><img src="images/thumbs/3.jpg" alt="images/3.jpg" class="thumb" /></a></div> </div> <div class="content"> <div><a href="#"><img src="images/thumbs/4.jpg" alt="images/4.jpg" class="thumb" /></a></div> </div> <div class="content"> <div><a href="#"><img src="images/thumbs/5.jpg" alt="images/5.jpg" class="thumb" /></a></div> </div> </div> </div> </div> <div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div> </div>
Corolario
Full Page Image Gallery es muy vistosa y no le envidia en nada a un galería desarrollado con Flash. Además, como se puede ver por la explicación de arriba, es muy sencillo de implementar.
Full Page Image Gallery
Sitio: tympanus.net/codrops/2010/09/08/full-page-image-gallery
