Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: wczytywanie obrazka z href'a, jak?
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
marcus755
Hej,

  1. <div class="prod_pic" id="prod1">
  2. ...tu zaczytuje obrazek z href...
  3. </div>
  4.  
  5. <a class="prod" href="images/pic_1.jpg" id="pic1"><img src="images/pic_1.png" width="100" height="60" alt="" /></a>
  6. <a class="prod" href="images/pic_2.jpg" id="pic2"><img src="images/pic_2.png" width="100" height="60" alt="" /></a>
  7. <a class="prod" href="images/pic_3.jpg" id="pic3"><img src="images/pic_3.png" width="100" height="60" alt="" /></a>


Chcę zrobić akcję w jquery, że jak klikam w pierwszy link, to z href="images/pic_1.jpg" wyciąga mi i wczytuje do div obrazek pic_1.jpg z id="prod1" jako .fadeIn("slow"),
a jak klikam w drugi link, to images/pic_1.jpg ukrywa jako .fadeOut("slow"), a z href="images/pic_2.jpg" wczytuje mi do div pic_2.jpg z id="prod1" jako .fadeIn("slow"),
itd.
!*!
Przerób to sobie. http://jsfiddle.net/henrichro/SRBjz/
sowiq
Cytat(!*! @ 5.02.2013, 11:41:12 ) *


!*!, Twoja odpowiedź na zadane pytanie ma się jak piernik do wiatraka. Po pierwsze nie ma tam odczytywania żadnych atrybutów, po drugie używana jest przestarzała (usunięta całkowicie w wersji 1.9) metoda live(). Więc IMO wprowadziłeś tylko zamęt.

marcus755, jakoś tak (pisane z palca, może zawierać błędy):
[JAVASCRIPT] pobierz, plaintext
  1. $('a.prod').on('click', function(){
  2. var newSrc = $(this).attr('href');
  3. $('#big_images img').stop(true).fadeOut('slow', function(){
  4. $(this).attr('src', newSrc).fadeIn('slow');
  5. });
  6. });
[JAVASCRIPT] pobierz, plaintext
marcus755
testowałem u siebie na przykładzie z obrazkami i nie działa

wrzuciłem na:
http://jsbin.com/umovav/2
sowiq
No ale kolego, wysil się odrobinę i pomyśl trochę dlaczego nie działa. Dostałeś praktycznie gotowy kod, ale trzeba go trochę zmodyfikować.

Podpowiedzi:

1. Kod próbuje podmienić atrybut src w nieistniejącym tagu obrazka
2. event.preventDefault()

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.