Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> jQuery img swap
nait
post
Post #1





Grupa: Zarejestrowani
Postów: 41
Pomógł: 3
Dołączył: 30.03.2009

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


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 (IMG:style_emoticons/default/wink.gif)

Ten post edytował nait 26.10.2012, 17:08:05
Go to the top of the page
+Quote Post
markonix
post
Post #2





Grupa: Zarejestrowani
Postów: 2 707
Pomógł: 290
Dołączył: 16.12.2008
Skąd: Śląsk

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


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).
Go to the top of the page
+Quote Post
nait
post
Post #3





Grupa: Zarejestrowani
Postów: 41
Pomógł: 3
Dołączył: 30.03.2009

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


Ale jak wywołać odpowiedni akapit?

Normalnie mam w linku odnośnik do odp obrazka, jak to powiązać z odpowiednim wpisem / akapitem?
Go to the top of the page
+Quote Post
markonix
post
Post #4





Grupa: Zarejestrowani
Postów: 2 707
Pomógł: 290
Dołączył: 16.12.2008
Skąd: Śląsk

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


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).
Go to the top of the page
+Quote Post
nait
post
Post #5





Grupa: Zarejestrowani
Postów: 41
Pomógł: 3
Dołączył: 30.03.2009

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


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");


Ten post edytował nait 27.10.2012, 09:35:05
Go to the top of the page
+Quote Post

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: 24.08.2025 - 21:42