Есть несколько gallery-box на одной странице с разным набором фото, которые открываются например при нажатии на ссылку "галерея 1" в модальном окне
<div class="gallery-box">
<div class="view">
<div class="big-image"><img src="<%=game.photos.first.image.url%>" width="600" height="300"></div>
<% if game.photos.count > 1 %>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<%end%>
</div>
<div class="thumbnails">
<% game.photos.each do |photo| %>
<a href="<%= photo.image.url%>"><img src="<%= photo.image.url(:thumb)%>"></a>
<%end%>
</div>
</div>
<script>
$(function() {
function a(c, d, a, f) {
var e = c.length,
b = 0;
c.each(function(g, a) {
$("img", a).on("click", function(e) {
e.preventDefault();
b = g;
$(d).stop().animate({opacity: 0}, 400, function() {
d.src = a.href; $(d).animate({opacity: 1}, 400);
});
c.removeClass("active");
$(a).addClass("active")
})
});
a.click(function(a) {
a.preventDefault();
b--;
b < 0 && (b = e - 1);
$("img", c.eq(b)).click()
});
f.click(function(a) {
a.preventDefault();
b++;
b %= e;
$("img", c.eq(b)).click()
})
}
$(".gallery-box").each(function(c, d) {
a($(".thumbnails a", d), $(".big-image img", d)[0], $(".prev", d), $(".next", d))
})
});
</script>
В каждой галерее очень много фото(150-300) и самих галерей может быть больше 10
Как сюда можно прикрутить ленивую загрузку или что сработает, чтобы получилось примерно следующее:
1)при первой загрузке страницы загружаются первые 1-3 фото в каждой галерее
2) нажимаем например на ссылку "галерея 2" , отрывается модальное окно со второй галереей и после этого начинают загружаться все фото с данной галереи
очень срочно, Help!)
