Como crear una galería de imágenes para Blogger
Una carga de imágenes ligera, rápida y realmente hermosa que a todos los bloggers les encantara y sobre todo que les muestre una galería de imágenes controlable, en la cual se pueden mostrar una galería completa, con avances, retrocesos, pausa, texto, y un link en cada imagen para dirigir a su post o artículo que quiera mostrar. En este tutorial vamos a usar jQuery, JavaScript, CSS y HTML, bueno realmente es un solo widget en la cual ustedes van a insertar el código que les proporcionare, Una vez más he tratado que su instalación sea fácil y de primera. Así que sólo tienen que copiar y pegar el código dentro de un widget de blogger para que las cosas funcionen.Pueden ver su demostración en el siguiente blog de demos, ubicado en el sidebar
Video Tutorial ¿Cómo crear una galería de imágenes online Gratis?
Instalación de la Galería de imágenes en Blogger
1.- Inicie sesión en su cuenta de Blogger
2.- Un clic en "Diseño"
3.- Un clic en "Añadir un gadget" luego seleccione un widget "HTML/Javascript" ábralo
4.- Inserte el siguiente código en su interior
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<style type="text/css">
#simplegallery1{
position: relative;
visibility: hidden;
border: 1px solid #666;
}
#simplegallery1 .gallerydesctext{
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/AVvXsEj9UNhy1ykP0RxIofn69mrBv1Lf6P_NIyoMEGsGS4f2QVHz7k0H9qPoX1MY5ZI6GeJu5m9-w6eU6Dmy2ParOmfqKoYzFRA1CyQMPYOeVPn_3Y-ZpIM7k30RDfobyI7uqD_pyDM7gqG0EII/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/AVvXsEgIXzDXEXgMMlYcbxQWE3LOPplNL8Bc8BIVBZRV4mYGiNeiYPVzDiV2kAOLq8rKbzyKNQXUyFpJ7QlQ8F8hGeXBvpgyXDvTcRu4qAGuanjjcK70OUSheswzOset26Chbvm7VVASciwumeE/s400/left.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLpD9WlMBTAc8ShaUvSrNjgXJKT3O3gPRB0AyQ2mZJc_NO8HCztYuaBwqBygh8zJnQIeweNtsKkZxbocMfMxOA_-neaktVzc_VYVrdtUgt1cc9RNdMrfkVcXKbVvqplIF7jIEuYWVf188/s400/play.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBIv6Geoe1Wx8EckA0KGsbEsM8vT1BCjazeNJDqYbh4-AEdqLb-Srp-z5euDWtDZfkP1379bn6nGWPobVHtnP65AOd-gvybugZpEAL79TS5ZXvzBy7nA-nvRhyphenhyphenagXihHr5fOtVHvdOUro/s400/right.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtv6mp8Io-R_fA6pFx95g9q0SroDyBj7LlARly3EWBgMFMmP5y7Bu-yo4jboSUUdHrc0tGZq6UUj_aLgJfXxOgsWgZx9ntkqaDcyt62YSgfJ-NX4T7gGXrnEOpzn1OBevJRl6vnDD3BU8/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: [300, 200],
imagearray: [
["PONER EL LINK DE LA IMAGEN 1", "#", "_new", "LA DESCRIPCION"],
["PONER EL LINK DE LA IMAGEN 2", "#", "_new", "LA DESCRIPCION "],
["PONER EL LINK DE LA IMAGEN 3","#", "_new", "LA DESCRIPCION "],
["PONER EL LINK DE LA IMAGEN 4", "#", "_new", "LA DESCRIPCION "],
["PONER EL LINK DE LA IMAGEN 5", "#", "_new", "LA DESCRIPCION "]
],
autoplay: [true, 2000, 20], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false,
fadeduration: 500,
oninit:function(){
},
onslide:function(curslide, i){
}
})
</script>
<div id="simplegallery1"></div>
Ahora cuidadosamente realice los siguientes cambios:
1.- Cambie el tamaño de todas sus imágenes a un tamaño fijo. Para cambiar el tamaño de edición de imagen lo podrá realizar donde está marcado de color amarillo 300, 200 donde 300 es el ancho y 200 es la altura. Si sus imágenes son de mayor tamaño entonces se recortarán y no cambiaran de tamaño, pero si serán mostrados. Así que es mejor cambiar el tamaño manualmente de las imágenes y lo puede realizar en Photoshop o en cualquier otro software que usted utilice y proceda a continuar.
2.- Suba sus imágenes a Blogger y luego copie el enlace de su imagen que se encuentra después de “scr” y remplace donde dice “PONER EL LINK DE LA IMAGEN 1”, haga esto para todas las imágenes que desee subir y también remplace por los que siguen a continuación con su respectivo link, como, “PONER EL LINK DE LA IMAGEN 2”, “PONER EL LINK DE LA IMAGEN 3”, etc.
3.- Remplace # con el enlace de la página, la cual cuando un visitante le dé un clic a cualquier imagen, les llevara a una página que usted quiere que vean de su blog de blogger. Pero si usted no desea poner un link para que se abra cualquier post suyo, solo tiene que borrar # y no les llevara a ninguna pagina.
4.- Remplace “LA DESCRIPCION”, por cualquier información que usted desee poner. Esta descripción aparecerá en la parte superior de la imagen cuando un usuario pase el cursor sobre ella. Si no deseas escribir ninguna descripción, solo borra “LA DESCRIPCION”, y no te aparecerá ninguna información.
5.- Si no desea que las imágenes se reproduzca automáticamente, deberás desactivar la reproducción automática. Has estos cambios, cambia de true a false
6.- Para cambiar el intervalo de tiempo entre diapositivas solo necesitaras editar 2000 por el valor que usted desee.
¡Eso es todo!
7.- Por ultimo de un clic en "Guardar" y listo
¿Necesitas ayuda?
Cualquier pregunta no duden en escribir
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
144 comentarios: