Professional Documents
Culture Documents
1.2.3.4.-
<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: 'http://2.bp.blogspot.com/ksi5eL8Tbnw/TlVybEe2EeI/AAAAAAAAExc/bzJY4U3_5Dk/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: [ 'http://2.bp.blogspot.com/LzMDVlVfxmQ/TlVybqSABOI/AAAAAAAAEx8/riOJdIu1eRc/s400/left.gif',
'http://1.bp.blogspot.com/ZkATWoPt8Q8/TlVybVMA4xI/AAAAAAAAExs/zoAjOL7erWY/s400/play.gif',
'http://4.bp.blogspot.com/-IlIucHdUM-I/TlVybkMej0I/AAAAAAAAEx0/yQvxGpaQVc/s400/right.gif', 'http://1.bp.blogspot.com/qdHg1fyty6A/TlVybOlRciI/AAAAAAAAExk/oio-_kn2KO8/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
}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]+'"
</script>
<div id="simplegallery1"></div>
Ahora cuidadosamente realice los siguientes cambios:
1.- Cambie el tamao de todas sus imgenes a un tamao fijo. Para cambiar el tamao
de edicin 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 imgenes son de mayor tamao
entonces se recortarn y no cambiaran de tamao, pero si sern mostrados. As que es
mejor cambiar el tamao manualmente de las imgenes y lo puede realizar en
Photoshop o en cualquier otro software que usted utilice y proceda a continuar.
2.- Suba sus imgenes a blogger y luego copie el enlace de su imagen que se encuentra
despus de scr y remplace donde dice PONER EL LINK DE LA IMAGEN
1, haga esto para todas las imgenes que desee subir y tambin remplace por los que
siguen a continuacin 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 pgina, la cual cuando un visitante le d un clic a
cualquier imagen, les llevara a una pgina 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 informacin que usted desee poner.
Esta descripcin aparecer en la parte superior de la imagen cuando un usuario pase el
cursor sobre ella. Si no deseas escribir ninguna descripcin, solo borra LA
DESCRIPCION, y no te aparecer ninguna informacin.
5.- Si no desea que las imgenes se reproduzca automticamente, debers desactivar la
reproduccin
automtica.
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!
Atte.
Juan