Xyberneticos

<style>
            .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>

<script type="text/javascript" src="mootools.release.52.js"></script>
        <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>