Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jQuery img swap
Forum PHP.pl > Forum > Po stronie przeglądarki
nait
Witam!

Mam taki skrypt: http://www.devinrolsen.com/jquery-image-sw...th-fade-effect/.
Zaimplementowałem go na stronie, wszystko ładnie chodzi, ale potrzebuję jeszcze dodać aby wraz ze zmianą obrazka zmieniał się jego opis. Głowię i się i głowię, a że na JS się za bardzo nie znam także prosiłbym o pomoc, jakieś nakierowanie czy cuś aby osiągnąć zamierzony efekt.

Z góry bardzo dziękuje za poświęcony czas wink.gif
markonix
Tak samo jak zmieniają się obrazki możesz zmieniać akapity (<p>TEKST</p>).
Inna opcja to swap tekstu w środku danego elementu, do tego służy funkcja text() bądź html() (jQuery).
nait
Ale jak wywołać odpowiedni akapit?

Normalnie mam w linku odnośnik do odp obrazka, jak to powiązać z odpowiednim wpisem / akapitem?
markonix
Można dodać do elementu w który klikasz / wybierasz (nie ma to większego znaczenia) dodać jakiś atrybut np. rel="a1".
Potem pobierasz ten atrybut za pomocą ($this).attr('rel'). Za jego pomocą wyświetlasz odpowiedni akapit, który też ma atrybut "a1" (rel lub inny, nie ma to dla jQuery większego znaczenia, mogą to być też zwykłe klasy css).
nait
Kurde no nie wiem jak osiągnąć zamierzony efekt, nie znam za bardzo js.

Dodałem kontenery div z rel='$id' odpowiedniego opisu zdj o dałem im display: none;

Skrypt zamiany obrazów
  1. $('a.thumbnail').click(function(){
  2. var src = $(this).attr('href');
  3. if (src != $('img#largeImg').attr('src').replace(/\?(.*)/,'')){
  4. $('img#largeImg').stop().animate({
  5. opacity: '0'
  6. }, function(){
  7. $(this).attr('src', src+'?'+Math.floor(Math.random()*(10*100)));
  8. }).load(function(){
  9. $(this).stop().animate({
  10. opacity: '1'
  11. });
  12. });
  13. }
  14. return false;
  15. });



Coś w tym kierunku kombinowałem i owszem się pojawiają, ale nie wiem jak zrobić żeby po zmianie się zmieniały, a nie pojawiały nowe. Jakoś bym musiał zapewne sprawdzić aktualny id.
No i nie wiem jak nadać ten sam efekt 'fade' co mają zmieniające się obrazy
  1. var relid = $(this).attr('rel');
  2. $(".desc[rel=" + relid+ "]").css("display", "none");
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.