Делаю так:
в основном файле подгружаю контент при помощи AJAX.
листинг index.php
...
<div class="loading-div text-center"><img src="images/loader.gif" ></div>
<div id="results_1"><!-- content will be loaded here --></div>
...
<script>
$(document).ready(function() {
$("#results_1" ).load( "fetch_pages.php"); //load initial records
$(".loading-div").hide();
//executes code below when user click on pagination links
$("#results_1").on( "click", ".pagination a", function (e){
e.preventDefault();
$(".loading-div").show(); //show loading element
var page = $(this).attr("data-page"); //get page number from link
$("#results_1").load("fetch_pages.php",{"page":page}, function(){ //get content from PHP page
$(".loading-div").hide(); //once done, hide loading element
//$().fancybox();
});
});
});
</script>
в php к которой обращаюсь генерирую контент и пагинацию для перемещения по страницам контента (в нем же как раз FancyBox прописывается).
Листинг fetch_pages.php:
<?php
$db_username = '***'; //database username *** = секрет
$db_password = '***'; //dataabse password *** = секрет
$db_name = '***'; //database name *** = секрет
$db_host = 'localhost:3306'; //hostname or IP
$item_per_page = 3; //item to display per page
$mysqli = new mysqli($db_host, $db_username, $db_password, $db_name);
//Output any connection error
if ($mysqli->connect_error) {
die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}
else
$mysqli->set_charset( 'utf8' );
//Get page number from Ajax
if(isset($_POST["page"])){
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); //filter number
if(!is_numeric($page_number)){die('Invalid page number!');} //incase of invalid page number
}else{
$page_number = 1; //if there's no page number, set it to 1
}
$cat_id = 1;
//get total number of records from database
$results = $mysqli->query("SELECT COUNT(*) FROM `product` WHERE category_id=$cat_id");
$get_total_rows = $results->fetch_row(); //hold total records in variable
//break records into pages
$total_pages = ceil($get_total_rows[0]/$item_per_page);
//position of records
$page_position = (($page_number-1) * $item_per_page);
//Limit our results within a specified range.
$results = $mysqli->prepare("SELECT * FROM `product` WHERE category_id=$cat_id ORDER BY id ASC LIMIT $page_position, $item_per_page");
$results->execute(); //Execute prepared Query
$results->bind_result($id, $title, $description, $full_description, $price, $image, $category_id); //bind variables to prepared statement
//Display records fetched from database.
echo '<ul class="contents">';
echo '<div class="row">';
while($results->fetch()){?>
<!-- echo '<li>';
echo $id. '. <strong>' .$name.'</strong> — '.$message;
echo '</li>'; -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 EinWare">
<h3><?php echo $title?></h3>
<a class="Produktbeschreibung" href="#produkte<?php echo $id ?>"><img src="/images/<?php echo $image?>" class="Einzug3 imaginator2"></a>
<p class="EinWareP"><?php echo $description?></p>
<p class="price">Цена: <?php echo $price?> рублей</p>
<a class="Produktbeschreibung" href="#produkte<?php echo $id ?>">Подробнее</a>
<form class="variants">
<input type="button" class="buy btn btn-custom" onclick="add_to_cart(<?php echo $id?>)" value="Купить" data-result-text="Куплено"/>
</form>
</div>
<div style="display: none;">
<div id="produkte<?php echo $id ?>" class="container-fluid col-xs-10 col-sm-10 col-md-10 col-lg-10">
<h3><?php echo $title?></h3>
<div class="col-md-3">
<img src="/images/<?php echo $image?>" class="Einzug3 imaginator2">
</div>
<div class="col-md-6">
<p><?php echo $full_description?></p>
<p><?php echo $description?></p>
<p class="price">Цена: <?php echo $price?> рублей</p>
<form class="variants">
<input type="button" class="buy btn btn-custom" onclick="add_to_cart(<?php echo $id?>)" value="Купить" data-result-text="Куплено"/>
</form>
</div>
</div>
</div>
<?php
}
?>
</div>
<div class="row-fluid text-right">
<?php
echo paginate_function($item_per_page, $page_number, $get_total_rows[0], $total_pages);
?>
</div>
<?php
// echo '</div>';
function paginate_function($item_per_page, $current_page, $total_records, $total_pages)
{
$pagination = '';
if($total_pages > 0 && $total_pages != 1 && $current_page <= $total_pages){ //verify total pages and current page number
$pagination .= '<ul class="pagination">';
$right_links = $current_page + 3;
$previous = $current_page - 3; //previous link
$next = $current_page + 1; //next link
$first_link = true; //boolean var to decide our first link
if($current_page > 1){
$previous_link = ($previous<=0)?1:$current_page - 1;
$pagination .= '<li class="first"><a href="#" data-page="1" title="Первая">«</a></li>'; //first link
$pagination .= '<li><a href="#" data-page="'.$previous_link.'" title="Предыдущая"><</a></li>'; //previous link
for($i = ($current_page-2); $i < $current_page; $i++){ //Create left-hand side links
if($i > 0){
$pagination .= '<li><a href="#" data-page="'.$i.'" title="Страница '.$i.'">'.$i.'</a></li>';
}
}
$first_link = false; //set first link to false
}
if($first_link){ //if current active page is first link
$pagination .= '<li class="first active"><a href="#" data-page="'.$current_page.'" title="Страница '.$current_page.'">'.$current_page.'</a></li>';
}
elseif($current_page == $total_pages){ //if it's the last active link
$pagination .= '<li class="last active"><a href="#" data-page="'.$current_page.'" title="Страница '.$current_page.'">'.$current_page.'</a></li>';
}else{ //regular current link
$pagination .= '<li class="active"><a href="#" data-page="'.$current_page.'" title="Страница '.$current_page.'">'.$current_page.'</a></li>';
}
for($i = $current_page+1; $i < $right_links ; $i++){ //create right-hand side links
if($i<=$total_pages){
$pagination .= '<li><a href="#" data-page="'.$i.'" title="Страница '.$i.'">'.$i.'</a></li>';
}
}
if($current_page < $total_pages){
$next_link = ($i > $total_pages)? $total_pages : $i;
$pagination .= '<li><a href="#" data-page="'.$next_link.'" title="Следующая">></a></li>'; //next link
$pagination .= '<li class="last"><a href="#" data-page="'.$total_pages.'" title="Последняя">»</a></li>'; //last link
}
$pagination .= '</ul>';
}
return $pagination; //return pagination links
}
?>
<script src="/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script>
//$.noConflict();
$(document).ready(function(){
$(".Produktbeschreibung").fancybox({
'centerOnScroll' : true,
'transitionIn': 'elastic',
'transitionOut': 'elastic'
});
$(".Warenkorb_in_Rahmen").fancybox({
'width' : '75%',
'height' : '75%',
'centerOnScroll' : true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'type' : 'iframe'
});
});
</script>
Вся проблема в том, что при начальной загрузке контента FancyBox работает, а при переходе на другую страницу при помощи AJAX пагинации нет. И Еще заметил такой факт: FancyBox еще не работает если его прописывать в index.php (странно).
Простой