jQuery colorbox ajax request on 'next' click

Question

Я использую плагин colorbox jQuery при отображении изображений из галереи. Поэтому, когда у меня есть большое количество изображений, я не хочу загружать все изображения, я хочу сделать запрос ajax и получить только необходимый образ, когда пользователь нажимает кнопку «next», например. Очше more.User нажимает следующий и после того, как я делаю запрос ajax и получаю изображение. Итак, как я могу это реализовать?

Answer 1

Вам не нужен AJAX, если вы знаете URL-адрес изображений.

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'];