...

View Full Version : Issues with lightbox



wayne3503
08-22-2007, 09:14 PM
Ok I have this awesome image class but I am having some minor issues. When you click the image and the pop up of the image is rendered it doesn't insert the close button and such. Anyone who has used this have any ideas?

Thanks much

matak
08-22-2007, 09:48 PM
Isn't that a javascript question?

wayne3503
08-22-2007, 09:56 PM
I suppose it could be..but since there is php also involved I wasnt sure which way to go.

Nightfire
08-22-2007, 10:06 PM
Don't crosspost. If it's in the wrong place, ask a mod to move it to the right one. Read the rules before you make another thread. Any more infractions and you're gonna get banned.

Inigoesdr
08-22-2007, 11:11 PM
If the problem is php then post the code. There's no way for us to help you when we have no idea what is in your class or where it is failing. If it's javascript ignore this.

wayne3503
08-23-2007, 01:22 AM
Well it looks like php to me...

Some of the image names are closelabel.gif, close.gif, loading.gif and a few others but with this "application" or class does it matter how many directories up or down the images are in relation to the class script?

CFMaBiSmAd
08-23-2007, 02:02 AM
You would need to post the code that is using this class. Just posting the class definition is of no help as it does not show the actual code where you are using this on a web page.

BTW, the author of this class has newer versions posted on his site - http://www.gen-x-design.com/projects/php-thumbnailer-class/

wayne3503
08-23-2007, 06:09 AM
here you go, and thanks again for all the help

<script type="text/javascript">
window.onload=function() {
document.forms[0][1].focus();
}
</script>
<div id="outer">
<div id="head">

<div id="banner"><img src="img/567x100.jpg" alt=""/></div>

<div id="search">
<ul>
<li><a href="signup.php">Sign Up</a> |</li>
<li><a href="login.php">Login</a> </li>
</ul>
<table align="right" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><img src="go_but.jpg" alt=""></td>
<td valign="top"> <form action="search.php" method="get" name="search">
<input onclick="this.value='';" name="q" type="text" value="Search" size="15">
</form></td>
</tr>
</table>
</div>
</div>

<div class="redline">&nbsp;</div>
<?php
$menu = file_get_contents("links_nav.php");
$menu = preg_replace("|<li><a href=\"" . basename($_SERVER['PHP_SELF']) . "\">(.*)</[^>]+></li>|U", "<li class=\"current\">$1</li>", $menu);
echo $menu;
?>
<?php
//This page allows users to upload files tot he server

//Set the page title and include the header
$page_title = 'Upload an Image';
include_once ('db_connect_images.php');

//$db->connect('images');


if (isset($_POST['action']))
{
$imageDir = 'images/'; //// root directory to main images folder with trailing slash
$imageName = $imageDir . $_FILES['image_file']['name']; ////

if (move_uploaded_file($_FILES['image_file']['tmp_name'], $imageName))
{

$array = explode(".", $_FILES['image_file']['name']);
$nr = count($array);
$ext = '.' . $array[$nr-1];

///// Insert data into the DB
$insert = "INSERT INTO images
(date_added, ext)
VALUES
(NOW(),'" . $ext . "')";
$insertresults = mysql_query($insert) or die(mysql_error());
$lastpicid = mysql_insert_id();

$newfilename = $lastpicid . $ext;
rename($imageName, $imageDir . $newfilename);
include_once('class.thumbnail.php');

////// TAKE THE ORIGINAL IMAGE AND RESIZE IT TO A SLIGHTLY SMALLER ONE

//// go and get the uploaded image
$large = new Thumbnail('images/' . $newfilename . '');
//// and resize it to dimensions equal to or smaller than 800x600
$large->resize(800,600);
//// now save it
$large->save('images/'. $newfilename . '',100);
//$large->destruct(); //only needed for PHP4

////// NOW TAKE THE NEWLY RESIZED IMAGE AND CREATE A THUMBNAIL FROM IT

// go and get the resized image
$thumb = new Thumbnail('images/'. $newfilename . '');
// resize it to no larger than 200x200
$thumb->resize(150,150);
// now to create thumbnails all the same size, create a 120x120 image, starting from the center
//$thumb->cropFromCenter(200);
$thumb->createReflection(50,50,50,true,'#ffffff');
/// save the resized/cropped image to the thumbnails folder
$thumb->save('images/thumbs/' . $newfilename . '',100);
//$thumb->destruct(); //only needed for PHP4

if ($insertresults)
{
$message = 'Image Added';
}
else
{
$message = 'Image Failed';
}
}
else
{
$message = 'Image Failed to Upload';
}
}
if (isset($_POST['delete']))
{
foreach ($_POST as $id => $value)
{
if (is_numeric($id) && $value == 'delete')
{
$sql = mysql_query("SELECT * FROM images WHERE id = '". $id ."'");
$rows = mysql_fetch_array($sql);

$query = "DELETE from images WHERE id = '" . $id . "'";
$result = mysql_query($query);

$largeimg = unlink('images/'. $id . $rows['ext'] . '');
$thumbimg = unlink('images/thumbs/'. $id . $rows['ext'] . '');
}
}
}

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Your Personal Images</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/rounded.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="ie_styles.css" rel="stylesheet" type="text/css">
<![endif]-->
<script type="text/javascript" src="cms/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="cms/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="cms/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="cms/lightbox/css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<style>
fieldset {
background:#fff;
width: 505px;
}
#message {
font-size: .95 em;
color: #b80101;
font-style: italic;
font-weight: bold;
}
#delete {
clear: both;
width: 500px;
}
</style>

<div align="right">
<?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>
<a href="images/' . $rows['id'] . $rows['ext'] . '" rel="lightbox"><img src="images/thumbs/' . $rows['id'] . $rows['ext'] . '"/></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>';
?>

<div align="center"><h2><font color="#b80101">Upload and Remove Images</font></h2></div>
<form method="POST" enctype="multipart/form-data" name="image_upload_form" action="">
<fieldset>
<div align="left">
<p>Upload Image: <input type="file" name="image_file" size="20"><br>
<font size="1">Click browse to upload a local file</font><br>
<br>
<input name="action" type="submit" value="Upload Image">
</div>
</fieldset>
</form>
</div>

</body>
</html>
<?php
include ('links_footer.php'); //include footer
?>

_Aerospace_Eng_
08-23-2007, 08:16 AM
There are some images that came with lightbox. Where are they in relation to lightbox.css? Images are relative to the location of the CSS document not the HTML document.

wayne3503
08-23-2007, 03:23 PM
the images that im sure your talking about in relation to lightbox.css would be this. ../images
Within the lightbox folder there is 3 folders (css, images, and js) lightbox.css is inside the "css" folder and of course the images are in the "images" folder. So yea thats how its stuctured.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum