是否需要一個可以從圖片文件夾中調用，沒有縮略圖並且只需單擊一次即可打開的燈箱畫廊？
[英]Need a lightbox gallery that calls from image folder, no thumbnails and opens from one button click?
問題描述
在此先感謝大家為我提供的出色幫助，您永遠不會讓我失望。
我需要創建一個通過單擊按鈕打開的圖片庫。沒有問題（ http://bcreativeservices.com/ ），我對此感到失望。 我的問題是我需要圖庫能夠從文件夾中調用圖像，而不必在頁面中列出每個圖像。 我們希望客戶端能夠從一個文件夾上載或刪除圖像，而不必更新“圖庫”代碼。
我嘗試了這個示例（ http://jdmweb.com/creating-a-simple-image-gallery-with-php-jquery ），這對於我需要的內容似乎很完美，但是本教程中有一些遺漏之處，或假設我不具備一定的知識和技能，這是更可能的答案。
這是我一直在嘗試使用的頁面： http : //fosterfence.petropages-hosting.com/gallery.php最后，我只是使用頁面中間的圖庫按鈕圖像進行處理這將是我需要鏈接的標題中的圖庫按鈕。 我只需要先使其工作即可。 我沒有收到任何錯誤消息，也沒有語法錯誤，但是我丟失了一些東西。
問題：我開始處理的示例在做什么？ 這是我的頁面：
<!DOCTYPE HTML>
<html>
<head>
<title>Industrial Fencing | Chain Link Fence | Security Fencing - Foster Fence, Ltd.</title>
<meta name="keywords" content="Industrial Fencing,Chain Link Fence,Security Fencing">
<meta name="description" content="Foster Fence is a professional fencing contractor that serves industrial, government and commercial markets in the Greater Houston Metropolitan area, Louisiana and the Gulf Coast. Foster Fence carries an extensive range of fencing products ranging from chain link and ornamental iron fencing to security fences and gates. ">
<meta name="author" content="PetroPages Creative Services">
<meta name="geo.region" content="US-TX" />
<meta name="geo.placename" content="Houston" />
<meta name="geo.position" content="29.861615;-95.138465" />
<meta name="ICBM" content="29.861615, -95.138465" />
<?php
//imgallery PHP Class
include("imgallery.php");
?>
<!--Scripts (jQuery + LightBox Plugin + imgallery Script)-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<script type="text/javascript" src="js/imgallery.js"></script>
<!--CSS (LightBox CSS + imgallery CSS)-->
<link rel="stylesheet" type="text/css" href="css/lightbox.css" />
<link rel="stylesheet" type="text/css" href="css/imgallery.css" />
<?php include_once("header.php") ?>
<div class="content">
<a href="/gallery/ameristar.jpg" class="lightbox" rel="gallery" title="Gallery">
<img src="/images/gallery_btn.png" alt="image1.jpg" />
</a>
</div>
</div>
<?php include_once("footer.php") ?>
這是一個從Gallery文件夾調用圖像並寫入燈箱的文件：
<?php
class ImgGallery {
//=======================================//
//==========> Class Variables <==========//
//=======================================//
private $thumbsize; //Size of the image thumbnail
private $maxsize; //Size of the image
private $folderpath; //Path to the folder where the images are stored
private $elements;
//=======================================================================================//
//================================= Core Methods ========================================//
//=======================================================================================//
//=======================================//
//============> Constructor <============//
//=======================================//
public function __construct(
$thumbsize=96, //Change this to match your thumbnail size
$maxsize=640, //Change this to match your maximum image size
$folderpath="/gallery", //Change this to match your folder path
$elements=array()
){
$this->thumbsize=$thumbsize;
$this->maxsize = $maxsize;
$this->folderpath = $folderpath;
$this->elements = $elements;
}
//========================================//
//=====> List the images to include <=====//
//========================================//
public function getImageArray(){
//Tell the class to look for images inside this folder
$path = $this->folderpath.'/{*.jpg,*.gif,*.png}';
$imgarray=glob($path,GLOB_BRACE)?glob($path,GLOB_BRACE):array();
return $imgarray; //Return the found images
}
//=========================================//
//=====> Add an image to the gallery <=====//
//=========================================//
public function addImage($src){
$elements = $this->elements;
$elements[] = $src;
$this->elements = $elements;
}
//==========================================//
//===> Add all the images from a folder <===//
//==========================================//
public function loadImages(){
$imgarray = $this->getImageArray();
if(!empty($imgarray)){foreach($imgarray as $img){ $this->addImage($img); }}
}
//=========================================//
//==> Write the markup for the gallery <===//
//=========================================//
public function display($showit=1){
$markup='
<div id="easyimgallery">
<ul>';
if(!empty($this->elements)){foreach($this->elements as $img){
$thumb=$this->getImageThumbnail($img);
$maxsize=$this->getMaxImage($img);
$imgname=end(explode("/",$img));
$markup.='<li><a href="'.$maxsize.'" class="lightbox" title="'.$imgname.'">
<img src="'.$thumb.'" alt="'.$imgname.'" />
</a></li>';
}}
$markup.='
</ul>
</div>';
if($showit==1){ echo $markup; }
return $markup;
}
//=========================================//
//====> Easy call to set everything up <===//
//=========================================//
public function getPublicSide(){
$gallery = new ImgGallery();
$gallery->loadImages();
$gallery->display();
}
//=========================================//
//=====> Create the image thumbnail <======//
//=========================================//
public function getImageThumbnail($src){
$size=$this->thumbsize;
$imgSrc = $src;
//cached img
$cachepath = $this->folderpath.'/cache/'.$size.'x'.$size.''.str_replace("/","~",$imgSrc);
if(file_exists($cachepath)){ return substr($cachepath,1); } //If cached, return right away
else { //Create the thumbnail
//getting the image dimensions
list($width, $height, $type, $att) = getimagesize($imgSrc);
switch($type) {//saving the image into memory (for manipulation with GD Library)
case 1: $myImage = imagecreatefromgif($imgSrc); break;
case 2: $myImage = imagecreatefromjpeg($imgSrc); break;
case 3: $myImage = imagecreatefrompng($imgSrc); break;
}
if($width>$size || $height>$size) {
//setting the crop size
if($width > $height) $biggestSide = $width;
else $biggestSide = $height;
//The crop size will be half that of the largest side
$cropPercent = .5;
$cropWidth = $biggestSide*$cropPercent;
$cropHeight = $biggestSide*$cropPercent;
}
else { $cropWidth = $width; $cropHeight = $height; }
//getting the top left coordinate
$c1 = array("x"=>($width-$cropWidth)/2, "y"=>($height-$cropHeight)/2);
// Creating the thumbnail
$thumbSize = $size;
$thumb = imagecreatetruecolor($thumbSize, $thumbSize);
imagecopyresampled($thumb, $myImage, 0, 0, $c1['x'], $c1['y'], $thumbSize, $thumbSize, $cropWidth, $cropHeight);
//final output
$this->cachePicture($thumb,$cachepath);
imagedestroy($thumb);
return substr($cachepath,1);
}
}
//=========================================//
//======> Create the max size image <======//
//=========================================//
public function getMaxImage($src){
//Get the parameters
$filename=$src;
$size=$this->maxsize;
$width=$size;
$height=$size;
//Get the cache path
$cachepath = $this->folderpath.'/cache/'.$size.'x'.$size.''.str_replace("/","~",$filename);
if(file_exists($cachepath)){ return substr($cachepath,1); } //If cached, return right away
else //Create the image
{
// Compute the new dimensions
list($width_orig, $height_orig, $type, $att) = getimagesize($filename);
if($width_orig>$size || $height_orig>$size) {
$ratio_orig = $width_orig/$height_orig;
if ($width/$height > $ratio_orig) { $width = $height*$ratio_orig; }
else { $height = $width/$ratio_orig; }
}
else { $width=$width_orig; $height=$height_orig; }
//Create the image into memory (for manipulation with GD Library)
$step1 = imagecreatetruecolor($width, $height);
switch($type) {
case 1: $image = imagecreatefromgif($filename); break;
case 2: $image = imagecreatefromjpeg($filename); break;
case 3: $image = imagecreatefrompng($filename); break;
}
//Resize the image, save it, and return it
imagecopyresampled($step1, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);
$this->cachePicture($step1,$cachepath);
ImageDestroy($step1);
return substr($cachepath,1);
}
}
//=============================================//
//==> Save the dynamically created pictures <==//
//=============================================//
public function cachePicture($im,$cachepath){
if(!is_dir(dirname($cachepath))){ mkdir(dirname($cachepath)); }
if (function_exists("imagepng")) { imagepng($im,$cachepath); }
elseif (function_exists("imagegif")) { imagegif($im,$cachepath); }
elseif (function_exists("imagejpeg")) { imagejpeg($im,$cachepath, 0.5); }
elseif (function_exists("imagewbmp")) { imagewbmp($im,$cachepath);}
else { die("Doh ! No graphical functions on this server ?"); }
return $cachepath;
}
//=========================================================//
//=> Used for debugging to see what the gallery contains <=//
//=========================================================//
public function trace(){
highlight_string(print_r($this,true));
}
}
?>
1 個解決方案
解決方案1
0 2014-06-26 15:49:43
$dir ='/patch/to/folder'
$image_array = scandir($dir);
將創建文件夾中所有文件的數組。
foreach($image_array as $image){
echo '<img src="$image"/>';
}
假設php文件在同一文件夾中。
圖像滑塊，可通過單擊不同按鈕打開不同文件夾中的圖像
[英]Image Slider that opens images from different folders on different button click
為縮略圖庫和較大的圖像庫添加下一個和上一個按鈕
[英]Adding Next and Prev Button for Thumbnails Gallery and Larger Image Gallery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.