Page 1 of 1

How to get zoom property(like lightbox) for image ???

Posted: Tue May 04, 2010 12:45 am
by amitdubey2
Hello frns,

I am making a shopping cart project in which i am showing product with their pics(small pics size arround 100 * 100 )in a list..and all the products are catagorised...
Now i want to show the pictures in a full size frame in another page through a link below their small pics in product list,.... which can be zoomed like lightbox.
If you have any idea how to proceed further.. please tell me.


Regards
amit :idea: :idea:

Re: How to get zoom property(like lightbox) for image ???

Posted: Tue May 04, 2010 6:31 am
by hypedupdawg
Could you post a link to the "lightbox" site that you are refferring to? I think you mean something like this when you hover over the main image and it zooms in where your mouse is?

Re: How to get zoom property(like lightbox) for image ???

Posted: Wed May 05, 2010 2:17 am
by hypedupdawg
I contacted the owners of the site above (joby.com) and they gave me this reference to the jQuery library - I havn't tried to implement it yet, but do contact me if you have any problems.

Re: How to get zoom property(like lightbox) for image ???

Posted: Wed May 05, 2010 7:48 am
by amitdubey2
Thanks hypedupdawg,

The reference you have given to me is absolutely fine and working gud...bt the thing which i needed i got that by myself...bt i am defenetly going to use this thing somewhere in my site...it looks too good . :D :)
But nw i am having another problem related to image and i am nt able to sort that..
Actually i want 2 upload fields in a form for uploading two images ..one thumbnails and the large image for that thumbnail simultaneouslly... 8O :idea: :?:
for one image i m able to do the code and it is working...but when i am trying to insert the second upload option i am not able to handle it properly it is giving random errors..so please check the code and help me.. :wink: :?: :idea:
I am giving the working code for one upload option.

This is the form page..

Code: Select all

<html>
<body>
<form action="product_db.php" method="post" enctype="multipart/form-data">
Catagory Id   : <input type="text" name="cid" /><br /> 
Product Name  : <input type="text" name="name" size="20" id="name"><br />
Discription   : <input type="text" name="desc"  id="disc"><br />
Price         : <input type="text" name="price"  id="price"><br />
<table>
<tr>
<td><u>Upload Image Thumbnail</u>*</td>
<td><input type="file" name="uploadfile" />
</td>
</tr><tr>
<td colspan="2">
<small><em>* Acceptable image formats include: GIF, JPG/JPEG and PNG.
</em></small><br /><br />
</td>
</tr>
<tr>
<td>
<u>Image Name</u>*
</td>
<td>
<input type="text" name="imagename" value="Image_name" size="20" />
</td>
</tr>
<tr>
<td colspan="2">
<small><em>*Required Image name without extension.</em>
</em></small>
</td>
</tr>

<tr>
<td><u>Upload Full Image</u>*</td>
<td>   <input type="file" name="x" />
</td>
</tr><tr>
<td colspan="2">
<small><em>* Acceptable image formats include: GIF, JPG/JPEG and PNG.
</em></small><br /><br />
</td>
</tr>
<tr>
<td>
<u>full Name</u>*
</td>
<td>
<input type="text" name="iname" value="Image_name" size="20" />
</td>
</tr>
<tr>
<td colspan="2">
<small><em>*Required Image name without extension.</em>
</em></small>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" name="submit" value="upload" />
</td>
</tr>
</table>
</form>
</pre>
</body>
</html>


<?php
//print_r($_POST);
?>

This one is the referenced page in the form page.

Code: Select all

<?php
   $con=@mysql_connect("localhost","root","") or die("Connection Error..");
	    @mysql_select_db("shopping") or die("Connection Error..");

        
		
		$dir = 'C:/xampp/htdocs/shopping/images';
		$imagename=$_POST['imagename'] . $ext;

 
// for thumbnails...


if($_FILES['uploadfile']['error'] != UPLOAD_ERR_OK) {
switch ($_FILES['uploadfile']['error']){
case UPLOAD_ERR_SIZE:
die ('The uploaded file exceeds the upload_max_filesize directive' . 'in php.ini.');
break;
case UPLOAD_ERR_FORM_SIZE:
die ('The uploaded file exceeds the MAX_FILE_SIZE directive that' . 'was specified in the HTML.');
break;
case UPLOAD_ERR_PARTIAL:
die ('The uploaded file was only partially uploaded.');
break;
case UPLOAD_ERR_NO_FILE:
die ('No file was uploaded.');
break;
case UPLOAD_ERR_NO_TMP_DIR:
die ('The server is missing a temporary folder.');
break;
case UPLOAD_ERR_CANT_WRITE:
die ('The server failed to write the uploaded file to disk.');
break;
case UPLOAD_ERR_EXTENSION:
die ('File upload stopped by extension.');
break;
}}

//get info about the image being uploaded.

$image_caption = $_POST['caption'];
$image_username = $_POST['username'];
$image_date = date('Y-m-d');
list($width, $height,$type,$attr)= getimagesize($_FILES['uploadfile']['tmp_name']);


//make sure the uploaded file is really a supported image

switch ($type) {
case IMAGETYPE_GIF:
$image = imagecreatefromgif($_FILES['uploadfile']['tmp_name']) or
die('The file you uploaded was not a supported filetype.');
$ext = '.gif';
break;

case IMAGETYPE_JPEG:
$image = imagecreatefromjpeg($_FILES['uploadfile']['tmp_name']) or
die('The file you uploaded was not a supported filetype.');
$ext = '.jpg';
break;

case IMAGETYPE_PNG:
$image = imagecreatefrompng($_FILES['uploadfile']['tmp_name']) or
die('The file you uploaded was not a supported filetype.');
$ext = '.png';
break;

default:
die('The file you uploaded was not a supported filetype.');
}


//for thumbnails....


switch($type) {
case IMAGETYPE_GIF:
imagegif($image, $dir . '/' .$imagename);
break;
case IMAGETYPE_JPEG:
imagejpeg($image, $dir . '/' .$imagename,100);
break;
case IMAGETYPE_PNG:
imagepng($image, $dir . '/' .$imagename);
break;
}





//For thumnail....

imagedestroy($image);




$cid=$_POST['cid'];
$name=$_POST['name'];
$description=$_POST['desc'];
$price=$_POST['price'];
$picture='images/'.$imagename;
$full_image='images/'.$iname;

$sql="insert into products(cid,name,description,price,picture,full_image) values('$cid','$name','$description','$price','$picture','$full_image')";
if(!mysql_query($sql,$con))

{
die('Error:'. mysql_error());
}

 echo"1 record added";


 mysql_close($con);

?>

Regards
Amit

Re: How to get zoom property(like lightbox) for image ???

Posted: Thu May 06, 2010 2:47 am
by hypedupdawg
@Amit: Im glad that my response helped you out: however I have limited experience in this field of uploading data to a server. I would highly reccommend that you start your query as a new topic, so others can answer it successfully. Alternatively, I reccommend this site for FAQ's and help.

Re: How to get zoom property(like lightbox) for image ???

Posted: Thu May 06, 2010 3:11 am
by amitdubey2
Thanks hypedupdawg...

Thanks for responses....and your concern for my queries...i am also new to this..because of that i m troubing u again again... :D :) :D
don't mind... :) :D ..and ready for my next query i am going to shoot.. :) :D

i got the result for this file uploading problem..some syntax error as usual ...i got the point and nw it is working properly..
:drunk:

Regards
amit :drunk: