1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Javascript

Discussão em 'Web Development' iniciada por Morphine0225, 14 de Maio de 2009. (Respostas: 3; Visualizações: 1417)

  1. Morphine0225

    Morphine0225 Power Member

    Viva pessoal!

    Mais uma vez venho aqui pedir a vossa ajuda.

    Tou com um enorme problema num código javascript num site que fiz...

    www.engrambikes.com


    Se não deixarmos carregar a página por completo e clicarmos numa imagem, ela vai abrir numa página a parte sem ser como o desejado que é numa janela "popup" toda bonitinha.

    Já tive a pensar num <body onload> ou algo assim mas não sei como fazer...



    Código Javascript utilizado:
    Código:
    //POPUP Imagens
    var loadingImage = 'images/loading.gif';        
    var closeButton = '';        
    
    function getPageScroll(){
    
        var yScroll;
    
        if (self.pageYOffset) {
            yScroll = self.pageYOffset;
        } else if (document.documentElement && document.documentElement.scrollTop){
            yScroll = document.documentElement.scrollTop;
        } else if (document.body) {
            yScroll = document.body.scrollTop;
        }
    
        arrayPageScroll = new Array('',yScroll) 
        return arrayPageScroll;
    }
    
    
    function getPageSize(){
        
        var xScroll, yScroll;
        
        if (window.innerHeight && window.scrollMaxY) {    
            xScroll = document.body.scrollWidth;
            yScroll = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight){
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else {
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
        
        var windowWidth, windowHeight;
        if (self.innerHeight) {
            windowWidth = self.innerWidth;
            windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) {
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else if (document.body) {
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }    
        
        if(yScroll < windowHeight){
            pageHeight = windowHeight;
        } else { 
            pageHeight = yScroll;
        }
    
        if(xScroll < windowWidth){    
            pageWidth = windowWidth;
        } else {
            pageWidth = xScroll;
        }
    
        arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
        return arrayPageSize;
    }
    
    
    function pause(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
    }
    
    
    function getKey(e){
        if (e == null) {
            keycode = event.keyCode;
        } else {
            keycode = e.which;
        }
        key = String.fromCharCode(keycode).toLowerCase();
        
        if(key == 'x'){ hideLightbox(); }
    }
    
    
    function listenKey () {    document.onkeypress = getKey; }
    
    
    function showLightbox(objLink)
    {
        var objOverlay = document.getElementById('overlay');
        var objLightbox = document.getElementById('lightbox');
        var objCaption = document.getElementById('lightboxCaption');
        var objImage = document.getElementById('lightboxImage');
        var objLoadingImage = document.getElementById('loadingImage');
        var objLightboxDetails = document.getElementById('lightboxDetails');
        
        var arrayPageSize = getPageSize();
        var arrayPageScroll = getPageScroll();
    
        if (objLoadingImage) {
            objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
            objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');
            objLoadingImage.style.display = 'block';
        }
    
        objOverlay.style.height = (arrayPageSize[1] + 'px');
        objOverlay.style.display = 'block';
    
        imgPreload = new Image();
    
        imgPreload.onload=function(){
            objImage.src = objLink.href;
    
            var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
            var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);
            
            objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
            objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";
    
    
            objLightboxDetails.style.width = imgPreload.width + 'px';
            
            if(objLink.getAttribute('title')){
                objCaption.style.display = 'block';
                objCaption.innerHTML = objLink.getAttribute('title');
            } else {
                objCaption.style.display = 'none';
            }
            
            if (navigator.appVersion.indexOf("MSIE")!=-1){
                pause(250);
            } 
    
            if (objLoadingImage) {    objLoadingImage.style.display = 'none'; }
    
            selects = document.getElementsByTagName("select");
            for (i = 0; i != selects.length; i++) {
                    selects[i].style.visibility = "hidden";
            }
        
            objLightbox.style.display = 'block';
    
            arrayPageSize = getPageSize();
            objOverlay.style.height = (arrayPageSize[1] + 'px');
            
            listenKey();
    
            return false;
        }
    
        imgPreload.src = objLink.href;
        
    }
    
    
    function hideLightbox()
    {
        objOverlay = document.getElementById('overlay');
        objLightbox = document.getElementById('lightbox');
    
        objOverlay.style.display = 'none';
        objLightbox.style.display = 'none';
    
        selects = document.getElementsByTagName("select");
        for (i = 0; i != selects.length; i++) {
            selects[i].style.visibility = "visible";
        }
    
        document.onkeypress = '';
    }
    
    
    function initLightbox()
    {
        
        if (!document.getElementsByTagName){ return; }
        var anchors = document.getElementsByTagName("a");
    
        for (var i=0; i<anchors.length; i++){
            var anchor = anchors[i];
    
            if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
                anchor.onclick = function () {showLightbox(this); return false;}
            }
        }
    
        // the rest of this code inserts html at the top of the page that looks like this:
        //
        // <div id="overlay">
        //        <a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a>
        //    </div>
        // <div id="lightbox">
        //        <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image">
        //            <img id="closeButton" />        
        //            <img id="lightboxImage" />
        //        </a>
        //        <div id="lightboxDetails">
        //            <div id="lightboxCaption"></div>
        //            <div id="keyboardMsg"></div>
        //        </div>
        // </div>
        
        var objBody = document.getElementsByTagName("body").item(0);
        
        var objOverlay = document.createElement("div");
        objOverlay.setAttribute('id','overlay');
        objOverlay.onclick = function () {hideLightbox(); return false;}
        objOverlay.style.display = 'none';
        objOverlay.style.position = 'absolute';
        objOverlay.style.top = '0';
        objOverlay.style.left = '0';
        objOverlay.style.zIndex = '90';
         objOverlay.style.width = '100%';
        objBody.insertBefore(objOverlay, objBody.firstChild);
        
        var arrayPageSize = getPageSize();
        var arrayPageScroll = getPageScroll();
    
        var imgPreloader = new Image();
        
        imgPreloader.onload=function(){
    
            var objLoadingImageLink = document.createElement("a");
            objLoadingImageLink.setAttribute('href','#');
            objLoadingImageLink.onclick = function () {hideLightbox(); return false;}
            objOverlay.appendChild(objLoadingImageLink);
            
            var objLoadingImage = document.createElement("img");
            objLoadingImage.src = loadingImage;
            objLoadingImage.setAttribute('id','loadingImage');
            objLoadingImage.style.position = 'absolute';
            objLoadingImage.style.zIndex = '150';
            objLoadingImageLink.appendChild(objLoadingImage);
    
            imgPreloader.onload=function(){};
    
            return false;
        }
    
        imgPreloader.src = loadingImage;
    
        var objLightbox = document.createElement("div");
        objLightbox.setAttribute('id','lightbox');
        objLightbox.style.display = 'none';
        objLightbox.style.position = 'absolute';
        objLightbox.style.zIndex = '100';    
        objBody.insertBefore(objLightbox, objOverlay.nextSibling);
        
        var objLink = document.createElement("a");
        objLink.setAttribute('href','#');
        objLink.setAttribute('title','Clique para fechar');
        objLink.onclick = function () {hideLightbox(); return false;}
        objLightbox.appendChild(objLink);
    
        var imgPreloadCloseButton = new Image();
    
        imgPreloadCloseButton.onload=function(){
    
            var objCloseButton = document.createElement("img");
            objCloseButton.src = closeButton;
            objCloseButton.setAttribute('id','closeButton');
            objCloseButton.style.position = 'absolute';
            objCloseButton.style.zIndex = '200';
            objLink.appendChild(objCloseButton);
    
            return false;
        }
    
        imgPreloadCloseButton.src = closeButton;
    
        var objImage = document.createElement("img");
        objImage.setAttribute('id','lightboxImage');
        objLink.appendChild(objImage);
        
        var objLightboxDetails = document.createElement("div");
        objLightboxDetails.setAttribute('id','lightboxDetails');
        objLightbox.appendChild(objLightboxDetails);
    
        var objCaption = document.createElement("div");
        objCaption.setAttribute('id','lightboxCaption');
        objCaption.style.display = 'none';
        objLightboxDetails.appendChild(objCaption);
    
        var objKeyboardMsg = document.createElement("div");
        objKeyboardMsg.setAttribute('id','keyboardMsg');
        objKeyboardMsg.innerHTML = '<p style="color:#333; size:12px; text-decoration:none;}">Clique na imagem para fechar</p>';
        objLightboxDetails.appendChild(objKeyboardMsg);
    
    
    }
    
    
    function addLoadEvent(func)
    {    
        var oldonload = window.onload;
        if (typeof window.onload != 'function'){
            window.onload = func;
        } else {
            window.onload = function(){
            oldonload();
            func();
            }
        }
    
    }
    
    
    addLoadEvent(initLightbox);
    //FIM POPUP Imagens

    No HTML faço:
    Código:
    <a href="images/galeria/..." rel="lightbox"><img src="images/galeria/..." height="110" border="0" /></a>
    Agradecia toda a ajuda que me possam prestar, queria mesmo corrigir este bug...
    Onde se pode mesmo ver melhor este erro, por as imagens demorarem mais tempo a carregar, é na galeria. Na primeira página é rápido por vezes não dá pa ver o que digo.


    Cumps!!
    Morphine0225
     
  2. Morphine0225

    Morphine0225 Power Member

    Please help me!
     
  3. unsilent

    unsilent Power Member

    Boas, já pensaste em utilizar thumbnails que sejam mesmo thumbnails:). Há alguns scripts em php para automatizar o processo se não quiseres editar cada uma das imagens individualmente.

    Não consegui seguir o código todo, mas parece-me estranho que ele referencie 'images/loading.gif', e depois tenha esse comportamento(o loading serve para que?).
    Eventualmente podes tentar desabilitar o click nas imagens até que acabem de fazer o load...

    Da outra vez que tiveste o problema com a janela popUp, pus-me a brincar e escrevi isto:
    Código:
    <script type="text/javascript" language="javascript">
    this.ie=0;
    function popUp(URL){
    
    //var browser=navigator.appName;
    //var b_version=navigator.appVersion;
    //var version=parseFloat(b_version);
    //alert(browser,b_version,version)
    
    
    this.URL=URL;
    var newImg = new Image();
    newImg.src = URL;
    if (newImg.complete==0) {setTimeout('popUp(URL)', 200)}
    else{
    if(document.getElementById("Dark")){}
    else{
    var img = document.createElement("img");
    img.id = "img";
    img.setAttribute('src', ''+URL+'');
    var img_height = img.height;
    var img_width = img.width;
    
    var window_width=document.body.clientWidth;
    var window_height=window.innerHeight;
    
    if(window_height==undefined){//problemas do IE + uns css hacks
    bodystyle=document.body.style;
    bodystyle.margin="0";
    bodystyle.height="100%";
    bodystyle.overflow="auto";
    var window_width=document.body.clientWidth;
    var window_height=document.body.clientHeight;
    this.ie=1;
    }
    
    var margin_left=(window_width-img.width)/2;
    var margin_top=(window_height-img.height)/2;
    
    var divDark = document.createElement("div");
    divDark.id = "Dark";
    ds=divDark.style;
    ds.left = "0";ds.top = "0";ds.width="100%";ds.height="100%";ds.filter="alpha(opacity=60)";ds.opacity=".6";ds.position="fixed";
    if(ie){ds.position="absolute";}/*ie hack*/ds.backgroundColor="#000000";
    divDark.setAttribute("onclick","remove()");
    document.body.appendChild(divDark);
    
    var divpopUp = document.createElement("div");
    divpopUp.id = "popUp";
    divpopUp.setAttribute("align","center");
    ps=divpopUp.style;
    ps.margin = "0px auto";ps.position="absolute";ps.top=margin_top+"px";ps.left=margin_left+"px";ps.border="solid 5px #FFFFFF";
    ps.zIndex="2";
    divpopUp.innerHTML = '<a id="remove" onclick="remove()"></a>';
    document.body.appendChild(divpopUp);
    var divpopUp=document.getElementById("popUp")
    document.getElementById("remove").appendChild(img);
    }}}
    function remove(){
    a=document.getElementById("Dark");
    b=document.getElementById("popUp");
    document.body.removeChild(a);
    document.body.removeChild(b);
    if(ie){document.body.style.overflow="";}//ie hack
    if(document.getElementById("Dark")){remove()}//em caso de duplo clique:
    }
    
    </script>
    No Html pões:
    Código:
    <a href="javascript:popUp('imagem.jpg')"><img src="imagem.jpg" border="0" width="100px" height="100px"></a>
    Ou seja, essencialmente como tinhas antes(se bem me lembro). Não pus muitos comentários mas acho que é fácil de seguir.(tens que fazer referencia à imagem duas vezes mas é também é fácil alterar isso)

    Funciona da mesma maneira que o lightbox(o popup é uma div) mas mais simples.
    espero que possa ajudar
     
  4. Morphine0225

    Morphine0225 Power Member

    Tenho de testar esse código e digo-te algo depois. ;)

    Obrigado pela ajuda!!
     

Partilhar esta Página