Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Prosta galeria w jQuery
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Mayka
Witam, znalazłem sobie taki prosty skrypcik do zrobienia galeri w jquery, wszystko chodzi tylko chciałem żeby po zmianie obrazka i kliknieciu na niego można było odczytać wartość "alt" obrazka, wszystko było by fajnie tylko że zawsze przyjmuje wartość pierwszego obrazka, czy ktoś moze mi powiedzieć jak to przerobić żeby pobierało alt z odpowiedniego obrazka (aktualnie wyświetlanego w ".duzy") ?

  1. $(function() {
  2.  
  3. $('.miniatury ul li:first-child a img').css('opacity',0.5);
  4. $(".miniatury a").click(function(){
  5. $('.miniatury a img').css('opacity',1);
  6. $(this).children().css('opacity',0.5);
  7.  
  8. var sciezka = $(this).attr("href");
  9. var tytul = $(this).attr("title");
  10.  
  11. $(".duzy").attr({ src: sciezka, alt: tytul });
  12.  
  13. return false;
  14. });
  15. $(".duzy").click(function(){
  16. var val = $('.miniatury a img').attr("alt");
  17. alert(val);
  18. });
  19. });
_Borys_
[JAVASCRIPT] pobierz, plaintext
  1. $(".duzy").click(function(){
  2. var val = $(this).attr("alt");
  3. alert(val);
  4. });
[JAVASCRIPT] pobierz, plaintext
Mayka
Nie pomyslałem o tym wink.gif


Dzięki

dobra teraz ktoś jak by mógł mi wytłumaczyć dodać do colorboxa wszystkie obrazki a w zasadzie wszystkie linki do dużych obrazków żeby nie trzeba było zamykać i otwierać każdego po kolei ?

  1. $(".duzy").click(function(){
  2. var tablica = new Array();
  3. var alt = $(this).attr("alt");
  4. tablica.push(alt);
  5. $(".group1").each(
  6. function()
  7. {
  8. if($(this).attr('title')!=alt){
  9. tablica.push($(this).attr('title'));
  10. }
  11. }
  12. );
  13. console.log(tablica);
  14. $.colorbox({
  15. href: "obrazki/1.jpg" ,
  16. width:"95%",
  17. height:"95%",
  18. title:"Galeria 11",
  19. rel: "group1"
  20. });
  21. });


edit:
zbieram sobie wszystkie wszystkie pola do tablicy, tylko jak to teraz przekazać do href żeby stało się galerią ?
_Borys_
Po co tyle kombinacji.
W .miniatury a masz ścieżki do dużych obrazków a więc dajesz jakąś klasę, <a class="group1"> i potem
[JAVASCRIPT] pobierz, plaintext
  1. $(".group1").colorbox({rel:'group1'});
[JAVASCRIPT] pobierz, plaintext

i żadnych hrefów, altów nie musisz pobierać.
Mayka
No bo tak nie bedzie działało, mam 4 miniaturki z których ładuje obrazki do class="duzy" i dopiero po kliknięciu w duzy chce otwierać duże zdjęcia.
Jak zrobie tak jak ty Piszesz to nie bedzie ładowało do duzego obrazka tylko odrazu wyswietlało w colorboxie.
Chyba że Cie nie zrozumiałem....
_Borys_
Klikasz w którąś miniaturę, otwiera się duży obrazek, klikasz w ten duży obrazek, otwiera się colorbox z dużymi ?
Tak to ma działać ?
Mayka
Tak dokładnie tak ma działać.
Zrobiłem, może troche na okrętke wiec jak da się to uprościć to prosze poprawcie ale dla potomności niech zostanie:

  1. <script type="text/javascript">
  2. $(function() {
  3.  
  4. $('.miniatury ul li:first-child a img').css('opacity',0.5);
  5. $(".miniatury a").click(function(){
  6. $('.miniatury a img').css('opacity',1);
  7. $(this).children().css('opacity',0.5);
  8.  
  9. var sciezka = $(this).attr("href");
  10. var tytul = $(this).attr("title");
  11.  
  12. $(".duzy").attr({ src: sciezka, alt: tytul });
  13.  
  14. return false;
  15. });
  16. $(".duzy").click(function(){
  17. $(".obrazki_color").remove();
  18. var $gallery = $('<div class="obrazki_color">').hide().appendTo('body');
  19. var tablica = new Array();
  20. var alt = $(this).attr("alt");
  21. tablica.push(alt);
  22. $(".group1").each(
  23. function()
  24. {
  25. if($(this).attr('title')!=alt){
  26. tablica.push($(this).attr('title'));
  27. }
  28. }
  29. );
  30. console.log(tablica);
  31. $.each(tablica, function(i){
  32. $('<a href="'+tablica[i]+'"></a>').appendTo($gallery);
  33. });
  34. $gallery.find('a').colorbox({rel:'mygroup', width:'95%', height:'95%',open:true});
  35. });
  36. });
  37. </script>


  1. <div id="kontener">
  2.  
  3. <div class="galeria">
  4. <img class="duzy" src="obrazki/1.jpg" alt="obrazki/1.jpg" />
  5. </div>
  6.  
  7. <div class="miniatury">
  8. <ul>
  9. <li><a href="obrazki/1.jpg"class="group1" title="obrazki/1_d.jpg"><img src="obrazki/1-mini.jpg" alt="" /></a></li>
  10. <li><a href="obrazki/2.jpg"class="group1" title="obrazki/2_d.jpg"><img src="obrazki/2-mini.jpg" alt="" /></a></li>
  11. <li><a href="obrazki/3.jpg"class="group1" title="obrazki/3_d.jpg"><img src="obrazki/3-mini.jpg" alt="" /></a></li>
  12. <li><a href="obrazki/4.jpg"class="group1" title="obrazki/4.jpg"><img src="obrazki/4-mini.jpg" alt="" /></a></li>
  13. </ul>
  14. </div>
  15.  
  16. </div>
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.