[jQuery] Prosta galeria, Pomóżcie znaleźć błąd Opcje

[wdev]

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?

[HTML] pobierz, plaintext 
(function($){
$('#jgallery_image_thumbs a').click(function(){		
    var mainPath = $(this).attr('href');
    var mainAlt = $(this).attr('title');
 
    $('#jgallery_main_image img').attr({ src: mainPath, alt: mainAlt });
    $('#jgallery_main_image_title').html(mainAlt);
    return false;
	});
})(jQuery);
[HTML] pobierz, plaintext 

I odpowiadający fragment kodu HTML:

[HTML] pobierz, plaintext 
<div class="jgallery" />
<div id="jgallery_main_image">
  <img src="/images/stories/fruit/peas.jpg" alt="peas.jpg"  />
  <h2 id="jgallery_main_image_title">Peas</h2>
</div>
 
<div id="jgallery_image_thumbs">
  <ul>
    <li><a href="/images/stories/fruit/peas.jpg" title="Peas">
       <img src="/images/stories/fruit/peas.jpg" alt="peas.jpg"  />
    </a></li>
    <li><a href="/images/stories/fruit/cherry.jpg" title="Cherry">
       <img src="/images/stories/fruit/cherry.jpg" alt="cherry.jpg"  />
    </a></li>
    <li><a href="/images/stories/fruit/strawberry.jpg" title="Strawberry">
       <img src="/images/stories/fruit/strawberry.jpg" alt="strawberry.jpg"  />
    </a></li>
    <li>
    <a href="/images/stories/fruit/pears.jpg" title="Pears">
        <img src="/images/stories/fruit/pears.jpg" alt="pears.jpg"  />
     </a></li>
  </ul>
</div>
 
</div>
[HTML] pobierz, plaintext 

Z góry dzięki za pomoc, bo mnie już oczy bolą od tego szukania :/

[erix]

Pokaż to gdzies na żywo.

[wdev]

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.

[krowal]

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 
<script type="text/javascript">
(function($){
	$('#jgallery_image_thumbs a').click(function(e){	
		window.alert('1');
    var mainPath = $(this).attr('href');
    var mainAlt = $(this).attr('title');
 
    $('#jgallery_main_image img').attr({ src: mainPath, alt: mainAlt });
    $('#jgallery_main_image_title').html(mainAlt);
    return false;
	});	
})(jQuery);
</script>
[JAVASCRIPT] pobierz, plaintext 

daj na samym końcu tej strony, albo zostaw tam gdzie jest, ale zmień na:

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function(){
  $('#jgallery_image_thumbs a').click(function(e){	
		window.alert('1');
    var mainPath = $(this).attr('href');
    var mainAlt = $(this).attr('title');
 
    $('#jgallery_main_image img').attr({ src: mainPath, alt: mainAlt });
    $('#jgallery_main_image_title').html(mainAlt);
    return false;
	});	
})
</script>
[JAVASCRIPT] pobierz, plaintext 

Ewentualnie zamiast .click(function(){...}) możesz dać .live('click', function(){...})

[wdev]

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.

[krowal]

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.

[wdev]

Nie ma potrzeby robić .live, wystarczy:

[JAVASCRIPT] pobierz, plaintext 
(function($){
  $(document).ready(function(){
  // kod
  });
})(jQuery);
[JAVASCRIPT] pobierz, plaintext 

Jest enkapsulacja i jest (document).ready. Mój problem już jest rozwiązany, ale może komuś innemu się przyda

[erix]

To też zależy.

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.