Прикрепить HREF и класс к ссылке img, созданной сценарием PhotoSlider? - PullRequest
Новая
       7

Прикрепить HREF и класс к ссылке img, созданной сценарием PhotoSlider?

0 голосов
/ 06 апреля 2010

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

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

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

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

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

Заранее спасибо!

Ответы [ 4 ]

2 голосов
/ 06 апреля 2010

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

$(document).ready(function() { 
  $('.photoslider_main img').live('click', function() {
    $(this).showLightbox();
  });
});
1 голос
/ 06 апреля 2010

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

1 голос
/ 06 апреля 2010

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

0 голосов
/ 07 апреля 2010

Вот полный код, который приводит к тому, что переменная 'src' не определена - не знаю почему. 

<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>
...