이미지 개수를 카운트하고 jQuery를 통해 페이지 매김을 추가하십시오.

좋아, JSON을 통해 Google의 Picasa 이미지 서비스에서 이미지를 가져 오는 스크립트가 있습니다. 하지만 내가 원하는 것은 페이지 당 40 개의 이미지를 표시하는 것입니다. 예를 들어 사용자가 40 이상이면 80, 예를 들어 80이면 페이지 매김이 적용되고 클릭하면 다음 40 이미지가 표시됩니다. jQuery로이를 수행 할 수있는 방법이 있다면 어떻게 말해 줄 수 있습니까? 여기에 처음 Picasa를이미지 개수를 카운트하고 jQuery를 통해 페이지 매김을 추가하십시오.

에서 JSON을 통해

$(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>"); 
       } 
     }); 
     });

출처

2011-08-06 PT Desu

매개 변수를 숫자 페이지로 사용하십시오. showPhotos (0); 페이지 매기기 코드가 많아서 재사용 할 수 있습니다. –

좋아, 그래서 처음 일을 이미지를 잡는 현재의 코드는 - 나에게 더 잘 맞는 것 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 같은 일을 확인하기 원하고, 추가 할 것 최대 페이지 번호를 다룰 수있는 무언가이지만, 이것이 올바른 방향으로 나아갈 수 있다고 생각합니다.

출처

2011-08-06 05:32:19 wolv2012

내가 코드를 사용하지 않은하지만 ... 당신에게 아이디어를 제공합니다 :

데모 : 나는 변수로 JSON 데이터를 저장 한 후 함수로이 함께 표시되도록하는 것이 좋습니다 http://jsfiddle.net/uf3C2/5/

출처

2011-08-06 05:37:52

이미지 개수를 카운트하고 jQuery를 통해 페이지 매김을 추가하십시오.

답변

관련 문제