Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Prosta galeria w jQuery
Mayka
post
Post #1





Grupa: Zarejestrowani
Postów: 304
Pomógł: 1
Dołączył: 12.01.2009
Skąd: Kanapa

Ostrzeżenie: (0%)
-----


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. });
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
Mayka
post
Post #2





Grupa: Zarejestrowani
Postów: 304
Pomógł: 1
Dołączył: 12.01.2009
Skąd: Kanapa

Ostrzeżenie: (0%)
-----


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>
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 6.10.2025 - 22:35