подсчитать количество изображений и добавить нумерацию страниц через jQuery - PullRequest
Новая
       44

подсчитать количество изображений и добавить нумерацию страниц через jQuery

0 голосов
/ 06 августа 2011

Хорошо, у меня есть скрипт для загрузки изображений из сервиса изображений Google Picasa через JSON.Но то, что я хочу, это отображать, скажем, 40 изображений на странице.Так, если у пользователя более 40, скажем, 80, например, тогда будет добавлена ​​нумерация страниц, и те, кто щелкнет, будут показаны следующие 40 изображений.Если есть способ сделать это с помощью jQuery, может кто-нибудь сказать мне, как?Вот текущий код для захвата изображений через JSON из Picasa 

$(document).ready(function() {
         $.getJSON("http://picasaweb.google.com/data/feed/base/user/--USERNAME--/?kind=photo&access=public&alt=json&callback=?",

         function(data) {
                var target = "#picasaweb-images"; // Where is it going?
                for (i = 0; i <= 1000; i = i + 1) { // Loop through the 1000 most recent, [0-9]
                    var pic = data.feed.entry[i].media$group;
                    var liNumber = i + 1; // Add class to each LI (1-10)
                    var thumbSize = 2; // Size of thumbnail - 0=small 1=medium 2=large
                    $(target).append("<ul class='gallery'><li  class='no-" + liNumber + "'><a title='" + pic.media$description.$t + "' rel='qpLightbox' href='getPhoto.jsp?o=" + pic.media$content[0].url + "' onClick=return false;><span></span><img src='getThumb.jsp?wl=4&w=170&h=120&url=" + pic.media$thumbnail[thumbSize].url + "' class='oi'/></a></li></ul>");
                }
        });
        });

Ответы [ 2 ]

2 голосов
/ 06 августа 2011

Я не использовал ваш код, но ... чтобы дать вам идею:

Демо: http://jsfiddle.net/uf3C2/5/

0 голосов
/ 06 августа 2011

Хорошо, так что обо всем по порядку - ваши элементы

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

Я никогда раньше не имел дело с плагином для нумерации страниц, но если вы хотите новую «страницу» каждые 40 изображений, я бы сделал что-то вроде этого: 

var curPage = 0;
for( i=0; i < 1000; i++ ) {
  if( i/40 + 1 ) > curPage ) {
    if( curPage === 0 ) {
      $('#picasaweb-images').append('<div class="pic_page" id="pic_page_' + (++curPage) + '"></div>');
    } else {
      $('#pic_page_' + curPage).after('<div class="pic_page" id="pic_page_' + (++curPage) + '"></div>');
    }
  }
  $('#pic_page_' + curPage).append(... picture stuff goes here ...);
}

Разработайте ваш стильКласс «pic_page», как вам нравится, и обязательно добавьте следующее: 

.pic_page {
  display: none;
}

#pic_page_1 {
  display: block;
}

Это позволит скрыть все страницы изображений, кроме первой, для начала.

Создайте некую простую схему навигации: 

<img src='arrow-left.png' id='prev_page_arrow' />
<!-- it's either a hidden input field, or a global JS var. Pick your poison -->
<input type='hidden' id='current_page' value='1' />
<img src='arrow-right.png' id='next_page_arrow' />

И используйте jQuery, чтобы собрать все это вместе: 

$('#prev_page_arrow').click( function() {
  var curPage = parseInt($('#current_page').val(), 10);
  $('#current_page').val(curPage-1);
  $('#pic_page_' + curPage).fadeOut(400, function() {
    $('#pic_page_' + (--curPage)).fadeIn(400);
  });
});

Очевидно, вы захотите проверить вещикак страница 0, и добавьте что-нибудь, чтобы иметь дело с максимальным номером страницы, но я думаю, что это должно привести вас в правильном направлении.

...