Question

我在显示图库中的图片时使用jQuery colorbox插件。因此，当我有大量图像时，我不想加载所有图像，例如，当用户点击“下一步”按钮时，我想制作ajax请求并仅检索所需图像。更多。用户点击下一步，然后我发出ajax请求并检索图像。那么，我该如何实现呢？

Answer 1

只要您知道图片的网址，就不需要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'];

“下一次”点击jQuery colorbox ajax请求

2 个答案: