Autor Zpráva
Keo
Profil
Prosím vás jak(kde) nastavím u lightboxu v.2.04 aby se obrázky po kliknutí zobrazovali až u horního okraje stránek a ne tak 3cm od vrchu? Vím o stránkách, kde mají Lightbox taky a obr. jsou u okraje. Díval jsem se na jejich css i *.js a nenašel jsem větší rozdíly. (mají v 2.03) . Jak na to?
D. Ondra.
Mistr
Profil
Keo
Zkoušel sis pohrát s vlastností margin nebo s pozicováním? Nevím, jak to mají oni řešené.
Keo
Profil
Mistr
No, zkoušel jsem víc možností,ale nějak se mi to nepodařilo. Předpokládal jsem, že to bude v css souboru,který to pozicuje,ale nějak jsem na to nepřišel. :(

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

#outerImageContainer{ position: relative; background-color: #4887e8; 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; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

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

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

#imageData{	padding:0 10px; color: #fff; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 120px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Je tu něco vidět, čeho jsem si nevšim, čím by se to upravilo, aby obr. byly u horního okraje a ne 3cm od něj?
Nebo je možné, že to může být v JavaScriptech u toho použitých? je jich tam 5.

*.js moc neovládám, ale zkoušel jsem si je projít a nějak si hodnoty odvodit. Ale nepřišel jsem na to.

Říkal jsem si, že by to mohlo být, někde v *.js napozicované do dané polohy a případně v tom css(nahoře) bych někde místo position:"0" dal hodnotu zápornou, aby se to posunulo nahoru.
position: absolute; top: -50px
ale nepovedlo se mi to.
Tak asi tak.
Keo
Profil
tady jsou stránky Lightboxu a je tam i ukázka. A ta je právě taky pozicována asi 3cm od horního okraje.
Odkaz

No a tady jsou stránky, které používají taky Lightbox a obr. mají uplně u okraje.
Odkaz

Napadá vás něco?
Keo
Profil
Tak pozor, přišel jsem na následující věc:
V jednom *.js souboru je toto:
        // calculate top and left offset for the lightbox 
        var arrayPageScroll = document.viewport.getScrollOffsets();
        var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
        var lightboxLeft = arrayPageScroll[0];
        this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
        
        this.changeImage(imageNum);
    },

Pokud změním hodnotu "/10" na "/100" (i jinou) obrázky se zobrazují nahoře, ale ne uplně. Ale už je to lepší :). Umíte někdo JavaScript a řeknete mi co v tomto případně měnit, abych to mohl pozicovat účelně a ne náhodně.

Když tam dávám hodnoty v řádech o 100, posunuje se to o 0,5mm. Což mi příjde nesprávné. Ve výsledku, když tam dám /1000, docílím toho, že je to úplně nahoře, ale nějak se mi to nezdá.
Díky. Ondra.
Keo
Profil
Ještě jedna věc, zkoušel jsem porovnat tyto hodnoty na těch stránkách, kde se jim to zobrazuje nahoře, ale je to tam uplně jinak. Nejspíš v důsledku jiné verze Lightboxu 2.03 res. 2.04. Takže tohle mi moc nepomohlo.
Lolek.cz
Profil *
Ahoj, taky jsem to nasel. Jasne. Mnohem jednodussi bude urcit odstup od horni hrany prohlizece proste natvrdo. Takze tenhle radek v lightbox.js:
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
nahradit timto:
var lightboxTop = 0;

a je to

jestli si pro jistotu chces zanechat ve skriptu puvodni radek, staci ho schovat za dve lomitka

// var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxTop = 0;
Lolek.cz
Profil *
Aha. Tak to taky neni dokonale. Protoze, kdyz je odrolovana stranka niz, otevira se lighbox porad nahore "na nule". Tak jeste mensi uprava. Tady:

misto
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
radeji
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10) - 45;
Keo
Profil
Tak to určitě zkusím, :) Dnes už mi to nevyjde, ale zítra 100% a jak to pujde, tak máš u mě pivko. :) Díky za rady.
nethor
Profil
Řešil jsem stejný problém.
Správné řešení je
var lightboxTop = arrayPageScroll[1] + 10; // 10 = 10px odshora


hodnotu document.viewport.getHeight v tomto případě nepotřebujem.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: