javascript - Need a lightbox gallery that calls from image folder, no thumbnails and opens from one button click? -
javascript - Need a lightbox gallery that calls from image folder, no thumbnails and opens from one button click? -
thank in advance outstanding help know get, have never allow me down.
i need create image gallery opens button click..no problem (http://bcreativeservices.com/), have down. problem need gallery able phone call images folder without each image having listed in page. looking client able upload or delete image 1 folder , not have update "gallery" code.
i tried working out illustration (http://jdmweb.com/creating-a-simple-image-gallery-with-php-jquery) , seemed perfect needing, either tutorial leaving out, or assumes level of knowledge , skill not possess, more answer.
this page have been trying work out with: http://fosterfence.petropages-hosting.com/gallery.php using gallery button image in middle of page work with, in end gallery button in header need link. need working first. don't error message, no syntax errors, missing something.
question: doing incorrectly illustration have started working with? 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 professional fencing contractor serves industrial, authorities , commercial markets in greater houston metropolitan area, louisiana , gulf coast. foster fence carries extensive range of fencing products ranging chain link , ornamental iron fencing security fences , 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 file calls images gallery folder , writes lightbox:
<?php class imggallery { //=======================================// //==========> class variables <==========// //=======================================// private $thumbsize; //size of image thumbnail private $maxsize; //size of image private $folderpath; //path folder images stored private $elements; //=======================================================================================// //================================= core methods ========================================// //=======================================================================================// //=======================================// //============> constructor <============// //=======================================// public function __construct( $thumbsize=96, //change match thumbnail size $maxsize=640, //change match maximum image size $folderpath="/gallery", //change match folder path $elements=array() ){ $this->thumbsize=$thumbsize; $this->maxsize = $maxsize; $this->folderpath = $folderpath; $this->elements = $elements; } //========================================// //=====> list images include <=====// //========================================// public function getimagearray(){ //tell class images within folder $path = $this->folderpath.'/{*.jpg,*.gif,*.png}'; $imgarray=glob($path,glob_brace)?glob($path,glob_brace):array(); homecoming $imgarray; //return found images } //=========================================// //=====> add together image gallery <=====// //=========================================// public function addimage($src){ $elements = $this->elements; $elements[] = $src; $this->elements = $elements; } //==========================================// //===> add together images folder <===// //==========================================// public function loadimages(){ $imgarray = $this->getimagearray(); if(!empty($imgarray)){foreach($imgarray $img){ $this->addimage($img); }} } //=========================================// //==> write markup gallery <===// //=========================================// public function display($showit=1){ $markup=' <div id="easyimgallery"> <ul>'; if(!empty($this->elements)){foreach($this->elements $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; } homecoming $markup; } //=========================================// //====> easy phone call set <===// //=========================================// public function getpublicside(){ $gallery = new imggallery(); $gallery->loadimages(); $gallery->display(); } //=========================================// //=====> create 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)){ homecoming substr($cachepath,1); } //if cached, homecoming right away else { //create thumbnail //getting image dimensions list($width, $height, $type, $att) = getimagesize($imgsrc); switch($type) {//saving image memory (for manipulation 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 crop size if($width > $height) $biggestside = $width; else $biggestside = $height; //the crop size half of largest side $croppercent = .5; $cropwidth = $biggestside*$croppercent; $cropheight = $biggestside*$croppercent; } else { $cropwidth = $width; $cropheight = $height; } //getting top left coordinate $c1 = array("x"=>($width-$cropwidth)/2, "y"=>($height-$cropheight)/2); // creating 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); homecoming substr($cachepath,1); } } //=========================================// //======> create max size image <======// //=========================================// public function getmaximage($src){ //get parameters $filename=$src; $size=$this->maxsize; $width=$size; $height=$size; //get cache path $cachepath = $this->folderpath.'/cache/'.$size.'x'.$size.''.str_replace("/","~",$filename); if(file_exists($cachepath)){ homecoming substr($cachepath,1); } //if cached, homecoming right away else //create image { // compute 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 image memory (for manipulation 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 image, save it, , homecoming imagecopyresampled($step1, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig); $this->cachepicture($step1,$cachepath); imagedestroy($step1); homecoming substr($cachepath,1); } } //=============================================// //==> save 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 server ?"); } homecoming $cachepath; } //=========================================================// //=> used debugging see gallery contains <=// //=========================================================// public function trace(){ highlight_string(print_r($this,true)); } } ?> $dir ='/patch/to/folder' $image_array = scandir($dir);
will create array of files have in folder.
foreach($image_array $image){ echo '<img src="$image"/>'; } assuming php file in same folder.
javascript php jquery css image-gallery
Comments
Post a Comment