Галерея галереи Неправильно загружается после бесконечного прокрутки

Question

У меня есть сайт, построенный на WordPress с несколькими сотнями сообщений. Каждое сообщение содержит до 10 изображений. Infinite Scroll используется для автоматического добавления большего количества сообщений. Я хочу, чтобы главная страница была страницей галерей изображений; по одному за сообщение.

Вот что у меня есть:

Во-первых, я добавляю галереи в почтовом цикле. Я использую идентификатор сообщения, чтобы создать уникальный идентификатор Galleria. Я также использовать второе имя класса передать соотношение изображения в JS (уверен, что есть лучший путь?):

<div id="galleria-1609" class="galleria 0.5"> 
    <a href="img01-800x400.jpg" alt="Large Image" ><img src="thumb.png" /></a> 
    <a href="img02-800x400.jpg" alt="Large Image" ><img src="thumb.png" /></a> 
</div> 

... и затем добавляют Javascript ...

<script> 
    Galleria.run('#galleria-1609', { 
     thumbnails: 'numbers', 
     height: 0.5, /* ratio */ 
     preload: 1 
    }); 
</script> 

Это отлично работает для первого набора Галереи, но когда бесконечная прокрутка загружает больше сообщений, javascript лишается. После некоторых поисков я обнаружил, что Infinite Scroll имеет функцию обратного вызова с доступом к массиву новых элементов.

Так что я попробовал этот код в функции, вызываемой из бесконечной прокрутки обратного вызова:

function loadSliders(arrayOfNewElems) { 
    $(arrayOfNewElems).each(function(i) { 
     var newGal = $(this).find('.galleria'); 
     //extract ratio from 2nd class name: 
     var ratio = $(newGal).attr('class').split(' ')[1]; 
     var thisID = '#'+ $(newGal).attr('id'); 

     Galleria.run(thisID, { 
      thumbnails: 'numbers', 
      height: ratio, 
      preload: 1 
     }); 
    }); 
} 

Это делает загрузить более один набор Galleries, но терпит неудачу после того, как с этой ошибкой:

TypeError: $(...).attr(...) is undefined

Любые идеи о том, почему я получаю эту ошибку или лучшие способы ее достижения?

Answer 1

Получил это. Для тех, кто еще сталкивался с подобной проблемой. Это то, что я закончил с:

HTML:

<div id="galleria-1609" class="galleria" data-ratio="0.5"> 
    <a href="img01-800x400.jpg" alt="Large Image" ><img src="thumb.png" /></a> 
    <a href="img02-800x400.jpg" alt="Large Image" ><img src="thumb.png" /></a> 
</div> 

JS:

function loadSliders(arrayOfNewElems) { 
    $(arrayOfNewElems).each(function(i) { 
     $(this).find('.galleria').each(function(j) { 
      //var ratio = $(this).attr('class').split(' ')[1]; 
      //improved method: 
      var ratio = $(this).data('ratio'); 
      var thisID = '#'+ $(this).attr('id');  
      Galleria.run(thisID, { 
        thumbnails: 'numbers', 
        height: ratio, 
        preload: 1 
       }); 
     }); 
    }); 
} 

Обновлено показать HTML5 DATA- атрибут, как описано в моем комментарии.