Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Prosta galeria w JS
Forum PHP.pl > Forum > XML, AJAX
qwertyman
Witam. Mam taki kod:

[JAVASCRIPT] pobierz, plaintext
  1. <script type="text/javascript" language="javascript">
  2. function pokazIMG (whichpic) {
  3. if (document.getElementById) {
  4. document.getElementById('imgbox').src = whichpic.href;
  5. if (whichpic.title) {
  6. document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
  7. } else {
  8. document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  9. }
  10. return false;
  11. } else {
  12. return true;
  13. }
  14. }
  15. </script>
  16.  
  17. <div class="mainpic">
  18. <img id="imgbox" src="img/small/3.png" alt="" />
  19. </div>
  20. <div class="smallpic">
  21. <p id="desc">Choose an image to begin</p>
  22.  
  23. <a onclick="return pokazIMG(this)" href="img/small/1.png" title="1"><img src="img/verysmall/1.png" alt=""></a>
  24. <a onclick="return pokazIMG(this)" href="img/small/2.png" title="2"><img src="img/verysmall/1.png" alt=""></a>
  25. <a onclick="return pokazIMG(this)" href="img/small/3.png" title="3"><img src="img/verysmall/1.png" alt=""></a>
  26. </div>
[JAVASCRIPT] pobierz, plaintext


Robi on taka małą galerie wymieniając odpowiednia obrazki w "imgbox" na te klikniete na dole z diva smallpic.
Dodatkowo title wstawua w <p id="desc">. Problem jest taki, że chciałbym wstawić jeszcze lightboxa do tych większych fotek więc musiał bym przekazywać obrazek z odnośnikiem do imgbox. Coś w stylu:
<a onclick="return pokazIMG(this)" href="img/small/1.png" title="1"><a href=img/big/1.png" rel="lightbox"> <img src="img/verysmall/1.png" alt=""></a></a>

ale nie można przekazywać odnosnika w odnosniku. Proszę o jakiś pomysł jak to zrobic.
Quider
spróboj zrobić to zz pomocą jQuery. Polecam też wstępny tutorial do niego. http://www.internetmaker.pl/artykul/4492,2...t_nie_boli.html

Mnie osobiście łatwiej się pracuje winksmiley.jpg

Pozdrawiam.
qwertyman
Ehh specjalnie sie zarejestrowałem, a 3s później sam doszedłem do rozwiązania. Wystarczyło zrobić tak ( pozbyłem się opisu)

[JAVASCRIPT] pobierz, plaintext
  1. <script type="text/javascript" language="javascript">
  2. function pokazIMG (whichpic) {
  3. if (document.getElementById) {
  4. document.getElementById('imgbox').src = whichpic.href;
  5. if (whichpic.title) {
  6. document.getElementById('lingbox').href = whichpic.title;
  7. } else {
  8. document.getElementById('lingbox').href = whichpic.childNodes[0].nodeValue;
  9. }
  10. return false;
  11. } else {
  12. return true;
  13. }
  14. }
  15. </script>
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22. <div class="mainpic">
  23. <a id="lingbox" href="img/big/1.png"><img id="imgbox" src="img/small/3.png" alt="" /></a>
  24. </div>
  25. <div class="smallpic">
  26. <a onclick="return pokazIMG(this)" href="img/small/1.png" title="img/big/1.png"><img src="img/small/1.png" alt=""></a>
  27. <a onclick="return pokazIMG(this)" href="img/small/2.png" title="img/big/2.png"><img src="img/small/1.png" alt=""></a>
  28. <a onclick="return pokazIMG(this)" href="img/small/3.png" title="img/big/3.png"><img src="img/small/1.png" alt=""></a>
  29. </div>
[JAVASCRIPT] pobierz, plaintext


Teraz wystarczy podpiac lightboxa.. moze komus sie przyda

. PS. Ale po co jquery skoro to 4 linijki kodu winksmiley.jpg. Przy większych projektach tak ale na potrzeby czegoś takiego to to wystarczy
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.