ugrás a tartalomhoz

Js egyszerűbben

cszlak · 2013. Szep. 3. (K), 10.22
Ezt lehet egyszerűbben? Kicsit sok kellene belőle.
Több különálló galéria fut egymás mellett, és úgy kellene, hogy egymás képeit ne mutassa.
  1.  $(document).ready(function() {  
  2.   
  3. $('a.lightbox1'  ).lightBox({  
  4.     overlayBgColor: '#000',  
  5.     overlayOpacity: 0.6,  
  6.     imageLoading: 'images/loading.gif',  
  7.     imageBtnClose: 'images/close.gif',  
  8.     imageBtnPrev: 'images/prev.gif',  
  9.     imageBtnNext: 'images/next.gif',  
  10.     txtImage: 'Foto',  
  11.     txtOf: 'az',  
  12.     containerResizeSpeed: 350});  
  13.    
  14.  $('a.lightbox2'  ).lightBox(  
  15. {  
  16.     overlayBgColor: '#000',  
  17.     overlayOpacity: 0.6,  
  18.     imageLoading: 'images/loading.gif',  
  19.     imageBtnClose: 'images/close.gif',  
  20.     imageBtnPrev: 'images/prev.gif',  
  21.     imageBtnNext: 'images/next.gif',  
  22.     txtImage: 'Foto',  
  23.     txtOf: 'az',  
  24.     containerResizeSpeed: 350   
  25.     }  
  26.     );  
  27.   
  28.  });  
  29.  });  
‹ Keresési segítség(autocomplette) vagy gyors keresés Html tanfolyam - ellenőrzés segítség ›
 ■
1

Alapok

Hidvégi Gábor · 2013. Szep. 3. (K), 10.55
Javaslom, hogy keress egy "Javascript alapok" című leírást, és abban is a változók és tömbök kezelését nézd át. Emellett a jQuery dokumentációjában érdemes megnézni, hogyan lehet a hasonló elemeket egy lekéréssel megtalálni, és a kapott listán végigiterálni; ehhez a HTML alapjait is ismerni kell, hogy hogyan lehet a hasonló elemeket megjelölni.
4

Köszi

cszlak · 2013. Szep. 3. (K), 11.09
Köszi, szeretem az ilyen jó tanácsokat. De azért ne becsülj le mindjárt valakit, mert egy "egyszerűnek tünő" dologban elakad.
5

Nem becsüllek le, de az első

Hidvégi Gábor · 2013. Szep. 3. (K), 11.25
Nem becsüllek le, de az első pillantásra nyilvánvaló volt, hogy az esetedben hiányzik a gyakorlat. Ahhoz meg az alapokkal kell tisztában lenni, nem? Mindenki volt kezdő, miért kéne ezt szégyellni?
8

De hát ha végül megoldottad

bamegakapa · 2013. Szep. 3. (K), 11.40
De hát ha végül megoldottad magad (teszem azt, Gábor tanácsaitól ösztönözve), akkor mégse beszélt hülyeséget.
2

paraméterek változóba

szabo.b.gabor · 2013. Szep. 3. (K), 10.55
  1. $(function() {    
  2.   var lbParams={    
  3.     overlayBgColor: '#000',    
  4.     overlayOpacity: 0.6,    
  5.     imageLoading: 'images/loading.gif',    
  6.     imageBtnClose: 'images/close.gif',    
  7.     imageBtnPrev: 'images/prev.gif',    
  8.     imageBtnNext: 'images/next.gif',    
  9.     txtImage: 'Foto',    
  10.     txtOf: 'az',    
  11.     containerResizeSpeed: 350  
  12.   };  
  13.     
  14.   $('a.lightbox1').lightBox(lbParams);    
  15.      
  16.   $('a.lightbox2').lightBox(lbParams);    
  17. });   
hirtelen ennyi, aztán hogy az adott lightbox plugin ad-e valami lehetőséget a képek csoportosítására, az már más kérdés
3

Közben megoldottam

cszlak · 2013. Szep. 3. (K), 11.08
Köszönöm közben megoldottam. Egyszerűbben.
Ime:
  1. $(function(){  
  2.          $('.lightboxGallery').each(function(){  
  3.             $('.lightbox', this).lightBox({  
  4.     overlayBgColor: '#000',  
  5.     overlayOpacity: 0.6,  
  6.     imageLoading: 'images/loading.gif',  
  7.     imageBtnClose: 'images/close.gif',  
  8.     imageBtnPrev: 'images/prev.gif',  
  9.     imageBtnNext: 'images/next.gif',  
  10.     txtImage: 'Foto',  
  11.     txtOf: 'az',  
  12.     containerResizeSpeed: 350});  
  13.         });  
  14.           
  15.       
  16.           
  17.     });  
  1. <div id="gallery4" class="lightboxGallery" style="margin-left:110px;">  
  2. <a href="Galeria/3-big.jpg" class="lightbox" title="">  
  3. <img src="Galeria/sur1.png" width="209" height="100" class="galeri" /></a>  
  4. <a href="Galeria/-big.jpg" class="lightbox" title="">  
  5. <img src="Galeria/sur2.png" width="164" height="100" class="galeri"/></a>  
  6. .....  
6

Olvass utána a jQuery

tgr · 2013. Szep. 3. (K), 11.35
Olvass utána a jQuery selector szintaxisának.
  1. $('a.lightbox1, a.lightbox2').lightBox(...)  
vagy
  1. $('.lightboxGallery .lightbox').lightBox(...)  
7

Kérdés, hogy az a plugin

bamegakapa · 2013. Szep. 3. (K), 11.38
Kérdés, hogy az a plugin mennyire okos, és külön galériának kezeli-e őket így.
10

A rel paraméterrel lehet

Hidvégi Gábor · 2013. Szep. 3. (K), 11.44
A rel paraméterrel lehet megmondani, hogy melyik link melyik galériát nyissa meg.
11

OK, a pluginnak nem néztem

bamegakapa · 2013. Szep. 3. (K), 12.07
OK, a pluginnak nem néztem utána, "lightBox" névvel gyakorlatilag ezerféle lehet :). Ha elolvassa a dokumentációt, valószínűleg van még egyszerűbb mód.
12

Ha nem, akkor dobja el és

tgr · 2013. Szep. 3. (K), 12.13
Ha nem, akkor dobja el és keressen másikat, folyót lehet rekeszteni színvonalas lightbox pluginokkal. Az egyik alapvető jQuery plugin konvenció, hogy ha egy listára hívod meg, azt úgy kezelje, mintha a lista elemeire egyenként hívnád meg, ami ezt nem tartja be, az nagyobb szörnyűségekre is képes lehet.
9

Szerintem a beállításokat

bamegakapa · 2013. Szep. 3. (K), 11.41
Szerintem a beállításokat mentsd egy változóba még a ciklus előtt, hatékonyabb és talán kicsit olvashatóbb is lesz a kód.
  1. var lightboxSettings = {    
  2.     overlayBgColor: '#000',    
  3.     overlayOpacity: 0.6,    
  4.     imageLoading: 'images/loading.gif',    
  5.     imageBtnClose: 'images/close.gif',    
  6.     imageBtnPrev: 'images/prev.gif',    
  7.     imageBtnNext: 'images/next.gif',    
  8.     txtImage: 'Foto',    
  9.     txtOf: 'az',    
  10.     containerResizeSpeed: 350    
  11. };  
  12.   
  13. $('.lightboxGallery').each(function(){    
  14.     $(this).find('.lightbox').lightBox(lightboxSettings);  
  15.     //a find ugyanaz mint a context amit használtál, szerintem olvashatóbb így  
  16. });