- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
FAQs
General Tutorials
MonsterONE Subscrioption
“Gallery with fade effect” (galería con un efecto de atenuación)
marzo 17, 2011
Una galería de imágenes sencilla con un efecto de atenuación (fade).
JavaScript
Debemos incluir framework jQuery señalando el atributo src de la etiqueta de script a esos ficheros .js.<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>Coloque el script de inicialización en la sección <head> </head> o en algún fichero .js externo.
$(function(){
// primero creamos una función que va a cambiar las imágenes
var replaceImg=function(href){
var img=$('#gallery #pic img').eq(0),nImg=document.createElement('img')
$('#gallery #pic').append($(nImg).css('opacity',0))
nImg.onload=function(){$(this).animate({opacity:1},'fast');img.remove()}
nImg.src=href
}
// ahora la función que va a procesar la acción del clic de ratón en la imagen de vista previa
$('#gallery #thumbs li a').click(function(){
$('#gallery #thumbs .current').removeClass('current')
replaceImg($(this).attr('href'))
$(this).addClass('current')
return false
})
// este código es para los botones prev/next, si son necesarios
$('#gallery a[rel="next"],#gallery #pic img').live('click',function(){
var curr,indx=0,len=$('#gallery #thumbs ul li a').length
$('#gallery #thumbs ul li a').each(function(){if(this.className.indexOf('current')!=-1){curr=indx}else{indx++}})
$('#gallery #thumbs ul li a.current').removeClass('current')
$('#gallery #thumbs ul li a').eq(((curr+1)<len)?curr+1:0).addClass('current')
replaceImg($('#gallery #thumbs ul li a.current').attr('href'))
})
$('#gallery a[rel="prev"]').live('click',function(){
var curr,indx=0,len=$('#gallery #thumbs ul li a').length
$('#gallery #thumbs ul li a').each(function(){if(this.className.indexOf('current')!=-1){curr=indx}else{indx++}})
$('#gallery #thumbs ul li a.current').removeClass('current')
$('#gallery #thumbs ul li a').eq(curr-1).addClass('current')
replaceImg($('#gallery #thumbs ul li a.current').attr('href'))
})
})
HTML
Aquí puede ver la representación general de script HTML:
<div id="gallery">
<div id="pic">
<img alt="" src="path_to_big_pic1">
</div>
<div id="thumbs">
<ul>
<li>
<a class="current" href="path_to_big_pic1">
<img alt="" src="path_to_thumb_pic1">
</a>
</li>
<li>
<a href="path_to_big_pic2">
<img alt="" src="path_to_thumb_pic2">
</a>
</li>
<li>
<a href="path_to_big_pic3">
<img alt="" src="path_to_thumb_pic3">
</a>
</li>
</ul>
<a href="#" rel="prev">prev</a>
<a href="#" rel="next">next</a>
</div>
</div>
CSS
#gallery #pic{
position:relative;
height:px; /*the height of the big image*/
}
#gallery #pic img{
position:absolute;
}
