Прикрепите HREF и класс к ссылке img, сгенерированной скриптом PhotoSlider?

Я использую очень красивый скрипт PhotoSlider от http://opiefoto.com/articles/photoslider, чтобы создать слайд-шоу изображений для одного из моих клиентов.Прикрепите HREF и класс к ссылке img, сгенерированной скриптом PhotoSlider?

Этот скрипт заменяет предыдущее решение Javascript с ручным кодированием, которое позволяет щелкнуть большое изображение, в результате получив всплывающее окно lightbox, показывающее полноразмерную версию щелкнутого изображения.

Конечно, клиент настаивает на том, что эта функциональность остается нетронутой, но HTML-код для большого изображения генерируется на лету самим сценарием PhotoSlider.

Это означает, что мне нужно немного изменить сценарий, чтобы добавить класс («лайтбоксы») и href (или просто событие щелчка, в зависимости от того, что имеет больше смысла), но я не совсем уверен, как лучше всего выполните это. Я полагаю, что событие и класс должны быть прикреплены каждый раз, когда нажимается эскиз, но если это не лучший способ сделать это, то любой совет будет оценен.

Сценарий реализован на моей странице, как можно видеть here, без щелчка или класса. Я бы очень признателен за любую помощь, которую может предложить stackoverflowites.

Заранее благодарен!

источник

2010-04-06 Frank Bailey

Посмотрите на метод jquery live(), который позволяет прикрепить событие к селектору, который существует либо сейчас, либо в будущем. Фактически, вы можете сделать что-то подобное (на примере на сайте Фотослайдер):

$(document).ready(function() { 
    $('.photoslider_main img').live('click', function() { 
    $(this).showLightbox(); 
    }); 
});

источник

2010-04-06 14:23:44 gregmac

Thanks Greg! Я добавил еще одну проблему, с которой я столкнулся, если вы захотите взглянуть, пожалуйста? –

Я не понимаю, почему, когда я использую var src = $ (". Photoslider_main img"). Attr ("src"); , а затем предупредить результирующую переменную «src», я продолжаю получать «undefined»? Я называю это * после того, как * photoslider создает свои структуры, так что, конечно, это должно работать? –

Вы делаете это в документе document.ready()? Если это просто «после» в соответствии с потоком кода (например, после того, как вы вызываете материал для фотосъемки), это может не означать, что на самом деле это делается в данный момент, так как в этот момент возможно ожидание событий и т. Д. (очень распространенная ошибка при запуске с помощью javascript и библиотек, таких как jquery). Попробуйте сделать console.log ($ ('. Photoslider_main img)) и посмотреть, что вы получаете (вам понадобится firebug, конечно) – gregmac

После нажатия на миниатюру и отображается новое изображение, вы можете прикрепить событие click к новому изображению, используя jQuery's bind. Если вы обнаружите, что вам нужно удалить его позже, вы можете использовать unbind.

источник

2010-04-06 14:04:00

Подождите, пока скрипт завершит создание кода HTML, а затем изменит его на свой вкус. Модификация на каждый клик не требуется, поскольку PhotoSlider генерирует свой HTML один раз.

источник

2010-04-06 14:05:56

Вот полный код, который приводит к переменной «ЦСИ» быть неопределенным - не знаю, почему.

<div class="photoslider" id="default"></div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    //change the 'baseURL' to reflect the host and or path to your images 
    FOTO.Slider.baseURL = ''; 

    //set images by filling our bucket directly 
    FOTO.Slider.bucket = { 
     'default': { 
      <% if imgs1 <> "" then %> 0: {'thumb': '<%=replace(imgs1,"pn.","tn.")%>', 'main': '<%=imgs1%>'}<% end if %><% if imgs2 <> "" then %>, 
      1: {'thumb': '<%=replace(imgs2,"pn.","tn.")%>', 'main': '<%=imgs2%>'}<% end if %><% if imgs3 <> "" then %>, 
      2: {'thumb': '<%=replace(imgs3,"pn.","tn.")%>', 'main': '<%=imgs3%>'}<% end if %><% if imgs4 <> "" then %>, 
      3: {'thumb': '<%=replace(imgs4,"pn.","tn.")%>', 'main': '<%=imgs4%>'}<% end if %><% if imgs5 <> "" then %>, 
      4: {'thumb': '<%=replace(imgs5,"pn.","tn.")%>', 'main': '<%=imgs5%>'}<% end if %> 
     } 
    }; 
    FOTO.Slider.reload('default'); 
    FOTO.Slider.preloadImages('default'); 
    FOTO.Slider.enableSlideshow('default'); 

    //or set our images by the bucket importer 
    //var ids = new Array(0,1,2,3); 
    //FOTO.Slider.importBucketFromIds('default',ids); 


    console.log($('.photoslider_main img')); 
    var src = $(".photoslider_main img").attr("src"); 
    $(".photoslider_main img").wrap($('<a/>').attr('href', 'waka').attr('class','lightbox')); 

    $('a.lightbox').lightBox(); 

// $('.photoslider_main img').live('click', function() { 
// $(this).showLightbox(); 
// }); 
}); 



</script>

источник

2010-04-06 22:06:11

Прикрепите HREF и класс к ссылке img, сгенерированной скриптом PhotoSlider?

ответ

Смежные вопросы