...

View Full Version : Lightbox Issues



wayne3503
08-07-2007, 02:59 AM
Ok I just came across Lightbox and dang is that cool. Anyway even though it is easy to intigrate im having issues getting it working with my code. Am I doing this right?
Here is my code and what I am doing.

<html>
<head>
<title>Your Personal Images</title>
</head>
<body>
<style>
body {
background: #fff;
}
fieldset {
background:#fff;
width: 500px;
}
#message {
font-size: .95 em;
color: #FF0000;
font-style: italic;
font-weight: bold;
}
#delete {
clear: both;
width: 500px;
}
display {
background:#fff;
}
</style>

<div align="center">
<?php
if (isset($message))
{
echo '<div id="message">'.$message.'</div>';
}
?>



<?php
echo '<fieldset class="display">';
echo '<div class="display" align="left" >';
$sql = "SELECT * FROM images ORDER BY id ASC";
$query = mysql_query($sql);
$count = mysql_num_rows($query);
if ($count == 0)
{
echo 'No pictures have been uploaded';
}
else
{
echo ' <form action="" method="POST">';
while ($rows = mysql_fetch_array($query))
{
echo '<div style="border: 2px solid #fff; margin: 5px; float: left;">
<div>
<img src="images/thumbs/' . $rows['id'] . $rows['ext'] . '"/>
</div>
<div>
<input type="hidden" name="image_name" value="' . $rows['image_name'] . '">
<input type="checkbox" name="' . $rows['id'] . '" value="delete">
</div>
</div>';
}
echo '<div id="delete"><input type="submit" name="delete" value="Delete Images"></div>
</form>';
}
echo '</div>';
echo '</fieldset>';
?>

Then I change these parts above to this...


<html>
<head>
<title>Your Personal Images</title>
<script type="text/javascript" src="../scripts/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="../scripts/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../scripts/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="../scripts/lightbox/css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
and this...

<?php
echo '<fieldset class="display">';
echo '<div class="display" align="left" >';
$sql = "SELECT * FROM images ORDER BY id ASC";
$query = mysql_query($sql);
$count = mysql_num_rows($query);
if ($count == 0)
{
echo 'No pictures have been uploaded';
}
else
{
echo ' <form action="" method="POST">';
while ($rows = mysql_fetch_array($query))
{
echo '<div style="border: 2px solid #fff; margin: 5px; float: left;">
<div>
<a href="images/thumbs/' . $rows['id'] . $rows['ext'] . '" rel="lightbox"></a>
</div>
<div>
<input type="hidden" name="image_name" value="' . $rows['image_name'] . '">
<input type="checkbox" name="' . $rows['id'] . '" value="delete">
</div>
</div>';
}
echo '<div id="delete"><input type="submit" name="delete" value="Delete Images"></div>
</form>';
}
echo '</div>';
echo '</fieldset>';
?>

With the code edits I have made the page comes up and everything but my images dont. I am assuming that the issue lies in my <a href=""><a/> syntax since I did try that by itself and got the same results. So what am I doing wrong?
Thanks alot for the help.

TheShaner
08-07-2007, 03:07 AM
The <a> tag is an anchor, AKA a link. I've never used lightbox, so i'm not sure how the javascript works in it, but an <a> tag will not display a picture, esp. an empty one. If you are supposed to have a link on the image, then it should probably look like:

<a href="images/thumbs/' . $rows['id'] . $rows['ext'] . '" rel="lightbox"><img src="images/thumbs/' . $rows['id'] . $rows['ext'] . '"/></a>
In the code above, the image tag is enclosed by the anchor tag so that the image is "clickable".

-Shane

wayne3503
08-07-2007, 06:34 AM
well that worked. thanks

wayne3503
08-08-2007, 04:33 PM
Well im having one other issue now that I am uploading my stuff to the server and Imnot sure why im getting it since everything works perfectly when ran localy. Anyway this is the error I am getting
Parse error: parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /home/millerm/public_html/hotspot/cms/includes/class.thumbnail.php on line 21
Any ideas?

Thanks again for your help This is an awesome class and it works perfectly locally. So it almost makes me wonder if its not a php4 vs. php5 thing? I am running 4.3.11 on the server and 5 localy. anyway here it is

<?php
/**
* thumbnail.inc.php
*
* @author Ian Selby (ian@gen-x-design.com)
* @copyright Copyright 2006
* @version 1.1 (PHP5)
*
*/

