Атрибут Rel в Javascript - PullRequest
Новая
       13

Атрибут Rel в Javascript

0 голосов
/ 15 июля 2011

У меня есть скрипт просмотра галереи лайтбокса, и он работает нормально.

На моем сайте я использую ajax-скрипт для вызова другой страницы и загрузки ее в DIV

Например: 

ajaxRequest.onreadystatechange = function(){
  if(ajaxRequest.readyState == 4){
    var ajaxDisplay = document.getElementById('loadmailfunctions');
    ajaxDisplay.innerHTML = ajaxRequest.responseText; sizeit();
    setVisibility('uploads', 'block'); settotime();
  }
}
ajaxRequest.open("GET", "profile/photos.inc.php", true);
ajaxRequest.send(null);

Затем загружаются все нужные фотографии, но когда я нажимаю на фотографию и использую rel = "lightbox", она не работает.

Это как-то связано с родительским DOM / окном или чем-то? Извините, нуб, но я надеялся, что кто-нибудь может указать мне правильное направление?

EDIT:

В профиле загруженной страницы / photos.inc.php у меня есть этот код: 

echo '<li><a href="',$row['localdirectory'],$row['photo'],'" rel="lightbox" ><img src="',$row['localdirectory'],$row['photo'],'" style="width:110px; height:85px;" alt="" /></a></li>'

Но не выполняет сценарий просмотра Lighbox.

Ответы [ 2 ]

0 голосов
/ 15 июля 2011

Как подразумевает dev-null-dweller, пример использования Lightbox активирует только rel="lightbox" ссылки при загрузке страницы: 

<script type="text/javascript">
$(function() {
   $('a[@rel*=lightbox]').lightBox({
    overlayBgColor: '#FFF',
    overlayOpacity: 0.6,
    imageLoading: 'http://example.com/images/loading.gif',
    imageBtnClose: 'http://example.com/images/close.gif',
    imageBtnPrev: 'http://example.com/images/prev.gif',
    imageBtnNext: 'http://example.com/images/next.gif',
    containerResizeSpeed: 350,
    txtImage: 'Imagem',
    txtOf: 'de'
   });
});
</script>

Вам следует перезапустить это для новых элементов, которые волшебным образом появились в вашем div после Ajaxifying: 

<script type="text/javascript">
var lightBoxOptions = {
    overlayBgColor: '#FFF',
    overlayOpacity: 0.6,
    imageLoading: 'http://example.com/images/loading.gif',
    imageBtnClose: 'http://example.com/images/close.gif',
    imageBtnPrev: 'http://example.com/images/prev.gif',
    imageBtnNext: 'http://example.com/images/next.gif',
    containerResizeSpeed: 350,
    txtImage: 'Imagem',
    txtOf: 'de'
};

$(function() {
   // Set Lightbox handlers on "static" elements
   $('a[@rel*=lightbox]').lightBox(lightBoxOptions);
});

// then, whereever your AJAX code is:
ajaxRequest.onreadystatechange = function(){
  if(ajaxRequest.readyState == 4){
    var ajaxDisplay = document.getElementById('loadmailfunctions');
    ajaxDisplay.innerHTML = ajaxRequest.responseText; sizeit();
    setVisibility('uploads', 'block'); settotime();

    // Set Lightbox handlers on new elements
    $('#loadmailfunctions a[@rel*=lightbox]').lightBox(lightBoxOptions);
  }
}
</script>

Кстати, если вы используете плагин lightbox jQuery (и я должен предположить, что вы, так как вы не указали иначе), почему вы не используетеjQuery в целом?

Если вы не используете плагин jQuery, повторите настройку обработчика событий аналогичным образом.

0 голосов
/ 15 июля 2011

Lightbox активируется после загрузки страницы, сканирует дерево DOM в поисках якорей с атрибутом rel="lightbox" и связывает с ними событие onclick. Когда вы выполняете AJAX-вызов, новые элементы добавляются в дерево DOM, но вы должны вручную инициализировать сканирование для новых привязок.

...