Autor Zpráva
Jont
Profil
Ahoj,
v Javascriptu se moc nevyznám, nějak jsem to zkoušel, ale bezúspěšně. Potřebuji následující věc:
z kódu na html stránce
<img src="obrazek.jpg" class="imagebox" width="300" height="200"> 

udělat tento kód
<a href="obrazek.jpg" rel="lightbox"><img src="obrazek.jpg" class="imagebox" width="300" height="200"></a>

Jak asi tušíte, jde o to, aby šlo kliknout na zmenšený obrázek a zobrazil se velký pomocí Lightboxu.

Mám představu, že by to šlo udělat tak, že do hlavičky stránky vložím JS skript. Tam se najde ten tag img s class imagebox a okolo toho se dá ten odkaz. Ale to právě nevím jak udělat. Našel jsem něco o DOM, ale tomu fakt nerozumím.

Nevíte, jak na to?
Díky moc
Aichi
Profil
Zdá se mi daleko jednodušší editovat šablonu tak, aby tam ty odkazy už byly. Protože pokud ne, tak musíš ten tvůj skript spustit dřív, než budeš vytvářet lightbox, jinak by ti tvé odkazy neviděl a neotevíral by obrázky. A ideový kód na obalení obrázků odkazem:

//najdu vsechny obrazky
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++){
  //jen obrazky s tridou imagebox
  if (images[i].className == 'imagebox') {
    var a = document.createElement('a');
    a.href = images[i].src;
    images[i].parentNode.insertBefore(a, images[i].nextSibling);
    a.appendChild(imgages[i]);
  }
}
_es
Profil
Aichi:
Načo používať document.getElementsByTagName('img')?
Existuje už hotová kolekcia document.images.
Aichi
Profil
_es:
nebo tak
Jont
Profil
Je to na editor TinyMCE, aby se tam přidáním třídy dal ten odkaz. No a pustím to předem - v hlavičce.
Zkoušel jsem ten kód a nefunguje mi to - nic se nezměnilo. Ten kód vypadá logicky, ale fakt to nic nedělá. Můžeš to prosím zkusit ty?

Když dám document.write(image[0].src) tak se nevypíše nic, stejně tak images.length je nula. Přitom tam mám dva obrázky. To je divné.

Novinka: Když ten kód výše za obrázky, tak to vše vypíše. Ale ten tvůj kód ty odkazy stejně nezmění, když je spuštěný až za nimi. Tak já nevím.
Jont
Profil
Prosím, opravdu bych to potřeboval.
_es
Profil
Jont:
Prosím, opravdu bych to potřeboval.
Tak daj odkaz na web, kde je ten problém.
Hláška "nefunguje mi to" nestačí.
Jont
Profil
web právě dělám, těžko na něj dám odkaz. no tobě to funguje? mně to asi nenajde to ty obrázky.
no ukázku jsem tedy nahrál sem: http://www.jontes.info/ruzne/test.php
centi
Profil
Jont:
Ako prvé skús opraviť preklep, ktorý si slepo skopíroval :)

a.appendChild(imgages[i]);
Jont
Profil
A jako druhé co? Tak jako sorry, ale čekal jsem, že mi tady někdo třeba poradí, proč mi to nefunguje. Kupříkladu autor skriptu.
_es
Profil
Jont:
A jako druhé co?
Za prvé, ten preklep si si neopravil.
Ďalej, k obrázkom sa snažíš pristupovať vtedy, keď ešte neexistujú.
Keďže používaš cyklus, tak chyba nenastane, len ten cyklus prejde nula krát.
Buď daj ten skript až na koniec html kódu, alebo použi:
window.onload=function(){/*nejaký kód*/};
Jont
Profil
Tak dík, už mi to funguje.
Taky mě napadlo, dát to na konec a zkoušel jsem a nic to nedělalo - za to asi mohl ten překlep.
Příště si to radši překontroluji :).
Jo a to přidání toho rel jsem někde našel - dělá se to přes setattribute.

A ještě otázka: Nebude to třeba nějaké pomalé? Neplánuji tam na 1 stránce moc obrázků, ale kdyby jich tam bylo třeba 20 nebo 50, bude poznat nějaké zpomalení?
_es
Profil
Jont:
kdyby jich tam bylo třeba 20 nebo 50, bude poznat nějaké zpomalení?
Najlepšie asi, keď si to vyskúšaš v rôznych prehliadačoch, no asi to oneskorenie bude veľmi malé.

dělá se to přes setattribute
Takéto rôzne veci niektorí neporučujú, no treba to vždy vyskúšať v rôznych prehliadačoch.
Jont
Profil
vlastně jsem to tam potom dal jako a.rel='lightbox', to je doufám to správné.
a ještě tu rychlost radši zkusím, ale snad to nebude problém.

a teď jsem hodinu zjišťoval, proč mi nejede slimbox a zjistil jsem, že se to asi nějak ruší s tím window.onload=function().
tak jsem ten svůj js musel dát na konec body. ale divné je, že s Ligtbox 2 to fungovalo normálně. ale lepší by bylo mít ten js v hlavičce, nejde to ještě nějak udělat? no asi ne.

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: