Ver Mensaje Individual
  #2 (permalink)  
Antiguo 16/06/2011, 23:00
Avatar de America|UNK
America|UNK
 
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 18 años
Puntos: 56
Respuesta: next prev last y first en galeria de fotos

Código CSS:
Ver original
  1. <style>
  2. .thumb {width:80px;height:80px; cursor:pointer;}
  3. #fullimage {width:400px;height:400px}
  4. #pager span {cursor:pointer; background:#999; margin:3px}
  5. </style>
Código HTML:
Ver original
  1. <div id="pager"><span class="first">First</span><span class="prev">Prev</span><span class="next">Next</span><span class="last">Last</span></div>
  2. <div id="thumbs">
  3.     <img class="thumb" src="http://t0.gstatic.com/images?q=tbn:ANd9GcSAOQFybyZ06PX9rp1LLMuvpKn4wNYq2Xr64OL8ks56CE8S4ZnK5JrFqLA">
  4.     <img class="thumb" src="http://t0.gstatic.com/images?q=tbn:ANd9GcSoqw6sSp8Hidf1HM0nza4ORFIrW2CLb79Huu00ZRDMddhzupzBzA">
  5.     <img class="thumb" src="http://t3.gstatic.com/images?q=tbn:ANd9GcQPpva622B-VqRrz5UY2J_V7Ot7MJORCPgnVdfC9i2IMIj-M1SnB0Cz52G_">
  6.     <img class="thumb" src="http://t1.gstatic.com/images?q=tbn:ANd9GcREvrh6GwrCMzZubDUzmHRifhyu2uIArznljvQGJdsFywrs2xP7cn24UNY_">
  7.     <img class="thumb" src="http://t3.gstatic.com/images?q=tbn:ANd9GcS5hQO29sQXRXj-GyU7d_sGb1P9koIu8FGcaEBCQE9h4PoJ22zcwqKn9eA">
  8. </div>
  9.  
  10. <div>
  11.     <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSAOQFybyZ06PX9rp1LLMuvpKn4wNYq2Xr64OL8ks56CE8S4ZnK5JrFqLA" id="fullimage" />
  12. </div>
Código Javascript:
Ver original
  1. var limite = 4, pagejump =  4, page = 0;
  2.     $(document).ready(function(){
  3.         var thumb = $(".thumb");
  4.         $('.thumb:gt('+(limite-1)+')').hide();
  5.         thumb.click(function(){ //cambiar imagen grande por el src del thumb seleccionado
  6.             var imagen = $(this).attr('src')
  7.             $('#fullimage').fadeOut('fast',function(){  //ocultar img anterior
  8.                 $(this).attr('src',imagen).fadeIn('fast') //mostrar nueva img
  9.             })
  10.         })
  11.         $("#pager span").click(function(){ //next prev first last
  12.             var e = $(this);
  13.             if(e.hasClass('next')){page++}else if(e.hasClass('prev')){page--}
  14.             if(page<0||e.hasClass('first')){page=0}
  15.             if(page==Math.ceil(thumb.length/pagejump)|| e.hasClass('last')) {page = Math.ceil(thumb.length/pagejump) - 1}
  16.                
  17.             thumb.each(function(index){
  18.                 if(index >= page*pagejump && index < limite+(page*pagejump)){$(this).show()}else{$(this).hide()} //mostrar pagina
  19.             })
  20.         })
  21.     })
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */