Galería de imágenes




 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<style type="text/css">
/*Make sure your page contains a valid doctype at the top*/ 
#simplegallery1{ //CSS for Simple Gallery Example 1 
position: relative; /*keep this intact*/ 
visibility: hidden; /*keep this intact*/ 
border: 1px solid #666; 
}
#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined) 
text-align: left; 
padding: 2px 5px; 
font: 10px normal verdana, arial; 
}
</style>
<script type="text/javascript" >
var simpleGallery_navpanel={ 
    loadinggif: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHa8ST-iRN4P7ZUKvaSkIdOLC4WjNfPj0unE8ae5v3vRfMm0FClonEfwnrt5t09tP853bv67-7AvXQnRncvgb5yacDLhosmJ4d04MVQxT57XDBZQLMpwf6lGu9doNoer-V_6p1fVUy46I/s400/ajaxload.gif', //full path or URL to loading gif image 
    panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container 
    images: [ 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEincSa9SygP5yvCOhO8FxI811x10ZPUL9rD2QfIYBmO2FeyLquF5grZdqe6JhjVqHDcHmiIIePNhTW5clHVedz_DVyi36eEFwmSxbkBfHERtZeR-Z0LwzPeS9zY_GUbTW8Dm3NJCXb4Geg/s400/left.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnUtVBb0RD5OdI8NZECYw-hAJwFIEmZOc1mMpvN-mVGaQeh-eX_X2OSqOZ1WBIQyjk4T8KzgPCfR73yYaYX1lcLo2AGXY0vJg3uTObyS2ZiRGGT0O0UfKUxY0qmzhWXHcAWVyW2wUfC0U/s400/play.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEbWUdRIfutlIracSosDGTHmX6s7PJHsmvMFvDAza-GkgZFafAlPJysGT73YYHzJxynkepIBjTa2P9OZRGKKi7lpHWmLBD6etea8SpXVhKDWRzU52pwwMLixIG8IhbCgbPSCFjArRzWLU/s400/right.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdiwjRDkKj59-kV_CBGql0PpKemtEIx56Q0feRIA2zpbMOlPHWlVO8TEm1Uth6qu5AnsT6Mw9k3luqd4z_Sk5iILwwPrZSM49pIfxDKXZpG0BHbPyrpLPvISbZqXJHZloB9C8avp89VLA/s400/pause.gif'], //nav panel images (in that order) 
    imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images 
    slideduration: 500 //duration of slide up animation to reveal panel 
}
function simpleGallery(settingarg){ 
    this.setting=settingarg 
    settingarg=null 
    var setting=this.setting 
    setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(simpleGallery_navpanel.panel.height) 
    setting.fadeduration=parseInt(setting.fadeduration) 
    setting.curimage=(setting.persist)? simpleGallery.routines.getCookie("gallery-"+setting.wrapperid) : 0 
    setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty 
    setting.preloadfirst=(!jQuery.Deferred)? false : (typeof setting.preloadfirst!="undefined")? setting.preloadfirst : true //Boolean on whether to preload all images before showing gallery 
    setting.ispaused=!setting.autoplay[0] //ispaused reflects current state of gallery, autoplay[0] indicates whether gallery is set to auto play 
    setting.currentstep=0 //keep track of # of slides slideshow has gone through 
    setting.totalsteps=setting.imagearray.length*setting.autoplay[2] //Total steps limit: # of images x # of user specified cycles 
    setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide) 
    setting.oninit=setting.oninit || function(){} 
    setting.onslide=setting.onslide || function(){} 
    var preloadimages=[], longestdesc=null, loadedimages=0 
    var dfd = (setting.preloadfirst)? jQuery.Deferred() : {resolve:function(){}, done:function(f){f()}} //create real deferred object unless preloadfirst setting is false or browser doesn't support it 
    setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains "" 
    setting.$loadinggif=(function(){ //preload and ref ajax loading gif 
        var loadgif=new Image() 
        loadgif.src=simpleGallery_navpanel.loadinggif 
        return jQuery(loadgif).css({verticalAlign:'middle'}).wrap('<div style="position:absolute;text-align:center;width:100%;height:100%" />').parent() 
    })() 
    for (var i=0; i<setting.imagearray.length; i++){  //preload slideshow images 
        preloadimages[i]=new Image() 
        preloadimages[i].src=setting.imagearray[i][0] 
        if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length) 
            setting.longestdesc=setting.imagearray[i][3] 
        jQuery(preloadimages[i]).bind('load error', function(){ 
            loadedimages++ 
            if (loadedimages==setting.imagearray.length){ 
                dfd.resolve() //indicate all images have been loaded 
            } 
        }) 
    } 
    var slideshow=this 
    jQuery(document).ready(function($){ 
        var setting=slideshow.setting 
        setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV 
        if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found 
            alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.") 
            return 
        } 
        setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide 
            .css({position:'absolute', left:0, top:0}) 
            .appendTo(setting.$wrapperdiv) 
        setting.$loadinggif.css({top:setting.dimensions[1]/2-30}).appendTo(setting.$wrapperdiv) //30 is assumed height of ajax loading gif 
        setting.gallerylayers=setting.$gallerylayers.get() //cache stacked DIVs as DOM objects 
        setting.navbuttons=simpleGallery.routines.addnavpanel(setting) //get 4 nav buttons DIVs as DOM objects 
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled) 
            setting.descdiv=simpleGallery.routines.adddescpanel(setting) 
        $(setting.navbuttons).filter('img.navimages').css({opacity:0.8}) 
            .bind('mouseover mouseout', function(e){ 
                $(this).css({opacity:(e.type=="mouseover")? 1 : 0.8}) 
            }) 
            .bind('click', function(e){ 
                var keyword=e.target.title.toLowerCase() 
                slideshow.navigate(keyword) //assign behavior to nav images 
            }) 
        dfd.done(function(){ //execute when all images have loaded 
            setting.$loadinggif.remove() 
            setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')}) 
            setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')}) 
            slideshow.showslide(setting.curimage) //show initial slide 
            setting.oninit.call(slideshow) //trigger oninit() event 
            $(window).bind('unload', function(){ //clean up and persist 
                $(slideshow.setting.navbuttons).unbind() 
                if (slideshow.setting.persist) //remember last shown image's index 
                    simpleGallery.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage) 
                jQuery.each(slideshow.setting, function(k){ 
                    if (slideshow.setting[k] instanceof Array){ 
                        for (var i=0; i<slideshow.setting[k].length; i++){ 
                            if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div 
                                slideshow.setting[k][i].innerHTML=null 
                            slideshow.setting[k][i]=null 
                        } 
                    } 
                    if (slideshow.setting[k].innerHTML) //catch gallerydesctext div 
                        slideshow.setting[k].innerHTML=null 
                    slideshow.setting[k]=null 
                }) 
                slideshow=slideshow.setting=null 
            }) 
        }) //end deferred code 
    }) //end jQuery domload 
}
simpleGallery.prototype={
    navigate:function(keyword){ 
        clearTimeout(this.setting.playtimer) 
        this.setting.totalsteps=100000 //if any of the nav buttons are clicked on, set totalsteps limit to an "unreachable" number 
        if (!isNaN(parseInt(keyword))){ 
            this.showslide(parseInt(keyword)) 
        } 
        else if (/(prev)|(next)/i.test(keyword)){ 
            this.showslide(keyword.toLowerCase()) 
        } 
        else{ //if play|pause button 
            var slideshow=this 
            var $playbutton=$(this.setting.navbuttons).eq(1) 
            if (!this.setting.ispaused){ //if pause Gallery 
                this.setting.autoplay[0]=false 
                $playbutton.attr({title:'Play', src:simpleGallery_navpanel.images[1]}) 
            } 
            else if (this.setting.ispaused){ //if play Gallery 
                this.setting.autoplay[0]=true 
                this.setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, this.setting.autoplay[1]) 
                $playbutton.attr({title:'Pause', src:simpleGallery_navpanel.images[3]}) 
            } 
            slideshow.setting.ispaused=!slideshow.setting.ispaused 
        } 
    },
    showslide:function(keyword){ 
        var slideshow=this 
        var setting=slideshow.setting 
        var totalimages=setting.imagearray.length 
        var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0) 
            : (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1) 
            : Math.min(keyword, totalimages-1) 
        setting.gallerylayers[setting.bglayer].innerHTML=simpleGallery.routines.getSlideHTML(setting.imagearray[imgindex])
        setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground 
            .stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete: 
                clearTimeout(setting.playtimer) 
                setting.gallerylayers[setting.bglayer].innerHTML=null  //empty bglayer (previously fglayer before setting.fglayer=setting.bglayer was set below) 
                try{ 
                    setting.onslide.call(slideshow, setting.gallerylayers[setting.fglayer], setting.curimage) 
                }catch(e){ 
                    alert("Simple Controls Gallery: An error has occured somwhere in your code attached to the \"onslide\" event: "+e) 
                } 
                setting.currentstep+=1 
                if (setting.autoplay[0]){ 
                    if (setting.currentstep<=setting.totalsteps) 
                        setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.autoplay[1]) 
                    else 
                        slideshow.navigate("play/pause") 
                } 
            }) //end callback function 
        setting.gallerylayers[setting.fglayer].style.zIndex=999 //foreground layer becomes background 
        setting.fglayer=setting.bglayer 
        setting.bglayer=(setting.bglayer==0)? 1 : 0 
        setting.curimage=imgindex 
        setting.navbuttons[3].innerHTML=(setting.curimage+1) + '/' + setting.imagearray.length 
        if (setting.imagearray[imgindex][3]){ //if this slide contains a description 
            setting.$descpanel.css({visibility:'visible'}) 
            setting.descdiv.innerHTML=setting.imagearray[imgindex][3] 
        } 
        else if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled) 
            setting.descdiv.innerHTML=null 
            setting.$descpanel.css({visibility:'hidden'})
        } 
    },
    showhidenavpanel:function(state){ 
        var setting=this.setting 
        var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1] 
        setting.$navpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration) 
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled) 
            this.showhidedescpanel(state) 
    },
    showhidedescpanel:function(state){ 
        var setting=this.setting 
        var endpoint=(state=="show")? 0 : -setting.descpanelheight 
        setting.$descpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration) 
    } 
}
simpleGallery.routines={
    getSlideHTML:function(imgelement){ 
        var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide? 
        layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0" />' 
        layerHTML+=(imgelement[1])? '</a>' : '' 
        return layerHTML //return HTML for this layer 
    },
    addnavpanel:function(setting){ 
        var interfaceHTML='' 
        for (var i=0; i<3; i++){ 
            var imgstyle='position:relative; border:0; cursor:hand; cursor:pointer; top:'+simpleGallery_navpanel.imageSpacing.offsetTop[i]+'px; margin-right:'+(i!=2? simpleGallery_navpanel.imageSpacing.spacing+'px' : 0) 
            var title=(i==0? 'Prev' : (i==1)? (setting.ispaused? 'Play' : 'Pause') : 'Next') 
            var imagesrc=(i==1)? simpleGallery_navpanel.images[(setting.ispaused)? 1 : 3] : simpleGallery_navpanel.images[i] 
            interfaceHTML+='<img class="navimages" title="' + title + '" src="'+ imagesrc +'" style="'+imgstyle+'" /> ' 
        } 
        interfaceHTML+='<div class="gallerystatus" style="margin-top:1px">' + (setting.curimage+1) + '/' + setting.imagearray.length + '</div>' 
        setting.$navpanel=$('<div class="navpanellayer"></div>') 
            .css({position:'absolute', width:'100%', height:setting.panelheight, left:0, top:setting.dimensions[1], font:simpleGallery_navpanel.panel.fontStyle, zIndex:'1001'}) 
            .appendTo(setting.$wrapperdiv) 
        $('<div class="navpanelbg"></div><div class="navpanelfg"></div>') //create inner nav panel DIVs 
            .css({position:'absolute', left:0, top:0, width:'100%', height:'100%'}) 
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"navpanelbg" div 
            .eq(1).css({paddingTop:simpleGallery_navpanel.panel.paddingTop, textAlign:'center', color:'white'}).html(interfaceHTML).end() //"navpanelfg" div 
            .appendTo(setting.$navpanel) 
        return setting.$navpanel.find('img.navimages, div.gallerystatus').get() //return 4 nav related images and DIVs as DOM objects 
    },
    adddescpanel:function(setting){ 
        setting.$descpanel=$('<div class="gallerydesc"><div class="gallerydescbg"></div><div class="gallerydescfg"><div class="gallerydesctext"></div></div></div>') 
            .css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1001'}) 
            .find('div').css({position:'absolute', left:0, top:0, width:'100%'}) 
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"gallerydescbg" div 
            .eq(1).css({color:'white'}).end() //"gallerydescfg" div 
            .eq(2).html(setting.longestdesc).end().end() 
            .appendTo(setting.$wrapperdiv) 
        var $gallerydesctext=setting.$descpanel.find('div.gallerydesctext') 
        setting.descpanelheight=$gallerydesctext.outerHeight() 
        setting.$descpanel.css({top:-setting.descpanelheight, height:setting.descpanelheight}).find('div').css({height:'100%'}) 
        return setting.$descpanel.find('div.gallerydesctext').get(0) //return gallery description DIV as a DOM object 
    },
    getCookie:function(Name){ 
        var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair 
        if (document.cookie.match(re)) //if cookie found 
            return document.cookie.match(re)[0].split("=")[1] //return its value 
        return null 
    },
    setCookie:function(name, value){ 
        document.cookie = name+"=" + value + ";path=/" 
    } 
}
</script>
<script type="text/javascript">
var mygallery=new simpleGallery({ 
    wrapperid: "simplegallery1", //ID of main gallery container, 
    dimensions: [500, 500], //width/height of gallery in pixels. 
Should reflect dimensions of the images exactly 
    imagearray: [ 
        ["PONER URL DE LA IMAGEN 1", "#", "_new", "LA DESCRIPCION"],
        ["PONER PONER URL DE LA IMAGEN 2", "#", "_new", "LA DESCRIPCION "],
        ["PONER URL DE LA IMAGEN 3","#", "_new", "LA DESCRIPCION "],
        ["PONER URL DE LA IMAGEN 4", "#", "_new", "LA DESCRIPCION "],

    ], 
    autoplay: [true2000, 20], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int] 
    persist: false, //remember last viewed slide and recall within same session? 
    fadeduration: 500, //transition duration (milliseconds) 
    oninit:function(){ //event that fires when gallery has initialized/ ready to run 
        //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause")) 
    }, 
    onslide:function(curslide, i){ //event that fires after each slide is shown 
        //Keyword "this": references current gallery instance 
        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML) 
        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc) 
    } 
})
</script>
<div id="simplegallery1"></div>
                                                                                                          

54 comentarios:

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. HOla, Intente aplicar el turorial, y cuando publico no aparece el slide, que puede haber hecho , mal?
    silvina

    ResponderEliminar
  3. Respuestas
    1. Lo publicas o lo estas viendo en vista previa? Tienes que publicarlo. Pásame el html, pero sq no tiene mas la cosa, si no has borrado ninguna " el html debería estar bien...mira si se te ha olvidado pegar un > o < del principio o del final del codigo. (mandame un correo mejor, en contactanos lo tienes)

      Eliminar
  4. Hola buenas intente hacer tu tutorial y me salio solo el error que me sale fue que al poner el tamaño del contorno donde aparecera la imagen se agranda y las imagenes que ya las tengo del mismo tamaño pero sale la mitad osea no cubre todo el contorno intente poner mas grande la imagen y no se arregla el problema le pido porfa que me ayudes

    ResponderEliminar
    Respuestas
    1. Hola Lenny, prueba a hacer las imagenes mas pequeñas a ver que pasa, sq no tiene mas la cosa que lo que comento en el vídeo :S: saludos

      Eliminar
  5. Hola, a mí me pasa lo mismo que a Silvina. Lo he puesto en una entrada en la que hay más texto. He copiado todo y me sigue no apareciendo ni en vista previa ni publicado. Todo el code html está puesto correctamente ¿qué más puede ser?

    ResponderEliminar
    Respuestas
    1. Hola Merce, pues no puede ser nada mas, a no ser que sea una plantilla descargada o dinámica, que dan problemas al añadir cosas. saludos

      Eliminar
    2. En el momento en el que redactas algo el código deja de funcionar. Yo tuve que prepararlo todo en un blog de notas y pegarlo todo junto en edición html.

      Eliminar
  6. Hola. Y si queremos colocar texto al lado de la galería de imágenes? :)

    ResponderEliminar
    Respuestas
    1. Hola. Vídeo 40, http://www.youtube.com/playlist?list=PLxrlSPzTYmSweRY4a2adrDLHrHX77ebTm . No lo he probado con una galería de imagenes (solo con una imagen fija), pero puedes probarlo a ver si sale. saludos

      Eliminar
    2. No supe insertar la galería dentro del código . Al final usé la primera solución que apuntan en está página:
      (http://es.forums.wordpress.com/topic/problema-al-colocar-2-imagenes-una-junto-a-otra)
      Copié el código de la galería como imagen izquierda y el texto como imagen derecha y listo.
      El problema es situar el texto en la altura correcta, que se puede hacer dejando espacios, o ajustar el margen para separarlo de la galeria, cosa que no supe hacer. Pero bueno, la entrada quedó bastante bien.


      Grácias por responder y grácias por hacer este blog, me ha ayudado mucho.

      Eliminar
  7. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  8. EL TUTO FUNCIONA PERFECTO GRACIAS UN SALUDO

    ResponderEliminar
    Respuestas
    1. A ti por comentar, me alegro de que te haya servido. saludos

      Eliminar
  9. EL CODIGO FUNCIONA PERFECTAMENTE TENER CUIDADO NO MOVER NINGUN CARACTER SI SE DESORDENA DEJA DE FUNCIONAR GRACIAS IRIS

    ResponderEliminar
  10. Hola me gustaría saber como se puede poner una imagen entre las entradas ya publicadas del tipo deja tu comentario o algo similar.Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola elena. SI quieres poner algo en entradas ya publicadas, deberás ir haciendolo de una en una. Creando la imagen y poniendola. saludos

      Eliminar
  11. Pego el código en una entrada nueva y lo que sale es una copia de dicho código
    Si me permites un consejo de novato, es muy difícil "subir abajo"

    ResponderEliminar
    Respuestas
    1. Hola Juan Manuel, como comento en el video, tiene que ponerse en HTML no en Redactar. saludos

      Eliminar
  12. disculpa me sale todo chevre pero como podria centrar la galeria? me sale hacia un costaado

    ResponderEliminar
  13. Hola:

    Me ha funcionado perfectamente. ¿Alguien sabría decirme cómo se centra la ventana de la imagen en la entrada y cómo se puede hacer la ventana más grande?
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola, no se si has visto el video entero pero explico lo de las medidas ahi...saludos

      Eliminar
  14. HOLA MUY BUEN VIDEO. ME GUSTARIA SABER SI ME PUEDES DECIR COMO CENTRAR EL CUADRO DE LA GALERIA QUE NO SE EXPANDA DEL LADO IZQUERDO SINO DEL CENTRO, PARA QUE LA GALERIA QUEDE EN EL CENTRO DEL BLOG, O EN SU DEFECTO LAS IMAGENES EN EL CENTRO DE LA GALERIA, IMAGINO QUE ES CON LA PROPIEDAD < CENTER> O STYLE="CENTER" PERO NO ESTOY CLARO DE DONDE PONERLA.. GRACIAS POR EL APORTE.

    ResponderEliminar
  15. A MIRA POR SI QUIERES VER A QUE ME REFIERO ESTE ES EL LINK DE LA GALERIA http://imaginaysublima.blogspot.com/2015/05/galeria-franelas.html

    ResponderEliminar
  16. Hola:

    He subido unas galerías de imágenes a mi blog. Las inserto en las entradas y funcionan bien en la vista previa, pero tras publicarlas, no aparecen en la entrada y, en cambio, aparece la galería de otra entrada. ¿Por qué puede ser?
    Gracias de antemano.
    Un saludo.

    ResponderEliminar
  17. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  18. como se centra el panel completo, no lo quiero pegado al borde lo quiero en el centro, como hago eso

    ResponderEliminar
  19. y si quiero agregar mas de cuatro imagenes a la galeria como le hago, lo intente pero ahora no me despliega nada

    ResponderEliminar
  20. He subido unas galerías de imágenes a mi blog. Las inserto en las entradas y funcionan bien en la vista previa, pero tras publicarlas, no aparecen en la entrada y, en cambio, aparece la galería de otra entrada. ¿Por qué puede ser?

    ResponderEliminar
  21. NO ME A FUNCIONADO NADA !!! NO ME APARECE POR NINGÚN LADO ¿ QUE SUCEDE? !!!!

    ResponderEliminar
    Respuestas
    1. Hola. SI tienes una plantilla descargada o dinámica puede darte problemas. Si no es el caso, mira que has copiado bien el código y has puesto la imagenes donde tocan sin borrar ningún "simbolo" que no tengas que borrar...saludos

      Eliminar
  22. Hola Gracias por tan excelente aporte sin embargo, me sale en la la entrada el siguiente dialogo:

    DIV whiht ID "simplegallery1"


    y en la entrada se visualiza este mensaje´

    /*Make sure your page contains a valid doctype at the top*/ #simplegallery1{ //CSS for Simple Gallery Example 1 position: relative; /*keep this intact*/ visibility: hidden; /*keep this intact*/ border: 1px solid #666; } #simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined) text-align: left; padding: 2px 5px; font: 10px normal verdana, arial; } var simpleGallery_navpanel={ loadinggif: 'http://2.bp.blogspot.com/-ksi5eL8Tbnw/TlVybEe2EeI/AAAAAAAAExc/bzJY4U3_5Dk/s400/ajaxload.gif', //full path or URL...


    Podrìas ayudarme a que no genere este mensaje.

    ResponderEliminar
  23. corrijo al actualizar el blog sale un mensaje que dice ERROR: DIV whit ID "simplegallery1" no found on page

    ResponderEliminar
  24. hola, como puedo crear otra galeria de imagenes en una pagina de blog, intento pero no me sale, tengo una pagina de fotos hay quiero poner varias galerias de imaganes

    ResponderEliminar
    Respuestas
    1. Hola. Hay galerías que solo dejan poner una de ese tipo porque los códigos se solapan :(. saludos

      Eliminar
  25. muy bueno y motivante muchos saludos sigan así, pasen por mi blog
    http://dimitriovich.blogspot.com/

    ResponderEliminar
  26. como podría insertar un texto debajo del slider (o antes ...me da lo mismo). GRACIAS

    ResponderEliminar
  27. hola sabes como poner varias imágenes en fila o en línea, en una pagina de blogger; ya que normalmente te deja poner dos imágenes, una a la derecha y otra a la izquierda.

    ResponderEliminar
  28. que salga algo así como sale en el buscador de imágenes de google. Gracias

    ResponderEliminar
  29. ¡Funciona! Muchas gracias por todo lo que he aprendido con tus videos.

    ResponderEliminar
  30. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  31. logre hacerlo aunque la descripción no me aparece en ninguna de las imagenes pero me gusto.. Muchas gracias.

    ResponderEliminar
  32. Hola los felicito por sus enseñanzas muy buenos todos los videos. por favor serian tan amables y envían el codigo html para la ventana emergente que pasea por toda la pagina gracias

    ResponderEliminar
  33. al actualizar el blog sale un mensaje que dice ERROR: DIV whit ID "simplegallery1" no found on page
    y en la entrada el siguiente texto:
    y en la entrada se visualiza este mensaje´

    /*Make sure your page contains a valid doctype at the top*/ #simplegallery1{ //CSS for Simple Gallery Example 1 position: relative; /*keep this intact*/ visibility: hidden; /*keep this intact*/ border: 1px solid #666; } #simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined) text-align: left; padding: 2px 5px; font: 10px normal verdana, arial; } var simpleGallery_navpanel={ loadinggif: 'http://2.bp.blogspot.com/-ksi5eL8Tbnw/TlVybEe2EeI/AAAAAAAAExc/bzJY4U3_5Dk/s400/ajaxload.gif', //full path or URL...
    te puedo pasar mi hmtl si quieres

    ResponderEliminar
  34. HOLA ME SALE UNA ADVERTENCIA AL COPIAR

    Esta página contiene recursos HTTP. Si el blog se ve a través de HTTPS, pueden darse errores de contenido mixto que afecten a la seguridad y a la experiencia del usuario.
    Reparar Ignorar Más información
    script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"

    ResponderEliminar
  35. Porque no contesta su blog esta gente todas las preguntas que quiero saber no las responde.....

    al actualizar el blog sale un mensaje que dice ERROR: DIV whit ID "simplegallery1" no found on page

    Ese mensaje sale en la pagina principal solamente.

    ResponderEliminar
  36. 14/09/2019 Aplicando el código HTML y excelente....gracias

    ResponderEliminar
  37. Gracias por tu tutorial. Me fue muy util. Lo unico es que despues de hacerlo, al dia siguiente las fotos desaparecieron... Y es que creo que al hacerlo me salio un mensaje de error, respecto a los Http....
    A alguien le ha salido esto? Help!
    Graciassssssss

    ResponderEliminar

  38. Esta página contiene recursos HTTP. Si el blog se ve a través de HTTPS, pueden darse errores de contenido mixto que afecten a la seguridad y a la experiencia del usuario.
    Reparar Ignorar Más información
    script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"
    Responder

    ResponderEliminar
  39. puedes actualizar todos los videos en bloger en blogger

    ResponderEliminar