Как добавить собственное описание в Galleria в приложении Rails?

Я использую Galleria (классическая версия) и не могу добавить собственное описание к изображениям. В остальном галерея работает нормально, только я вижу имя файла img в заголовке.

Я пытаюсь использовать функцию dataConfig - http://galleria.io/docs/options/dataConfig/ . Я не очень хорошо разбираюсь в JavaScript, поэтому не могу понять, что делаю не так.

Мой код:

 <div id="galleria">
   <% for image in @trip.images %>  
   <%= link_to image_tag(image.image.url(:thumb)), image.image.url(:large) %> 
 <span class="desc"> <%= image.title %>  </span>
   <% end %>
</div>
<script>

    Galleria.run('#galleria');
    Galleria.configure({
         minScaleRatio: 1.5,
         maxScaleRatio: 3,
         dataConfig: function(img) { return { description: $(img).next('.desc').html() }; }

   });

</script>
</div>

Не могли бы вы помочь? Спасибо!

Обновление: сгенерирован HTML-код

 <div id="galleria">
   <a  href="http://s3.amazonaws.com/Thrill/images/439/large/14d8868ac166ce1.54701969.JPG?1326357617"><img alt="14d8868ac166ce1.54701969" src="http://s3.amazonaws.com/Thrill/images/439/thumb/14d8868ac166ce1.54701969.JPG?1326357617" /></a>  
   <span class="desc" style=""> aaaaaaaaaaaaaaa </span>
   <a href="http://s3.amazonaws.com/Thrill/images/440/large/14c77a671ced5e4.22721576.JPG?1326357627"><img alt="14c77a671ced5e4.22721576" src="http://s3.amazonaws.com/Thrill/images/440/thumb/14c77a671ced5e4.22721576.JPG?1326357627" /></a>   
   <span class="desc" style=""> bbbbbbbbbbbbbbbbbbbbbbbbb </span>
 </div>

ruby-on-rails javascript caption galleria
person emilsw    schedule 09.08.2012    source источник
comment
Не могли бы вы опубликовать сгенерированный HTML-код?   -  person David Hellsing    schedule 11.08.2012
comment
Да, вы можете увидеть это в моем обновлении.   -  person emilsw    schedule 12.08.2012

Ответы (2)


arrow_upward
0
arrow_downward

Это должно работать: http://jsfiddle.net/7g7am/

Galleria.run('#galleria', {
    dataConfig: function(img) {
        return {
            description: $(img).parent().next('.desc').html()
        };
    }
});
​
person David Hellsing    schedule 13.08.2012
comment
Да, я изменил код, как в вашем примере, и он работает. Спасибо! - person emilsw; 13.08.2012

arrow_upward
0
arrow_downward

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

$(img).parent().next('.desc').html()

Надеюсь, это решение.

person pkubicki    schedule 09.08.2012
comment
Спасибо, но после этого никаких изменений. - person emilsw; 10.08.2012
comment
Он должен хорошо ориентироваться, возможно, есть другие проблемы. Вы заметили какие-либо ошибки JS? - person pkubicki; 10.08.2012