| Autor | Zpráva | ||
|---|---|---|---|
| Joan Profil |
#1 · Zasláno: 3. 10. 2018, 23:46:12
Dobrý večer,
zjistila jsem s příjemným překvapením, že i po dost letech stále funguje moje přihlášení zde na diskusi :-) Mám stránky, kde jsou malé obrázky občas prokládány různě dlouhým textem. A mým záměrem je tyto obrázky po kliknutí zvětšit a kliknutím zase zavřít. Kvůli vloženému textu ale potřebuji, aby se zvětšeniny zobrazovaly vždy v místě náhledu, takže tzv. fotogalerii nechci. JS skript na jeden obrázek jsem díky jednomu návodu na Megaupload.cz dala dohromady, ale už několik dní visím na tom, že z více obrázků se mi zobrazí zvětšený až ten poslední. Před osmi lety jsem se tu o něco podobného pokoušela, ale nepovedlo se mi... Návodů jsem prolezla bezpočet, hlavně na Stackoverflow.com, ale nikde nebylo, co hledám já. Trochu se asi přibližuji tomuto tématu, ale můj kód/script vyhledává podle pole DIVů, ne podle pole obrázků. HTML (pro jedinou dvojici malý-velký obrázek): <div id='velka-fotka1'>
<div class="foto">
<a href='#' onclick="SchovatFotku('velka-fotka1'); return false" title='Zavřít'></a>
<img src='bigmotopelech1.jpg' alt='klikni pro zmenšení fotky' onclick="SchovatFotku('velka-fotka1'); return false" />
</div>
</div>
<div class="foto">
<a onclick="ZobrazFotku('bigmotopelech1.jpg'); return false" href='bigmotopelech1.jpg' title='zobraz obrázek v plné velikosti'><img src='motopelech1.jpg' width="320" height="240" alt="Pneumatika z motorky a deka"></a>
</div>Kromě pole a iterace to je skript vytažený ze zdrojového kódu té stránky z návodu. JS: <script language="javascript" type="text/javascript">
var obr = new Array('velka-fotka1', 'velka-fotka2', 'velka-fotka3', 'velka-fotka4', 'velka-fotka5');
for (var i = 0; i < obr.length; i++) { //zobrazí se jen poslední velký obrázek
var fotka = document.getElementById(obr[i]);
function ZobrazFotku() {
fotka.style.display = 'block';
}
function SchovatFotku(div){
document.getElementById(div).style.display='none';
}
}
</script>Nejdůležitější CSS: #velka-fotka1, #velka-fotka2, #velka-fotka3, #velka-fotka4, #velka-fotka5 {display: none; position: absolute; left: 120px;} Překvapilo mě ovšem, že zavírání velkých fotek funguje na jedničku: smazala jsem deklaraci display: none; a vyskočily všechny velké fotky naráz. A na kteroukoliv jsem klikla, ta se okamžitě zavřela. Proč tedy iterace dojede bez zastávky až na konec a JS nepozná, na kterou fotku jsem klikla, když pozná, kterou jsem zavřela? Takto chci, aby velký obrázek vypadal u každé malé fotky. Proč ale mohu kliknut na kteroukoliv a přesto se první obrázek zobrazí? A zde výsledek, který se mi zobrazuje po použití for cyklu P.S.: Kdyby HTML kód šel výrazněji zjednodušit (nejen proto, že mi není jasné, proč je to zrovna takhle), bylo by to parádní, protože budu muset takto "přeobalit" desítky fotek. Moc díky předem za čas všem dobrým rádcům <3 |
||
| Kajman Profil |
#2 · Zasláno: 4. 10. 2018, 00:04:05
Stále upravuješ stejně nazvanou funkci v cyklu, to nedává smysl. Bude se to chovat stejně, ať funkci zadefinuješ jednou nebo tisíckrát.
Funkce SchovatFotku pracuje s id divu jako parametrem, nestačí pracovat s parametrem i u funkce ZobrazFotku? |
||
|
Časová prodleva: 6 let
|
|||
0