Witam. Mam następujący problem: została dla mnie wykonana strona, na której znajduje się przewijana galeria miniaturek (jcarousel) oraz duże pole, w którym pokazuje się duży obrazek po kliknięciu na jego miniaturkę w jcarousel. Wszystko napisane w jQuery.
Jcarousel nie spełniał wszystkich wymagań i został usunięty. Zastąpił go analogiczny moduł napisany we Flashu. Flash został ustawiony tak, że po kliknięciu na miniaturkę uruchamia się funkcja JavaScript z parametrem - id klikniętej miniaturki.
Teraz mój problem polega na tym, że muszę połączyć tego Flasha z tych co zostało napisane w JQuery. Najgorsze jest to że nie znam w ogóle JS ani tym bardziej JQuery. Mam więc uruchamianą funkcję JS loadpicture(id) i kod JQuery z poprzedniego modułu, który wygląda tak:
<script type="text/javascript"> jQuery(document).ready(function() {
});
jQuery(document).ready(function() {
jQuery('#jCarousel').jcarousel({
itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) {carousel.remove(i);}},
itemLoadCallback: mycarousel_itemLoadCallback,
scroll: 5
});
jQuery('#gallerysec1 li a').live("click", function(e) {
e.preventDefault();
var elIndex = $(this).parent().index();
var elLi = jQuery("ul#gallery1 li").get(elIndex);
jQuery("ul#gallery1 li img").hide();
$("img", elLi).fadeIn(500);
jQuery('#gallerysec1 li a').css('background-position', '-6px 0');
$(this).css('background-position', '0 0');
});
jQuery('#gallery1 li img').live("mouseover", function() {
remove_gallery_arrows();
var imgWidth = $(this).width();
var imgHeight = $(this).height();
var imgPosition = $(this).position();
$(this).parent().not(':last-child').append('<span id="imageArrowRight"></span>');
$(this).parent().not(':first-child').append('<span id="imageArrowLeft"></span>');
$('#imageArrowRight').css({'left' : imgPosition.left+imgWidth-25+2, 'top': imgPosition.top+(imgHeight/2)-13})
.click(function(){
var elIndex = $(this).parent().index();
var x = jQuery('#gallerysec1 li').get(elIndex+1);
jQuery('#gallerysec1 li a').css('background-position', '-6px 0');
$("a", x).css('background-position', '0 0');
jQuery("ul#gallery1 li img").hide();
var nextImage
= $
(this
).parent
().next(); $("img", nextImage).fadeIn(500);
remove_gallery_arrows();
});
$('#imageArrowLeft').css({'left' : imgPosition.left+2, 'top': imgPosition.top+(imgHeight/2)-13})
.click(function(){
var elIndex = $(this).parent().index();
var x = jQuery('#gallerysec1 li').get(elIndex-1);
jQuery('#gallerysec1 li a').css('background-position', '-6px 0');
$("a", x).css('background-position', '0 0');
jQuery("ul#gallery1 li img").hide();
var prevImage
= $
(this
).parent
().prev(); $("img", prevImage).fadeIn(500);
remove_gallery_arrows();
});
});
jQuery('#gallery1 li').live("mouseleave", function() {
remove_gallery_arrows();
});
});
Część tego kodu jest odpowiedzialna za obsługę tych powiększonych zdjęć (np. pojawiają się na nich strzałki prawo/lewo, itp.), ale część jak rozumiem jest odpowiedzialna za nasłuch kliknięcia w miniaturkę, prawdopodobnie ta część:
jQuery('#gallerysec1 li a').live("click", function(e) {
Wnioskuję, że jQuery nasłucuje kontener o id="gallerysec1" a w nim hiperłącze w <li> - ale w nowym module nie mam przecież żadnych takich elementów i przy tym wysiadam. Przede wszystkim nie wiem czy takie połączenie jest w ogóle wykonalne. Jeżeli jest - czy jest to skomplikowana operacja? Co należałoby wykonać? Dzięki za wszelkie podpowiedzi.