• C
    Bannato Super User •

    Domanda su script Litebox

    per un mio progetto ho utilizzato questo script: Litebox (versione leggera del famoso LightBox)...
    desideravo avvicinare l'immagine ingrandita al bordo superiore del browser, come posso fare?
    credo sia una questione di css, ho provato, ma non saprei che altro modificare...se vi posto il codice mi date una mano? 🙂
    beh...intanto posto il codice (costituito da due files):D
    file lightbox.css

    #lightbox{
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
    }
 a img{ border: none; }

#outerImageContainer{
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    }

#imageContainer{
    padding: 10px;
    }

#loading{
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
    }
#hoverNav{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    }>#hoverNav{ left: 0;} a{ outline: none;}

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    } { left: 0; float: left;} { right: 0; float: right;}:hover,:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }:hover,:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
    font: 10px Verdana, Helvetica, sans-serif;
    background-color:;
    margin: 0 auto;
    line-height: 1.4em;
    }

#imageData{
    padding:0 10px;
    } #imageDetails{ width: 70%; float: left; text-align: left; }     #caption{ font-weight: bold;    } #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }             #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;    }    
        
#overlay{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
    background-color: #000;
    filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
    }
    

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }

* html>body .clearfix {
    display: inline-block; 
    width: 100%;
    }

* html .clearfix {
    /* Hides from IE-mac \*/
    height: 1%;
    /* End hide from IE-mac */
    }

    file style.css

    html, body { height:100%; }
body {
font-family:Verdana,arial,Tahoma;
font-size:.8em; 
color:#222;
margin:0;
padding:0;
background:#fff;
text-align:justify;
}
a { color:#557FFF; }
a:hover { text-decoration:none; }
p, li { margin:2px; color:#555; padding:2px}
ul { padding-left:1em; }
img { border: none; }
.bordered { border:1px solid #aaa; }
h1 { text-align:right; margin:2px; color:#000; font-family:Georgia,Arial,Tahoma; font-size: 3em;}
h3, h5 { margin-bottom:4px; }
textarea { background:#ccc; color:#333; border:1px solid; }
#content { width:700px; background:#eee; margin-left:auto; margin-right:auto; padding:8px; border-left:10px solid #ccc; border-right:10px solid; }
``` grazie
;)
    0
  • C
    Super User •

    Ciao Cibino 🙂

    Dai per scontato tutti sappiano cosa sia questo Litebox, e quale sia l'immagine più grande...

    Io onestamente non lo so, ammetto l'ignoranza...

    Dovresti farmi vedere cosa vuoi fare praticamente...:ciauz:

    0
  • C
    Bannato Super User •

    hai perfettamente ragione...
    il plugin in funzione si può vedere qui
    http://www.basketcittadella.it/studio/realizzazioni-industria.htm

    clicca su un'immagine e vedrai che questa si ingrandisce...vorrei avvicinarla al bordo superiore del browser
    🙂

    0
  • S
    User Attivo •

    Hai provato a modificare la terza riga?

    ** top: 40px;**

    0
  • C
    Bannato Super User •

    @Senamion said:

    Hai provato a modificare la terza riga?

    ** top: 40px;**

    era la prima cosa che avevo provato, ma non fa nulla 🙂
    in realtà sono riuscito a risolvere...bisognava cambiare un valore per una certa variabile nel file .js, e non nel css

    grazie comunque a tutti
    🙂

    0
  • V
    Super User •

    @cibino said:

    era la prima cosa che avevo provato, ma non fa nulla 🙂
    in realtà sono riuscito a risolvere...bisognava cambiare un valore per una certa variabile nel file .js, e non nel css

    grazie comunque a tutti
    🙂
    Io avevo bisogno di sapere che valore va cambiato nel file .js, per avvicinare l'immagine ingrandita al bordo del browser. Percaso qualcuno sa dirmelo? L'utente non può più rispondere per ovvi motivi direi.

    :ciauz:

    Leggendo leggendo nel sito ufficiale ho trovato la soluzione mi sembra giusto postarla.

    Dunque va modificato così il file .js

    Questo va cambiato

    // calculate top and left offset for the lightbox
    var arrayPageScroll = getPageScroll();
    var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
    var lightboxLeft = arrayPageScroll[0];
    Element.setTop('lightbox', lightboxTop);
    Element.setLeft('lightbox', lightboxLeft);

    con questo

    // calculate top and left offset for the lightbox

    var arrayPageScroll = getPageScroll();
    var lightboxTop = arrayPageScroll[1] + 5;
    var lightboxLeft = arrayPageScroll[0];
    Element.setTop('lightbox', lightboxTop);
    Element.setLeft('lightbox', lightboxLeft);

    Il valore 5 può essere modificato per scegliere quanto spazio dal bordo si vuole avere.

    Ecco il topic di riferimento nell'assistenza del sito ufficiale:
    www. huddletogether.com/forum/comments.php?DiscussionID=1437&page=1#Item_0

    0
Effettua l'accesso per rispondere