Transcript
  • Creacin de Una Galera de Imagens con Html 5 y JQuery

    Archivo HTML

    Document

  • tbn3.gstatic.com/images?q=tbn:ANd9GcQdi6zGgzSasSMSQvnSHkuI34wr18hPyOqpFPMtW7F1I4Hba

    0fY" alt="">

    Este es el pie de pgina -

    codigoprogramacion.com

    Archivo JS

  • $(document).ready(function(){

    $('#grande'+1).slideDown();

    //var t=setInterval(function(){avanzar();},3000);

    $('.pequeno').click(function(e){

    var elemento = e.target.parentNode;

    var id = elemento.id;

    var n=parseInt(id.charAt(7));

    $('.grande').slideUp(); //Lo enconde a todos

    $('#grande'+n).slideDown(); //Muestra solo el que tiene este id

    });

    var emergente=function(src){

    $('#popuImg').attr("src", src);

    $('#popup').fadeIn('slow');

    $('.popup-overlay').fadeIn('slow');

    $('.popup-overlay').height($(window).height());

    return false;

    };

    $('.grande').click(function(e){

  • var elemento = e.target.parentNode;

    var id = elemento.id;

    var n=parseInt(id.charAt(6));

    var src=$('#grande'+n+' img').attr("src");

    emergente(src);

    });

    $('#close').click(function(){

    $('#popup').fadeOut('slow');

    $('.popup-overlay').fadeOut('slow');

    return false;

    });

    });


Top Related