Autor | Zpráva | ||
---|---|---|---|
Joan Profil |
#1 · Zasláno: 19. 9. 2013, 21:12:20
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 |
#2 · Zasláno: 19. 9. 2013, 21:31:25
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 |
#3 · Zasláno: 19. 9. 2013, 21:36:14
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 |
#4 · Zasláno: 19. 9. 2013, 21:53:13
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 snimek.style.position = "fixed"; //bez POSITION se obrazek otevre pres text a napul zasunuty pod galerii snimek.style.top = "25%"; |
||
Joan Profil |
#5 · Zasláno: 20. 9. 2013, 08:44:49
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; } |
||
_es Profil |
#7 · Zasláno: 20. 9. 2013, 13:45:10
nemeja:
Príkaz var nemá byť v podmienených častiach kódu (príkaz if ).
|
||
nemeja Profil |
#8 · Zasláno: 20. 9. 2013, 13:54:59
_es:
tento kód jsem nepsal já, nicméně to nemá na funkčnost vliv, ne? |
||
_es Profil |
#9 · Zasláno: 20. 9. 2013, 14:31:11
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 |
#13 · Zasláno: 21. 9. 2013, 21:26:56
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! |
||
Časová prodleva: 11 let
|
0