Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [jQuery] Prosta galeria, Pomóżcie znaleźć błąd
wdev
post
Post #1





Grupa: Zarejestrowani
Postów: 86
Pomógł: 20
Dołączył: 20.01.2010

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


Witam,

Uczę się jQuery i stwierdziłem, że zrobię prostą galerię jako moduł do Joomli. Założenie - jeden obrazek, na dole miniaturki i po naciśnięciu zmieniają główny. Nie wiem, co robię źle, ale jQuery zamiast zadziałać .click, w ogóle się nie odzywa. Pomoże ktoś znaleźć błąd?

  1. (function($){
  2. $('#jgallery_image_thumbs a').click(function(){
  3. var mainPath = $(this).attr('href');
  4. var mainAlt = $(this).attr('title');
  5.  
  6. $('#jgallery_main_image img').attr({ src: mainPath, alt: mainAlt });
  7. $('#jgallery_main_image_title').html(mainAlt);
  8. return false;
  9. });
  10. })(jQuery);

I odpowiadający fragment kodu HTML:
  1. <div class="jgallery" />
  2. <div id="jgallery_main_image">
  3. <img src="/images/stories/fruit/peas.jpg" alt="peas.jpg" />
  4. <h2 id="jgallery_main_image_title">Peas</h2>
  5. </div>
  6.  
  7. <div id="jgallery_image_thumbs">
  8. <ul>
  9. <li><a href="/images/stories/fruit/peas.jpg" title="Peas">
  10. <img src="/images/stories/fruit/peas.jpg" alt="peas.jpg" />
  11. </a></li>
  12. <li><a href="/images/stories/fruit/cherry.jpg" title="Cherry">
  13. <img src="/images/stories/fruit/cherry.jpg" alt="cherry.jpg" />
  14. </a></li>
  15. <li><a href="/images/stories/fruit/strawberry.jpg" title="Strawberry">
  16. <img src="/images/stories/fruit/strawberry.jpg" alt="strawberry.jpg" />
  17. </a></li>
  18. <li>
  19. <a href="/images/stories/fruit/pears.jpg" title="Pears">
  20. <img src="/images/stories/fruit/pears.jpg" alt="pears.jpg" />
  21. </a></li>
  22. </ul>
  23. </div>
  24.  
  25. </div>


Z góry dzięki za pomoc, bo mnie już oczy bolą od tego szukania :/
Go to the top of the page
+Quote Post
erix
post
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




Pokaż to gdzies na żywo.
Go to the top of the page
+Quote Post
wdev
post
Post #3





Grupa: Zarejestrowani
Postów: 86
Pomógł: 20
Dołączył: 20.01.2010

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


Wrzuciłem to na żywo tutaj. A tu jest tutorial, z którego korzystałem. I choćbym się wysilał nie wiem jak, to nie jestem w stanie znaleźć różnicy, która mogłaby sprawić, że mój skrypt nie działa... Tak, wiem, że tamto jest na starej wersji jQuery, ale na tamtej też już próbowałem.
Go to the top of the page
+Quote Post
krowal
post
Post #4





Grupa: Zarejestrowani
Postów: 561
Pomógł: 72
Dołączył: 15.11.2006

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


Nie działa Ci dlatego, że kod JS wykonuje Ci się jeszcze zanim wyświetlisz linki i obrazki, zdarzenia 'click' nie są wtedy podczepiane do żadnego z tych elementów.

Ten kod:
[JAVASCRIPT] pobierz, plaintext
  1. <script type="text/javascript">
  2. (function($){
  3. $('#jgallery_image_thumbs a').click(function(e){
  4. window.alert('1');
  5. var mainPath = $(this).attr('href');
  6. var mainAlt = $(this).attr('title');
  7.  
  8. $('#jgallery_main_image img').attr({ src: mainPath, alt: mainAlt });
  9. $('#jgallery_main_image_title').html(mainAlt);
  10. return false;
  11. });
  12. })(jQuery);
  13. </script>
[JAVASCRIPT] pobierz, plaintext

daj na samym końcu tej strony, albo zostaw tam gdzie jest, ale zmień na:
[JAVASCRIPT] pobierz, plaintext
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $('#jgallery_image_thumbs a').click(function(e){
  4. window.alert('1');
  5. var mainPath = $(this).attr('href');
  6. var mainAlt = $(this).attr('title');
  7.  
  8. $('#jgallery_main_image img').attr({ src: mainPath, alt: mainAlt });
  9. $('#jgallery_main_image_title').html(mainAlt);
  10. return false;
  11. });
  12. })
  13. </script>
[JAVASCRIPT] pobierz, plaintext


Ewentualnie zamiast .click(function(){...}) możesz dać .live('click', function(){...})
Go to the top of the page
+Quote Post
wdev
post
Post #5





Grupa: Zarejestrowani
Postów: 86
Pomógł: 20
Dołączył: 20.01.2010

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


Ok, chyba nie doczytałem podręcznika, a koniecznie chciałem zachować enkapsulację (to moduł do Joomli, więc wolę, żeby kod był odporny). Myślałem, że podczas enksapsulacji automatycznie się wykona, tak jak skórt $(function(){}). No nic, człowiek uczy się całe życie ^^ Dzięki za pomoc.
Go to the top of the page
+Quote Post
krowal
post
Post #6





Grupa: Zarejestrowani
Postów: 561
Pomógł: 72
Dołączył: 15.11.2006

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


jak już napisałem,
Ewentualnie zamiast .click(function(){...}) możesz dać .live('click', function(){...})
To Ci pozwoli zostać przy dotychczasowym zapisie jeśli Ci aż tak na nim zależy.
Go to the top of the page
+Quote Post
wdev
post
Post #7





Grupa: Zarejestrowani
Postów: 86
Pomógł: 20
Dołączył: 20.01.2010

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


Nie ma potrzeby robić .live, wystarczy:
[JAVASCRIPT] pobierz, plaintext
  1. (function($){
  2. $(document).ready(function(){
  3. // kod
  4. });
  5. })(jQuery);
[JAVASCRIPT] pobierz, plaintext

Jest enkapsulacja i jest (document).ready. Mój problem już jest rozwiązany, ale może komuś innemu się przyda (IMG:style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post
erix
post
Post #8





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




To też zależy. (IMG:style_emoticons/default/winksmiley.jpg)

Na oficjalnym blogu jQuery był ostatnio artykuł, który mówił o tym, że w części przypadków lepiej używać live zamiast wrappera do DOMContentLoaded. Dotyczy to np. generowania dużego drzewa DOM przez serwer.
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: 23.08.2025 - 00:36