最大アイテムとページ番号が付いている画像ギャラリー

Question

これは私の状況です： メインページとページ区切りバーに10枚の画像が表示された画像ギャラリーがあります。イメージは、jsonファイルのforループ反復から来ました。それは問題ではない、彼らはただそこにいる;-)

何かのように： のi = 0; i < 10; i ++ スタイルと画像でdivを作成する[i] .image;

私の質問は次のとおりです。 私は2ページの次の10枚の画像を表示したい、あなたは2ページをクリックしたときに、それは11から20 までカウント私は ... jQueryの「Jpaginate'-プラグインを見つけましたこのプラグインでこれを達成できますか？ 誰かが私がバルス、カウント、オブジェクトで何かしなければならない方法で私を説明できますか？

おかげで、よろしく、 マイク

Answer 1

あなたはあなた自身のページネーションプラグインを作成することができます。 現在のページをどこかに保存して工場を変更する必要があります。

何かのように：for i = current_page * count_per_page; i < count_per_page *（現在のページ+ 1）;私は、スタイルと画像[i] .imageを使ってdivを作成します。

Answer 2

私はあなたにこれにアプローチする方法の例を挙げました。私はバグがないと言っているわけではありませんが、それは重要な概念です。あなたはいくつかのインスピレーションを見つけ、おそらくあなたの目標に到達するかもしれません。

var imgSrc = "https://s-media-cache-ak0.pinimg.com/236x/36/a5/7b/36a57b0f0ab16e885fcc230addb695c2.jpg"; 
 
var json = []; 
 
for (var i = 0; i < 36; i++) 
 
    json.push({ 
 
    Title: "Title " + (i + 1), 
 
    Source: imgSrc 
 
    }); 
 

 
/* 
 
Just for ease, I'm creating an array with 36 objects (3x3 gallery) 
 
so 9 images per page 
 
*/ 
 

 
var pageLimit = 9; 
 
var page = 1; 
 

 
showImages(); 
 

 

 
$("#btnPrevious").click(function() { 
 
    if (pageLimit <= 9) { 
 
    pageLimit = 9; 
 
    page = 1; 
 
    } else { 
 
    page--; 
 
    pageLimit -= 9; 
 
    } 
 
    showImages(); 
 
}); 
 

 
$("#btnNext").click(function() { 
 
    if (pageLimit >= json.length) { 
 
    pageLimit = json.length; 
 
    } else { 
 
    page++; 
 
    pageLimit += 9; 
 
    } 
 
    showImages(); 
 
}); 
 

 
function showImages() { 
 
    $(".images").empty(); 
 
    for (var i = pageLimit - 9; i < pageLimit; i++) { 
 
    var template = $("<div></div>").addClass("template"); 
 

 
    var img = $("<img>"); 
 
    img.attr("src", json[i].Source); 
 
    img.attr("alt", json[i].Title); 
 

 
    var br = $("<br/>"); 
 

 
    var title = $("<span></span>").html(json[i].Title); 
 

 
    template.append(img).append(br).append(title); 
 

 
    $(".images").append(template); 
 
    } 
 
    $("#page").html("Page " + page); 
 
}

.gallery { 
 
    width: 100%; 
 
    height: 500px; 
 
    border: 1px solid black; 
 
    background-color: lightgray; 
 
    text-align: center; 
 
} 
 
.images { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    height: 100%; 
 
    margin-bottom: 15px; 
 
} 
 
img { 
 
    height: auto; 
 
    width: 33%; 
 
    margin: 20px 5px; 
 
} 
 
.template { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="gallery"> 
 
    <div class="images"></div> 
 
    <button id="btnPrevious"> 
 
    &lt; Previous 
 
    </button> 
 
    <span id="page"></span> 
 
    <button id="btnNext"> 
 
    &gt; Next 
 
    </button> 
 
</div>

私はそれで吸うので（笑）、CSSを気にしないでください。それは私がjsFiddleに持っていたスペースに基づいていましたが、今ではそれを見て（全ページで、またはスニペットが提供するエリアで）ひどく見えます。 CSSの教祖がこれを解決できるならば...質問で質問しますか？