是否需要一个可以从图片文件夹中调用，没有缩略图并且只需单击一次即可打开的灯箱画廊？

Question

Thank you all in advance for the outstanding help I know I will get, you have never let me down. 在此先感谢大家为我提供的出色帮助，您永远不会让我失望。

I need to create an image gallery that opens from a button click..no problem ( http://bcreativeservices.com/ ), I have that down. 我需要创建一个通过单击按钮打开的图片库。没有问题（ http://bcreativeservices.com/ ），我对此感到失望。 My problem is that I need the gallery to be able to call images from a folder without each image having to be listed in the page. 我的问题是我需要图库能够从文件夹中调用图像，而不必在页面中列出每个图像。 We are looking for the client to be able to upload or delete image from one folder and not have to update the "gallery" code. 我们希望客户端能够从一个文件夹上载或删除图像，而不必更新“图库”代码。

I tried working out this example ( http://jdmweb.com/creating-a-simple-image-gallery-with-php-jquery ) , which seemed perfect for what I am needing, but either the tutorial is leaving something out, or it assumes a level of knowledge and skill that I do not possess, which is the more likely answer. 我尝试了这个示例（ http://jdmweb.com/creating-a-simple-image-gallery-with-php-jquery ），这对于我需要的内容似乎很完美，但是本教程中有一些遗漏之处，或假设我不具备一定的知识和技能，这是更可能的答案。

This is the page I have been trying to work it out with: http://fosterfence.petropages-hosting.com/gallery.php I am just using the gallery button image in the middle of the page to work with, in the end it will be the gallery button in the header that I need to link. 这是我一直在尝试使用的页面： http : //fosterfence.petropages-hosting.com/gallery.php最后，我只是使用页面中间的图库按钮图像进行处理这将是我需要链接的标题中的图库按钮。 I just need to get it working first. 我只需要先使其工作即可。 I don't get any error message, no syntax errors, but I am missing something. 我没有收到任何错误消息，也没有语法错误，但是我丢失了一些东西。

Question: What am I doing incorrectly with the example I have started working with? 问题：我开始处理的示例在做什么？ This is my page: 这是我的页面：

 <!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") ?>

This is the file that calls the images from the gallery folder and writes the lightbox: 这是一个从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));
  }

}  

?>

Answer 1

$dir ='/patch/to/folder'
$image_array = scandir($dir);

will create an array of all files you have in your folder. 将创建文件夹中所有文件的数组。

foreach($image_array as $image){
echo '<img src="$image"/>';

}

assuming php file is in same folder. 假设php文件在同一文件夹中。

是否需要一个可以从图片文件夹中调用，没有缩略图并且只需单击一次即可打开的灯箱画廊？

问题描述

1 个解决方案

解决方案1
0 2014-06-26 15:49:43

是否需要一个可以从图片文件夹中调用，没有缩略图并且只需单击一次即可打开的灯箱画廊？

问题描述

1 个解决方案

解决方案1 0 2014-06-26 15:49:43

解决方案1
0 2014-06-26 15:49:43