Понимание галереи и категорий ajax

Я пытаюсь создать галерею категорий с помощью ajax/php/mysql. На индексной странице загружается куча изображений. Они имеют ссылку href на страницу, где пользователь может видеть только выбранное изображение из этой категории. Теперь я хочу сделать две кнопки для следующих и предыдущих ссылок, чтобы пользователь мог перейти к следующему изображению из этой категории.Понимание галереи и категорий ajax

Проблема в том, что я не уверен, что я понимаю, как именно работать с частью ajax и как я могу «дать» идентификатор категории.

Это ссылка на индексной странице

<a href="test.php?image_id='.$row['image_id'].'"></a>

Это на test.php

<head> 
<script type="text/javascript"> 
$(document).ready(function() { 

    $.post("getpicture.php", { img_category: "1"}, function(data) { 
    $(".main-post").html(data); 
    }); 

    $(".main-post").on("click",".get_pic", function(e){ 
     var image_id = $(this).attr('data-id'); 
    $(".main-post").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>"); 
    $.post("getpicture.php", { img_category: 1 }, function(data) { 
    $(".main-post").html(data); 
    }); 
    return false; 
    }); 

}); 
</script> 
</head> 
<body> 
    <article class="main-post"> 
    // HERE THE IMAGE IS LOADED 
    </article> 
</body>

в этом источник в getpicture.php

//get pic id from ajax request 
if(isset($_POST["img_category"]) && is_numeric($_POST["img_category"])) 
{ 
    $current_picture = filter_var($_POST["img_category"], FILTER_SANITIZE_NUMBER_INT); 
}else{ 
    $current_picture=1; 
} 
//Connect to Database 
$mysqli = new mysqli($hostname, $username, $password, $databasename); 

if ($mysqli->connect_error){ 
    die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error); 
} 

//get next picture id 
$result = $mysqli->query("SELECT image_id FROM images WHERE image_id > $current_picture ORDER BY image_id ASC LIMIT 1")->fetch_object(); 

if($result){ 
    $next_id = $result->image_id; 
} 

//get previous picture id 
$result = $mysqli->query("SELECT image_id FROM images WHERE image_id < $current_picture ORDER BY image_id DESC LIMIT 1")->fetch_object(); 
if($result){ 
    $prev_id = $result->image_id; 
} 

//get details of current from database 
$result = $mysqli->query("SELECT image_name, image_title, image_hits FROM images WHERE img_category = $current_picture LIMIT 1")->fetch_object(); 
if($result){ 

    //construct next/previous button 
    $prev_button = (isset($prev_id) && $prev_id>0)?'<a href="#" data-id="'.$prev_id.'" class="get_pic"><img src="prev.png" border="0" /></a>':''; 
    $next_button = (isset($next_id) && $next_id>0)?'<a href="#" data-id="'.$next_id.'" class="get_pic"><img src="next.png" border="0" /></a>':''; 

//output html 
echo ' 
     <h1><a href="#">'.$result->image_title.'</a></h1> 
     <div class="pull-right"> 
     '.$prev_button.' 
     '.$next_button.' 
     </div> 
     <div class="article-content"> 
      <img src="upload/'.$result->image_name.'" alt=""/>    
     </div>';  
}

Это ясно, что I «Я немного новый в этой области и до сих пор учился, но не могу понять этого.

Сейчас я нажимаю на изображение с ID=431 на test.php загружена первая строка из базы данных id=1 и когда я нажимаю на следующей кнопке ничего не меняет .. только освежает образ, который является текущим.

UPDATE: изображение структуры таблицы

image_id 
image_name 
image_type 
image_size 
image_alt 
image_path 
img_category

image_category стол

category_id 
category_name

источник

2015-06-26 Anonymous

Прежде всего вы определили вар image_id = $ (это) .attr ('данных ID'); и никогда не использовался, вы должны передать этот image_id на свой пост ajax.

$.post("getpicture.php", { img_category: 1, imageId: image_id }, function(data) { 
    $(".main-post").html(data); 
    });

И второй ваш $ current_picture значение не зависит от $ _POST [img_category], который будет всегда иметь одинаковое значение, в данном случае 1 это зависит от $ _POST [ "image_id"]

$current_picture = $_POST["imageId"]; 
$currentCategory = $_POST["img_category"]; 
$result = $mysqli->query("SELECT image_id FROM images WHERE image_id > $current_picture and image_category=$currentCategory ORDER BY image_id ASC LIMIT 1")->fetch_object();

и так далее для вашего следующего запроса, тщательно вы должны иметь image_category поле в таблице базы данных

This сценарии является хорошим началом для обучения, рассматривать и петь firebug добавить для firefox или консоли разработчика уже установлен хром для простого способа отслеживания запросов ajax

источник

2015-06-26 13:22:10 Mosu

Спасибо за ваш ответ. Я все еще не понимаю, как ajax и getpicture.php будут знать, в какой категории? –

Также отображается пустая страница. –

Возможно, есть некоторые ошибки, я не тестировал этот код , и для первого комментария вам нужно добавить еще один атрибут вашего изображения, например, с идентификатором изображения id-category = "$ result-> category_id " – Mosu

Вы всегда отправляете то же самое значение «img_category». Это ошибка. Попытайтесь использовать это:

<script type="text/javascript"> 
    $(document).ready(function() { 
     var imageUrl = 'getpicture.php'; 
     var $mainPost = $(".main-post"); 

     var showLoader = function() { 
      $mainPost.html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>"); 
     }; 

     var getImage = function (id) {     
      var data = { 
       img_category: (typeof id !== 'undefined') ? id : 1 
      }; 

      showLoader(); 
      $.post(imageUrl, data, function(data) { 
       $mainPost.html(data); 
      }); 
     }; 

     getImage(); 

     $mainPost.on("click", ".get_pic", function(e){ 
      e.preventDefault(); 
      getImage($(this).attr('data-id')); 
      return false; 
     }); 
    }); 
</script>

источник

2015-06-26 13:27:18 tetta

Thank's. С этим снова загружается 1 id из базы данных.При нажатии следующей кнопки отображается следующее изображение, и если вторая секундная стрелка второго раза показывает пустую страницу. –

Можете ли вы предоставить структуру таблиц 'images'? – tetta

Понимание галереи и категорий ajax

ответ

Смежные вопросы