Доброго времени суток уважаемые форумчане, нужно сделать ленивую загрузку для сайта с галереей fancybox. Сайт на php и javascript. Из перечисленной информации в интернете нашел только плагин lazyload.js но не понимаю, как его прикрутить. Код страницы прилагаю ниже:
function array_sort($array, $on, $order=SORT_ASC)
{
$new_array = array();
$sortable_array = array();
if (count($array) > 0) {
foreach ($array as $k => $v) {
if (is_array($v)) {
foreach ($v as $k2 => $v2) {
if ($k2 == $on) {
$sortable_array[$k] = $v2;
}
}
} else {
$sortable_array[$k] = $v;
}
}
switch ($order) {
case SORT_ASC:
asort($sortable_array);
break;
case SORT_DESC:
arsort($sortable_array);
break;
}
foreach ($sortable_array as $k => $v) {
$new_array[$k] = $array[$k];
}
}
return $new_array;
}
$imgListArray = array();
$imgExtArray = array("jpg");
$thumbsDir = "./gallery/thumbs/";
$galleryFiles = "./gallery/*/*";
foreach( glob( $galleryFiles ) as $file ) {
$ext = strtolower( pathinfo( $file, PATHINFO_EXTENSION ) );
$imagePath = pathinfo( $file, PATHINFO_DIRNAME ) . "/";
if( in_array( $ext, $imgExtArray ) && $imagePath != $thumbsDir ){
$imageName = pathinfo( $file, PATHINFO_BASENAME );
$thumbnail = $thumbsDir.$imageName;
$dataFilter = substr( $file, 10, 4 );
$imageSize = getimagesize( $file ); // image size
$imageWidth = $imageSize[0];
$imageHeight = $imageSize[1];
if( $imageHeight > $imageWidth ){
$thumbWidth = 100;
$thumbHeight = floor( $imageHeight * ( 100 / $imageWidth ) );
$thumbPosition = "margin-top: -" . floor( ( $thumbHeight - 100 ) / 2 ) . "px; margin-left: 0";
} else {
$thumbHeight = 100;
$thumbWidth = floor( $imageWidth * ( 100 / $imageHeight ) );
$thumbPosition = "margin-top: 0; margin-left: -" . floor( ( $thumbWidth - 100 ) / 2 ) . "px";
}
if ( !file_exists( $thumbnail ) ){
$createFromjpeg = imagecreatefromjpeg( $file );
$thumb_temp = imagecreatetruecolor( $thumbWidth, $thumbHeight );
imagecopyresized( $thumb_temp, $createFromjpeg, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $imageWidth, $imageHeight );
imagejpeg( $thumb_temp, $thumbnail );
}
$imgListSubArray = array(
LinkTo=>$file,
ImageName=> $imageName,
ModifyDate=> filemtime($thumbnail),
Datafilter=>$dataFilter,
Thumbnail=>$thumbnail,
Position=>$thumbPosition
);
array_push ( $imgListArray, $imgListSubArray );
}
}
unset($file); // destroy the reference after foreach()
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<meta name="author" content="" />
<link href="mini.php?type=css&files=reset,standart,style" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="/css/main.css" />
<link rel="stylesheet" type="text/css" href="/scripts/fancybox2.1.5/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="/scripts/fancybox2.1.5/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" src="jsmin.php?type=javascript&files=script,ajax"></script>
<script src="/scripts/jquery-1.8.3.min.js"></script>
<script>window.jQuery || document.write("<script src='/scripts/jquery-1.8.3.min.js'>\x3C/script>")</script>
<script src="/scripts/fancybox2.1.5/jquery.fancybox.pack.js"></script>
<script src="/scripts/fancybox2.1.5/helpers/jquery.fancybox-buttons.js"></script>
<script src="/scripts/jquery.nicescroll.js"></script>
<script>
$(document).ready(
function() {
$(".galleryWrap").niceScroll({cursoropacitymin:1,zindex:-1});
});
jQuery(function($){
$(".fancybox").fancybox({modal: true,helpers : { buttons: { } }});
$(".filter").on("click", function () {var $this = $(this);
if (!$this.hasClass("active")) {
$(".filter").removeClass("active");
$this.addClass("active"); // set the active tab
var $filter = $this.data("rel");
$filter == 'all' ?
$(".fancybox").attr("data-fancybox-group", "gallery").not(":visible").fadeIn():
$(".fancybox").fadeOut(0).filter(function () {
return $(this).data("filter") == $filter;
}).attr("data-fancybox-group", $filter).fadeIn(1000);}
});
});
</script>
</head>
<body>
<div id="wrap" class="cf">
<div id="galleryTab" class="cf">
<a data-rel="all" href="javascript:;" class="filter active">View all</a>
<?php
$galleryDir = "./gallery/*";
foreach( glob( $galleryDir, GLOB_ONLYDIR ) as $dir ) {
if( $dir != "./gallery/thumbs" ){
$dataRel = substr( $dir, 10, 4 );
dirName = trim( substr( $dir, 10, 200 ) );
echo "<a data-rel=\"" . $dataRel . "\" href=\"javascript:;\" class=\"filter\">" . $dirName . "</a>";
} if()
}
unset($dir);
?>
</div>
<div class="galleryWrap cf" >
<?php
$imgListArray = array_sort($imgListArray, 'ModifyDate', SORT_DESC);
$countedItems = count( $imgListArray );
foreach($imgListArray as $row){
echo "<a class=\"fancybox imgContainer\" data-fancybox-group=\"gallery\" href=\"" .
$row[LinkTo] . "\" data-filter=\"" .
$row[Datafilter] . "\"><img src=\"" .
$row[Thumbnail] . "\" style=\"" .
$row[Position] . "\" alt=\"" .
$row[ImageName] . "\" /></a>\n";
}
?>
<br />
</div>
</div><!--wrap-->
</div>
</html>
