I'm trying to create a photo gallery for a friend's website. I dont have access to any kind of database, so I want to use PHP and java script to do everything. One of those things is create thumbnails from the original images. Originally I was going to put a different php file in each folder where the images are located like this:
Code: Select all
root
-DLS
-weddings
-weddings.php
-w1.jpg
-w2.jpg
...
-portraits
-portraits.php
-p1.jpg
-p2.jpg
...
etc.I decided that I wanted to have 1 php file and I would pass in the gallery title as the argument So i rearragend the directory structure like so:
Code: Select all
root
-DLS
-gallery.php
-weddings
-w1.jpg
-w2.jpg
...
-portraits
-p1.jpg
-p2.jpgWarning: imagejpeg() [function.imagejpeg]: Unable to open '/w16_th.jpg' for writing: Permission denied in /home/firstfoc/public_html/DLS/gallery2.php on line 209
Can anyone help me out here?
The file is named gallery.php and to tell it which directory to use for the images you pass it a value name gallery so for example .../gallery.php?gallery=weddings SHOULD create thumbnails for all images within the weddings folder and display them along with a larger version.
Here is all of the code:
Code: Select all
<?php
if (isset($_REQUEST['gallery'])) {
$gallery = $_REQUEST['gallery'];
}
else{
echo 'There has been an error processing your request:<br /> Gallery missing from URL';
}
$galleryURL = $gallery.'/';
$columns = 5;
$thmb_height = 78;
$thmb_width = 92;
$big_width = 518;
$big_height = 368;
function createJavaScript(){
echo'
<script language="javascript" type="text/javascript">
function bcChange(divname){
document.getElementById(divname).style.borderLeftColor = "#DEF7F7";
document.getElementById(divname).style.borderRightColor = "#DEF7F7";
document.getElementById(divname).style.borderTopColor = "#DEF7F7";
document.getElementById(divname).style.borderBottomColor = "#DEF7F7";
}
function bcChangeBack(divname){
document.getElementById(divname).style.borderLeftColor = "#FFFFFF";
document.getElementById(divname).style.borderRightColor = "#FFFFFF";
document.getElementById(divname).style.borderTopColor = "#FFFFFF";
document.getElementById(divname).style.borderBottomColor = "#FFFFFF";
}
</script>
';}
function createCSS(){
global $thmb_height, $thmb_width, $big_width, $big_height;
echo'
<style type="text/css">
#big_image{
width:'.$big_width.'px;
height:'.$big_height.'px;
background-color:#FFFFFF;
background-repeat: no-repeat;
background-position: center;
border-top: 6px solid #FFFFFF; border-bottom: 6px solid #FFFFFF; border-left: 6px solid #FFFFFF; border-right: 6px solid #FFFFFF;
z-index:10;
}
#thumbs_row{
width:530px;
height:82px;
background-color:#FFFFFF;
border-top: 2px solid #FFFFFF;
z-index:10;
}
#div_spacer{
float:left;
width:4px;
height:70px;
}
#image1{
float:left;
width:'.$thmb_width.'px;
height:'.$thmb_height.'px;
background-color:#ffffff;
background-repeat: no-repeat;
background-position: center;
border-top: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; border-left:2px solid #FFFFFF; border-right: 2px solid #FFFFFF;
z-index:20;
}
#image2{
float:left;
width:'.$thmb_width.'px;
height:'.$thmb_height.'px;
background-color:#ffffff;
background-repeat: no-repeat;
background-position: center;
border-top: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; border-left:2px solid #FFFFFF; border-right: 2px solid #FFFFFF;
z-index:20;
}
#image3{
float:left;
width:'.$thmb_width.'px;
height:'.$thmb_height.'px;
background-color:#ffffff;
background-repeat: no-repeat;
background-position: center;
border-top: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; border-left:2px solid #FFFFFF; border-right: 2px solid #FFFFFF;
z-index:20;
}
#image4{
float:left;
width:'.$thmb_width.'px;
height:'.$thmb_height.'px;
background-color:#ffffff;
background-repeat: no-repeat;
background-position: center;
border-top: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; border-left:2px solid #FFFFFF; border-right: 2px solid #FFFFFF;
z-index:20;
}
#image5{
float:left;
width:'.$thmb_width.'px;
height:'.$thmb_height.'px;
background-color:#ffffff;
background-repeat: no-repeat;
background-position: center;
border-top: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; border-left:2px solid #FFFFFF; border-right: 2px solid #FFFFFF;
z-index:20;
}
#next_image{
float:left;
background-url: (images/RightArrow.png);
background-color:#000000;
background-repeat: no-repeat;
width:12px;
background-color:#FFFFFF;
height:'.$thmb_height.'px;
border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;
z-index:20;
}
#prev_image{
float:left;
background-url: (images/LeftArrow.png);
background-color:#000000;
background-repeat: no-repeat;
width:12px;
background-color:#FFFFFF;
height:'.$thmb_height.'px;
border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;
z-index:20;
}
</style>
';
}
if (isset($_REQUEST['x'])) {
$x = $_REQUEST['x'];
if ($x < -1){
$x = -1;
}
}
else {
$x = -1;
}
//resizes the original image to a specified widith and height
function resizeImage($originalImage,$toWidth,$toHeight){
// Get the original geometry and calculate scales
list($width, $height) = getimagesize($originalImage);
$xscale=$width/$toWidth;
$yscale=$height/$toHeight;
// Recalculate new size with default ratio
if ($yscale>$xscale){
$new_width = round($width * (1/$yscale));
$new_height = round($height * (1/$yscale));
}
else {
$new_width = round($width * (1/$xscale));
$new_height = round($height * (1/$xscale));
}
$imageResized = imagecreatetruecolor($new_width, $new_height);
$imageTmp = imagecreatefromjpeg ($originalImage);
imagecopyresampled($imageResized, $imageTmp, 0, 0, 0, 0,
$new_width, $new_height, $width, $height);
return $imageResized;
}
//checks all files in the directory to see if they have a thumbnail, if not, then create a thumbnail
function generateThumbnails(){
global $thmb_width,$thmb_height,$galleryURL;
if ($handle = opendir($galleryURL)) {
while(false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
//Begin Checking to see if image is a thumb nail
if (strpos($file,'_th.jpg')){
$isThumb = true;
}
else {
$isThumb = false;
}
if (!$isThumb) {
// Process the file string
if (strlen($dirName) < 1) $dirName = $galeryURL;
$fileName = basename($file);
$fileMain = substr($fileName,0,strrpos($fileName,'.'));
$extName = substr($fileName,strrpos($fileName,'.'),
strlen($fileName)-strrpos($fileName,'.'));
// Check if the actual file is a jpeg image
if (($extName == '.jpg') || ($extName == '.jpeg')){
$thmbFile = $dirName.'/'.$fileMain.'_th.jpg';
// If a thumbnail dosn't exists tahn create a new one
if (!file_exists($thmbFile)){
imagejpeg(resizeImage($galleryURL.$file,$thmb_width,$thmb_height)
,$thmbFile,80);
}
}
}
}
}
}
}
function getNormalImage($file){
$base = substr($file,0,strrpos($file,'_th.jpg'));
if (file_exists($base.'.jpg')) return $base.'.jpg';
elseif (file_exists($base.'.jpeg')) return $base.'.jpeg';
else return "problem";
}
function displayPhotos(){
global $columns,$thmb_width,$thmb_height,$x,$big_width,$big_height,$galleryURL,$gallery;
generateThumbnails();
if ($handle = opendir($galleryURL)) {
$i = 0;
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
//check to see if the file is a thumbnail by checking to see if the filename contains _th.jpg
if (strpos($file,'_th.jpg')){
//add the image name to the array $imagesArray[]
$imagesArray[$i] = $file;
echo $file;
$i++;
}
}
}
closedir($handle);
}
if (isset($_REQUEST['image'])) {
$pic = $_REQUEST['image'];
}
else {
$pic = getNormalImage($galleryURL.$imagesArray[0]);
}
echo '
<div id="big_image" align="center" style="background-image: url('.$pic.');">
</div>
<div id="thumbs_row">
<div id="prev_image" align="center">
<a href="gallery.php?gallery='.$gallery.'&x='.($x-5).'"><img border="0" src="images/LeftArrow.png" alt="Previous Images"/></a>
</div>
<div id="div_spacer" style="width:5px;"></div>
<div id="image1" align="center" style="background-image: url('.$galleryURL.$imagesArray[($x+1)].');" onMouseOver="bcChange(\'image1\')" onMouseOut="bcChangeBack(\'image1\')">
<a href="gallery.php?gallery='.$gallery.'&x='.$x.'&image='.getNormalImage($galleryURL.$imagesArray[($x+1)]).'"><img src="images/spacer.gif" border="0" /></a></div>
<div id="div_spacer"></div>
<div id="image2" align="center" style="background-image: url('.$galleryURL.$imagesArray[($x+2)].');" onMouseOver="bcChange(\'image2\')" onMouseOut="bcChangeBack(\'image2\')">
<a href="gallery.php?gallery='.$gallery.'&x='.$x.'&image='.getNormalImage($galleryURL.$imagesArray[($x+2)]).'"><img src="images/spacer.gif" border="0" /></a></div>
<div id="div_spacer"></div>
<div id="image3" align="center" style="background-image: url('.$galleryURL.$imagesArray[($x+3)].');" onMouseOver="bcChange(\'image3\')" onMouseOut="bcChangeBack(\'image3\')">
<a href="gallery.php?gallery='.$gallery.'&x='.$x.'&image='.getNormalImage($galleryURL.$imagesArray[($x+3)]).'"><img src="images/spacer.gif" border="0" /></a></div>
<div id="div_spacer"></div>
<div id="image4" align="center" style="background-image: url('.$galleryURL.$imagesArray[($x+4)].');" onMouseOver="bcChange(\'image4\')" onMouseOut="bcChangeBack(\'image4\')">
<a href="gallery.php?gallery='.$gallery.'&x='.$x.'&image='.getNormalImage($galleryURL.$imagesArray[($x+4)]).'"><img src="images/spacer.gif" border="0" /></a></div>
<div id="div_spacer"></div>
<div id="image5" align="center" style="background-image: url('.$galleryURL.$imagesArray[($x+5)].');" onMouseOver="bcChange(\'image5\')" onMouseOut="bcChangeBack(\'image5\')">
<a href="gallery.php?gallery='.$gallery.'&x='.$x.'&image='.getNormalImage($galleryURL.$imagesArray[($x+5)]).'"><img src="images/spacer.gif" border="0" /></a></div>
<div id="div_spacer" style="width:5px;"></div>
<div id="next_image" align="center"><a href="gallery.php?gallery='.$gallery.'&x='.($x+5).'&image='.$pic.'"><img border="0" src="images/RightArrow.png" alt="Next Images"/></a></div>
</div>
';
}
?>Code: Select all
<html>
<head>
<?php createJavaScript(); ?>
<?php createCSS(); ?>
</head>
<body>
<?php displayPhotos(); ?>
</body>
</html>Can anyone help me?