jQuery img swap Opcje

[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

Ten post edytował nait 26.10.2012, 17:08:05

[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

[PHP] pobierz, plaintext 
             $('a.thumbnail').click(function(){
                    var src = $(this).attr('href');
                	if (src != $('img#largeImg').attr('src').replace(/\?(.*)/,'')){
                		$('img#largeImg').stop().animate({
                			opacity: '0'
                		}, function(){
                			$(this).attr('src', src+'?'+Math.floor(Math.random()*(10*100)));
                		}).load(function(){
                			$(this).stop().animate({
                				opacity: '1'
                			});
                		});
                	}
                    return false;
                });
[PHP] pobierz, plaintext 

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

[PHP] pobierz, plaintext 
                    var relid = $(this).attr('rel');
                    $(".desc[rel=" + relid+ "]").css("display", "none");
[PHP] pobierz, plaintext 

Ten post edytował nait 27.10.2012, 09:35:05