Autor Zpráva
Joan
Profil
Dobrý večer,
po dlouhé době jsem se opět dostala ke svým stránkám a zjistila jsem, že budu muset hrábnout do kódu...

Doposud jsem zvětšeniny náhledů otevírala pomocí tohoto JS kódu:

// JavaScript Document - velke fotogalerie
var kam = document.getElementById("umisteni");  //rodic pro snimek
var snimek = document.createElement("img");   //do neho se otevira zvetsenina
kam.appendChild(snimek); 
//IE a Opera vkladaji ctverecek pro imaginarni obrazek
snimek.style.display = "none";
if (document.getElementById("galerie"))
var nahled = document.getElementById("galerie").getElementsByTagName("a"); 
if (document.getElementById("galerie"))
var nahled = document.getElementById("galerie").getElementsByTagName("a");  /*kde se nachazeji nahledy*/
for (var i=0; i<nahled.length; i++)   //nahled.length = pocet nahledu
{
nahled[i].onclick = function()
{
snimek.src = this.href;
snimek.style.position = "absolute";   //bez POSITION se obrazek otevre pres text a napul zasunuty pod galerii
snimek.style.display = "block";   //bez nej se neotevre po zavreni dalsi nahled
snimek.style.marginLeft = "-520px";
snimek.style.marginTop = "50px";
snimek.style.padding = "6px";
snimek.style.backgroundColor = "#ffffaa";
snimek.style.border = "2px solid green";
return false;
}
}  

snimek.onclick = function()   //zavreni velkeho obrazku onclickem
{
snimek.style.display = "none";
snimek.style.padding = 0;
snimek.style.border = 0;
}
 

Po letošní dovolené jsem na stránku nasázela 40 malých obrázků spolu s neblahým zjištěním, že skript budu muset upravit, jelikož když někdo otevře obrázky ve spodních řadách, neuvidí zvětšeninu, protože monitor by musel být velký jako stůl.

Úplně nejraději bych zvětšeniny otevírala vedle daného náhledu nebo přes něj. Hodně tápu, jak to ale udělat, protože javascript "ovládám" zhruba stejně jako svahilštinu... :-)

Taky nevím, lze-li vůbec můj požadavek javascriptově realizovat.

Co chci:
- aby se obrázek otevíral vždy v dané vzdálenosti nebo prostoru od miniatury - anebo aby omezujícím prvkem byl viewport čili obrazovka (která bude samozřejmě u každého jiná)

Co nechci:
- použít posouvatelnou "nudli" náhledů, protože by nebyly vidět naráz všechny
- použít hotový či komerční cizí kód

Přikládám přímý odkaz na problematickou stránku a moc moc prosím o radu, která mě poposune blíže k cíli.
Vřelé díky předem!!
nemeja
Profil
Nastav obrázku:
position: fixed;
top: 25%; // 25% se mi nejvíce líbilo, samozřejmě to můžeš nastavit v PX, ale zas riskuješ, že u nižších monitorů to bude mimo
Joan
Profil
nemeja:
Díky za odpověď.
Ihned jsem vyzkoušela, leč obrázek se bohužel s tímto nastavením neotevře vůbec...
nemeja
Profil
Upravila jsi to v galerie.js:16?
Zkus zmenit
snimek.style.position = "absolute"; //bez POSITION se obrazek otevre pres text a napul zasunuty pod galerii
na
snimek.style.position = "fixed"; //bez POSITION se obrazek otevre pres text a napul zasunuty pod galerii
snimek.style.top = "25%";
Joan
Profil
Dobré ráno,
přesně takto jsem to změnila a vše ostatní ponechala. Do návratu svých původních hodnot se velký obrázek již nikde nezobrazil.
nemeja
Profil
Mě tento kód funguje bez problému napříč prohlížeči.
// JavaScript Document - velke fotogalerie
var kam = document.getElementById("umisteni");  //rodic pro snimek
var snimek = document.createElement("img");   //do neho se otevira zvetsenina
kam.appendChild(snimek); 
//IE a Opera vkladaji ctverecek pro imaginarni obrazek
snimek.style.display = "none";
if (document.getElementById("galerie"))
var nahled = document.getElementById("galerie").getElementsByTagName("a"); 
if (document.getElementById("galerie"))
var nahled = document.getElementById("galerie").getElementsByTagName("a");  /*kde se nachazeji nahledy*/
for (var i=0; i<nahled.length; i++)   //nahled.length = pocet nahledu
{
nahled[i].onclick = function()
{
snimek.src = this.href;
snimek.style.position = "fixed"; //bez POSITION se obrazek otevre pres text a napul zasunuty pod galerii
snimek.style.top = "25%";   
snimek.style.display = "block";   //bez nej se neotevre po zavreni dalsi nahled
snimek.style.marginLeft = "-520px";
snimek.style.padding = "6px";
snimek.style.backgroundColor = "#ffffaa";
snimek.style.border = "2px solid green";
return false;
}
}  

snimek.onclick = function()   //zavreni velkeho obrazku onclickem
{
snimek.style.display = "none";
snimek.style.padding = 0;
snimek.style.border = 0;
}
Co používáš za prohlížeč?
_es
Profil
nemeja:
Príkaz var nemá byť v podmienených častiach kódu (príkaz if).
nemeja
Profil
_es:
tento kód jsem nepsal já, nicméně to nemá na funkčnost vliv, ne?
_es
Profil
nemeja:
V rôznych prehliadačoch môže také definovanie premennej fungovať rôzne. Odporuje to aj špecifikácii ECMAScript.
Joan
Profil
Je mi líto, pozicování "fixed" neukáže obrázek ani v FF 22.0 či IE 8 na Win 7. Pokud je position na absolute či relative, obrázek se zobrazí. Vertikální nastavení je ale největší problém.
Ladím si stránky na 11,6" Sony Vaio s rozlišením 1366 x 768 px a chci samozřejmě, aby se zvětšenina zobrazila i na tomto pididispleji.
Moc děkuji odborníkům předem za pomoc, věřím, že to nějak jít musí... Protože position: "fixed" se mi taky jeví jako logické řešení.
xROAL
Profil
Obrázok sa ukáže bez problému, lenže vďaka margin-left = "-520px"; (ktorý sa nastavuje na riadku 18) sa schová mimo viewport.
Joan
Profil
Pravda, zní to logicky, leč opět se obrázek neukáže...
Mám stránku, kde je obrázků jen 10 a krátký text, takže si ji dokážu smrsknout na displej. Ani po zakomentování snimek.style.marginLeft obrázek nevyvolám. Fakt ne... Co tomu může bránit? Vlastnost "fixed" je v případě mé fotogalerie prozatím zakletá.

EDIT: Ha, došla jsem na to!! Tu stránku s minimem obrázků jsem si zmenšila co nejvíc to šlo a - ejhle! Při position fixed a top 25% se mi velký obrázek zobrazil až kdesi hódně dole. Postupně jsem nastavila snimek.style.marginTop na -40% a už to vypadá obstojně! Záporná hodnota mě sice překvapila, ale funguje. Bohužel stále závisí na rozlišení obrazovky... ale už jsem kus postoupila.
Přeji prima víkend :-)
Joan
Profil
Mohu-li poprosit, vyzkoušejte prosím, komu se bude chtít obětovat čas, jak vypadá zobrazení zvětšenin nyní.
Moc děkuji!

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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