mooLabeler, script desarrollado con MooTools que básicamente nos permitirá agregar a nuestras imagen un poco de información extra. El efecto es sencillo, pero agradable. Se activa al pasar nuestro ratón sobre la imagen, generando un efecto de desplazamiento y agregando en la parte inferior el texto que hemos agregado en nuestro atributo “title” que acompaña a nuestra imagen.
Al bajar los archivos he notado que también nos brinda otro archivo con el cual podremos generar Lightbox agradables utilizando MooTools.
Agregar info. extra en nuestras imágenes, haciendo uso del atributo "title". Ver demo
Instalacion:
Descargamos el script mooLabeler, Y alojaremos los archivos en nuestro servidor.
Realizar la llamada correspondientes al script, y añadir un poco de css. Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >
.imageLabel
{
position:relative;
}
.divLabel
{
position:absolute;
background:#ffffff;
border:1px solid #000000;
padding: 3px;
}
</style>
<script type="text/javascript" src="mootools.release.57.js"></script>
<script type="text/javascript">
/**
* @author Bruno 'Shine' Figueiredo - http://www.brunofigueiredo.com
* @version 1.0
*/
var mooLabeler = {
setup: function()
{
document.getElements("img").each(function(image){
if (image.title && image.title.length> 0)
{
// attach over event
image.onmouseover = mooLabeler.showLabel.bindAsEventListener(image);
// attach out event
image.onmouseout = mooLabeler.hideLabel.bindAsEventListener(image);
// create label container
var divLbl = new Element("span");
divLbl.setProperty("class","divLabel");
// set position
divLbl.setStyle("top",image.getTop()+parseInt(image.getStyle("height"))-10+"px");
divLbl.setStyle("left",image.getLeft()+"px");
// set correct size based on borders and padddings
var borderL = parseInt(divLbl.getStyle("border-left-width"));
var borderR = parseInt(divLbl.getStyle("border-right-width"));
var paddingL = parseInt(divLbl.getStyle("padding-left"));
var paddingR = parseInt(divLbl.getStyle("padding-left"));
var imgW = parseInt(image.getStyle("width"));
divLbl.setStyle("width", imgW-((borderL+borderR)+(paddingL+paddingR)) +"px");
divLbl.setHTML(image.title);
divLbl.injectAfter(image);
image.title = "";
// sets image and label effects
image.efx = {
img : image.effects({duration: 200, transition: Fx.sineOut}),
lbl : divLbl.effects({duration: 200, transition: Fx.sineOut})
};
divLbl.setOpacity(0);
}
});
},
showLabel: function()
{
this.efx.img.clearTimer();
this.efx.img.custom({'top': [parseInt(this.getStyle('top')), -10]});
this.efx.lbl.clearTimer();
this.efx.lbl.custom({'opacity': [parseInt(0), 1]});
},
hideLabel: function()
{
this.efx.img.clearTimer();
this.efx.img.custom({'top': [parseInt(this.getStyle('top')), 0]});
this.efx.lbl.clearTimer();
this.efx.lbl.custom({'opacity': [parseInt(this.getStyle('opacity')), 0]});
}
}
window.onload = function(){
mooLabeler.setup();
};
</script>
Uso. Aprovechamos nuestro atributo title
Galeria: Generar Lightbox con MooTools. Ver demo
Instalacion:
Descargamos el script, Y alojaremos los archivos en nuestro servidor.
Realizar la llamada correspondientes al script, Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >
<script type="text/javascript">
/**
* @author Bruno 'Shine' Figueiredo - http://www.brunofigueiredo.com
* @version 1.0
*/
/**
* Handles the image gallery
*/
var galleryManager =
{
/**
* the overlay html element
*/
objOverlay:null,
/**
* the gallery html element
*/
objGallery:null,
/**
* the image container html element
*/
objImageContainer:null,
/**
* the image html element
*/
objImage:null,
/**
* overlay opacity effects object
*/
efxOverlay:null,
/**
* image container opacity effects object
*/
efxImageContainer:null,
/**
* image container width effects object
*/
efxImageContainerW:null,
/**
* image container height effects object
*/
efxImageContainerH:null,
/**
* image effects object
*/
efxImage:null,
/**
* shows the overlay html element
*/
show: function()
{
this.efxOverlay.custom(0,0.8);
this.objGallery.setStyle("display","");
},
/**
* hides the overlay html element
*/
hide: function()
{
this.efxOverlay.hide();
},
/**
* Setups the gallery
*/
setup: function()
{
// gets the Body
var objBody = document.getElementsByTagName("body").item(0);
// creates overlay and sets its properties
this.objOverlay = new Element("div");
this.objOverlay.id = "overlay";
this.objOverlay.setStyle("width",Window.getWidth());
this.objOverlay.setStyle("height",Window.getHeight());
objBody.appendChild(this.objOverlay);
// creates overlay opacity effects
this.efxOverlay = this.objOverlay.effect("opacity",{duration:300});
this.efxOverlay.hide();
// attach click event to overlay
this.objOverlay.addEvent("click",galleryManager.close);
// creates gallery div
this.objGallery = new Element("div");
this.objGallery.id = "imgGallery";
this.objGallery.setStyle("display","none");
objBody.appendChild(this.objGallery);
this.objGallery.addEvent("click",galleryManager.close);
// creates image container div inside de gallery div
this.objImageContainer = new Element("div");
this.objImageContainer.id = "imageContainer";
this.objGallery.appendChild(this.objImageContainer);
this.objImageContainer.addEvent("click",galleryManager.close);
// creates the image container effects
this.efxImageContainer = this.objImageContainer.effect("opacity",{duration:300});
this.efxImageContainerW = this.objImageContainer.effect("width",{duration:600});
this.efxImageContainerH = this.objImageContainer.effect("height",{duration:600, onComplete:function(){
galleryManager.efxImage.custom(0,1);}});
this.efxImageContainer.hide();
// creates the image element inside the imageContainer div
this.objImage = new Element("img");
this.objImage.id = "img";
this.objImageContainer.appendChild(this.objImage);
this.objImage.addEvent("click",galleryManager.close);
//creates the image effects
this.efxImage = this.objImage.effect("opacity",{duration:300});
this.efxImage.hide();
// gets all images to be handle by this
document.getElements("a").each(function(anchor){
if (anchor.rel.toLowerCase().match("mootoolsgallery"))
{
// attach click event
anchor.onclick = galleryManager.loadImage.bindAsEventListener(anchor);
}
});
},
/**
* Loads the image viewer
*/
loadImage: function()
{
galleryManager.show();
var imgToLoad = new Image();
imgToLoad.onload = function(){
galleryManager.objImageContainer.setStyle("top","20px");
galleryManager.efxImageContainer.custom(0,1);
galleryManager.efxImageContainerH.custom(galleryManager.objImageContainer.offsetHeight,imgToLoad.height);
galleryManager.efxImageContainerW.custom(galleryManager.objImageContainer.offsetWidth,imgToLoad.width);
galleryManager.objImage.src=imgToLoad.src;
};
imgToLoad.src = this.href;
return false;
},
/**
* closes the image viewer
*/
close: function()
{
galleryManager.efxImage.hide();
galleryManager.efxImageContainer.hide();
galleryManager.objGallery.setStyle("display","none");
galleryManager.hide();
}
}
window.onload = function()
{
galleryManager.setup();
}
</script>
tambien agregamos un poco de estilo
#imgGallery{
position: absolute;
top: 40px;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#overlay
{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
#imageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
padding:10px;
}
img{
border:none;
}
</style>
Uso:
Via anieto2k
2 Comentarios por usuarios
gracias por los recursos,
Excelente gracias !!