/**
* PHP class for dynamically resizing, cropping, and rotating images for thumbnail purposes and either displaying them on-the-fly or saving them.
*
*/
class Thumbnail {
/**
* Error message to display, if any
*
* @var string
*/
private $errmsg;
/**
* Whether or not there is an error
*
* @var boolean
*/
private $error;
/**
* Format of the image file
*
* @var string
*/
private $format;
/**
* File name and path of the image file
*
* @var string
*/
private $fileName;
/**
* Image meta data if any is available (jpeg/tiff) via the exif library
*
* @var array
*/
public $imageMeta;
/**
* Current dimensions of working image
*
* @var array
*/
private $currentDimensions;
/**
* New dimensions of working image
*
* @var array
*/
private $newDimensions;
/**
* Image resource for newly manipulated image
*
* @var resource
*/
private $newImage;
/**
* Image resource for image before previous manipulation
*
* @var resource
*/
private $oldImage;
/**
* Image resource for image being currently manipulated
*
* @var resource
*/
private $workingImage;
/**
* Percentage to resize image by
*
* @var int
*/
private $percent;
/**
* Maximum width of image during resize
*
* @var int
*/
private $maxWidth;
/**
* Maximum height of image during resize
*
* @var int
*/
private $maxHeight;

/**
* Class constructor
*
* @param string $fileName
* @return Thumbnail
*/
public function __construct($fileName) {
//make sure the GD library is installed
if(!function_exists("gd_info")) {
echo 'You do not have the GD Library installed. This class requires the GD library to function properly.' . "\n";
echo 'visit http://us2.php.net/manual/en/ref.image.php for more information';
exit;
}
//initialize variables
$this->errmsg = '';
$this->error = false;
$this->currentDimensions = array();
$this->newDimensions = array();
$this->fileName = $fileName;
$this->imageMeta = array();
$this->percent = 100;
$this->maxWidth = 0;
$this->maxHeight = 0;

//check to see if file exists
if(!file_exists($this->fileName)) {
$this->errmsg = 'File not found';
$this->error = true;
}
//check to see if file is readable
elseif(!is_readable($this->fileName)) {
$this->errmsg = 'File is not readable';
$this->error = true;
}

//if there are no errors, determine the file format
if($this->error == false) {
//check if gif
if(stristr(strtolower($this->fileName),'.gif')) $this->format = 'GIF';
//check if jpg
elseif(stristr(strtolower($this->fileName),'.jpg') || stristr(strtolower($this->fileName),'.jpeg')) $this->format = 'JPG';
//check if png
elseif(stristr(strtolower($this->fileName),'.png')) $this->format = 'PNG';
//unknown file format
else {
$this->errmsg = 'Unknown file format';
$this->error = true;
}
}

//initialize resources if no errors
if($this->error == false) {
switch($this->format) {
case 'GIF':
$this->oldImage = ImageCreateFromGif($this->fileName);
break;
case 'JPG':
$this->oldImage = ImageCreateFromJpeg($this->fileName);
break;
case 'PNG':
$this->oldImage = ImageCreateFromPng($this->fileName);
break;
}

$size = GetImageSize($this->fileName);
$this->currentDimensions = array('width'=>$size[0],'height'=>$size[1]);
$this->newImage = $this->oldImage;
$this->gatherImageMeta();
}

if($this->error == true) {
$this->showErrorImage();
break;
}
}

/**
* Class destructor
*
*/
public function __destruct() {
if(is_resource($this->newImage)) @ImageDestroy($this->newImage);
if(is_resource($this->oldImage)) @ImageDestroy($this->oldImage);
if(is_resource($this->workingImage)) @ImageDestroy($this->workingImage);
}

/**
* Returns the current width of the image
*
* @return int
*/
private function getCurrentWidth() {
return $this->currentDimensions['width'];
}

/**
* Returns the current height of the image
*
* @return int
*/
private function getCurrentHeight() {
return $this->currentDimensions['height'];
}

/**
* Calculates new image width
*
* @param int $width
* @param int $height
* @return array
*/
private function calcWidth($width,$height) {
$newWp = (100 * $this->maxWidth) / $width;
$newHeight = ($height * $newWp) / 100;
return array('newWidth'=>intval($this->maxWidth),'newHeight'=>intval($newHeight));
}

/**
* Calculates new image height
*
* @param int $width
* @param int $height
* @return array
*/
private function calcHeight($width,$height) {
$newHp = (100 * $this->maxHeight) / $height;
$newWidth = ($width * $newHp) / 100;
return array('newWidth'=>intval($newWidth),'newHeight'=>intval($this->maxHeight));
}

/**
* Calculates new image size based on percentage
*
* @param int $width
* @param int $height
* @return array
*/
private function calcPercent($width,$height) {
$newWidth = ($width * $this->percent) / 100;
$newHeight = ($height * $this->percent) / 100;
return array('newWidth'=>intval($newWidth),'newHeight'=>intval($newHeight));
}
Line 21 is this
private $errmsg;

Thanks again for your help

meth
08-08-2007, 04:41 PM
Php 5 class running on a php 4 server. http://www.php.net/public

Here's a fantastic post as a resource illustrating the differences between 4 & 5 (http://www.webmaster-talk.com/php-forum/78717-differences-between-php4-and-php5.html):

wayne3503
08-08-2007, 06:06 PM
Yea I finally got that now and have it fixed....thank you:o

wayne3503
08-08-2007, 08:30 PM
Another small issue I am having is that the images for the close button and "X" dont show up on my images like they should. If i got this right my paths should be "../images/loading.gif" which means go up one directory then enter the "images" dir and display "loading.gif" correct?
I also know that I need these to be active which as you can see I do..
var fileLoadingImage = "../images/loading.gif";
var fileBottomNavCloseImage = "../images/closelabel.gif";
Is there anything else I am missing or something I have done wrong?

Thanks

meth
08-08-2007, 08:49 PM
"../" is relative to the document. As soon as you try that path one folder up or down it will not resolve correctly. Another problem might be permissions. Check that everyone on linux or IUSR_SERVERERNAME has read perms to the image files.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum