CODEWITHSUNDEEP
javascriptphpjquerycssimage-gallery
TexasB
TexasB

Reputation: 85

Need a lightbox gallery that calls from image folder, no thumbnails and opens from one button click?

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. 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.

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. 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: 

<?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));
  }

}  

?>

Upvotes: 0

Views: 2163

Answers (1)

Nicco
Nicco

Reputation: 286

$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.

Upvotes: 1

Related Questions