jQuery colorbox ajaxリクエストon 'next'

Question

ギャラリーから画像を表示するときにjQuery colorboxプラグインを使用します。だから、私は大量の画像を持っているとき、私はすべての画像をロードしたくない、私はAJAXの要求を作成し、ユーザーが '次の'ボタンをクリックしたときに必要な画像だけを取得したい。 これ以上。ユーザーがクリックすると、Ajaxをリクエストしてイメージを取得した後で、 これはどうやって実装できますか？

Answer 1

イメージのURLを知っている限り、AJAXは必要ありません。

var counter = 0; 
var images = ['/url/to/image1.jpg', '/url/to/image2.jpg', '/url/to/image3.jpg']; 
$("#next_button").click(function() { 
    counter ++; 
    $("#my_image").attr("src", images[counter]); 
} 

私はあなたが「以前」ボタンを追加してみましょうよ、と若干の誤差が（など、あなたが配列の末尾をオフに行っていませんでしたことを確認してください）をチェックします。

Answer 2

HTML：

<img id="[[image_db_id]]" class="theImage" src="url/for/my/first/image.jpg" /> 
<a href="#null" class="goButton" id="prev">Prev</a> | <a href="#null" class="goButton" id="next">Next</a> 

JS：

$(".goButton").click(function() { 
    var dir = $(this).attr("id"); 
    var imId = $(".theImage").attr("id"); 
    $.ajax({ 
     url: "path_to_your_ajax_script.php", 
     data: { 
     current_image: imId, 
     direction : dir 
     }, 
     success: function(ret) { 
     $("#theImage").attr("src", ret); 
     if ('prev' == dir) { 
      imId ++; 
     } else { 
      imId --; 
     } 
     $("#theImage").attr("id", imId); 
     } 
    }); 
}); 

PHP

<?php 
if ("prev" == $_POST['direction']) { 
    $id = $_POST['current_image'] - 1; 
} else { 
    $id = $_POST['current_image'] + 1; 
} 
$q = yourQueryFunction("SELECT url FROM images WHERE id = '".mysql_real_escape_string($id)."'"); 
print $q['url'];