Помогите загрузить галерею "Галерея" с .load - PullRequest
Новая
       12

Помогите загрузить галерею "Галерея" с .load

0 голосов
/ 02 мая 2011

У меня есть галерея изображений из 100+ изображений, чтобы она загружалась быстрее, я хочу разделить ее на группы по 30. На странице есть навигация «Галерея 1 2 3 4 5», и когда пользователь нажимает любуюиз чисел, которые я хочу загрузить ссылку на ссылку в "#rCol" - но только в раздел "#galleria".Я могу заставить его загружать контент, но он A) загружает всю страницу и B) функциональность "galleria" не включена.

Можно ли создать XML-файл, содержащий все изображения, и создатьпейджер, который пропускает 30 одновременно?

Я пытаюсь сделать переменную из ссылки href, поэтому мне не нужно добавлять класс для каждого и писать функцию для каждого класса.

$("ul#gallery li a").live('click',function(e) {
        e.preventDefault();
        var $parent = $(this).parent();
        $parent.addClass("selected").siblings().removeClass("selected");
        var href = $(this).attr('href');
        $("#rCol").load(href, function() {
            $("#galleria").galleria();
        });
    });

// Initialize Galleria
$("#galleria").galleria({
    transition: 'fade',
    width: 800,
    height: 536,


    extend: function(options) {

        Galleria.log(this) // the gallery instance
        Galleria.log(options) // the gallery options

        // listen to when an image is shown
        this.bind('image', function(e) {

            Galleria.log(e) // the event object may contain custom objects, in this case the main image
            Galleria.log(e.imageTarget) // the current image

            // lets make galleria open a lightbox when clicking the main image:
            $(e.imageTarget).click(this.proxy(function() {
               this.openLightbox();
            }));
        });
    }
});

есть идеи?

Попытка переинициализировать функцию "galleria" здесь .все виды проблем, не обновляя миниатюры, затем после нажатия на альбом 2, возвращаясь к альбому 1, он загружает всю страницу в div. 

$("ul#gallery li a").live('click',function(e) {
        e.preventDefault();
        var $parent = $(this).parent();
        $parent.addClass("selected").siblings().removeClass("selected");
        var href = $(this).attr('href');
        $("#rCol").load(href, function() {
            $("#galleria").galleria({
                              transition: 'fade',
                              width: 800,
                              height: 536,


                              extend: function(options) {

                              Galleria.log(this) // the gallery instance
                              Galleria.log(options) // the gallery options

                              // listen to when an image is shown
                              this.bind('image', function(e) {

                              Galleria.log(e) // the event object may contain custom objects, in this case the main image
                              Galleria.log(e.imageTarget) // the current image

            // lets make galleria open a lightbox when clicking the main image:
            $(e.imageTarget).click(this.proxy(function() {
                this.openLightbox();
            }));
            });
        }



                            });
        });
    });

1 Ответ

1 голос
/ 03 мая 2011

Галерея (ваш HTML будет примерно таким. Верно?) 

<div id="rCol">
  <div id="galleria">
    <ul>
      <li><img src="" alt /></li>
      <li><img src="" alt /></li>
      <!-- etc -->
    </ul>
  </div>
</div>

Навигационные ссылки (семантика ваших навигационных ссылок не имеет большого значения) 

<ul id="galleria-nav">
  <li><a href="?page=1">...</a></li>
  <li><a href="?page=2">...</a></li>
  <!-- etc -->
</ul>

Javascripts (это важная часть) 

<script>
function loadPage(href) {
  // do ajax call, with success handler:
  $.post(href, function(rsp) {
    // `rsp` is now the ENTIRE html page (incl <html> etc????)
    // what you should do here, is filter the HTML, so you keep only div#galleria
    // I can't do that here, because I have no idea what your actual HTML looks like
    $('rCol').html(rsp);
    initGalleryClickables();
  }, null); // the `null` is just to show you there's no actual POST data
}
function initGalleryClickables() {
  // reinit the galleria plugin (DOM changed)
  $("#galleria").galleria({
    transition: 'fade',
    // more settings that you already have in your code
  });
  // reinit gallery image links? for lightbox or something? maybe not...
}
// no point in reiniting the nav links: their DOM doesn't change
$('#galleria-nav a').click(function(e) {
  e.preventDefault(); // it's not a link
  loadPage(this.href);
});
</script>

Мне не нравится jQuery.live и стараюсь избегать этого. Он использует пузыри и в больших DOM, что просто неэффективно. Во многих случаях это тоже не нужно. Как этот.

Я думаю, что в вашем случае проблема заключается в ответе, который вы получаете на запрос ajax (см. Встроенный комментарий). Возможно, вам удастся отфильтровать нужный фрагмент HTML с помощью Javascript, но намного лучше, если бы эта фильтрация выполнялась на стороне сервера. Я предполагаю, что у вас есть доступ к выходному скрипту. Достаточно нескольких if.

редактировать
Вы можете использовать .live для навигационных ссылок (и ссылок на изображения галереи, если они есть (ссылки)), но вам все равно придется повторно инициализировать плагин galleria, поэтому я не использую .live и повторно инициализирую весь вещь

Как я уже сказал: вам нужно отфильтровать правильный фрагмент HTML. Желательно на стороне сервера (меньше скачиваний и проще фильтрация, чем в Javascript). Я не могу помочь вам с этим, если вы не покажете мне код на стороне сервера =)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...