Image enlarge [Archive] - Dynamic Drive Forums

megha

06-16-2012, 12:46 PM

I have the following code to show the images from database "abc".Now I want to create a css code to enlarge the thumbnails when I roll the mouse over the images just like thumbnail gallery shown in dynamic drive. How to do that? I have tried the following CSS but it is not working!!:(
Please can anyone help me with these?Will be greatly obliged :)

<?php
mysql_connect("localhost","root","a123");
mysql_select_db("abc");
$sql="select * from image";
$res=mysql_query($sql);

?>

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: 500px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility:visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>
</HEAD>
<BODY bgcolor="#CCCC00">
<CENTER>
<FONT size=6 color="#FF0000" face="Comic Sans MS">Image Gallery</FONT><BR><BR>
<hr size=2 color="#003333"><BR><BR>

<?php

if($_GET[page]!="show")
{
?>
<A HREF="4.php?page=show">Show</A>
         
<?php
}
?>
<A HREF="4.php">Exit</A>

<?php
if($_GET[page]=="show")
{
?>
<TABLE border=2>
<TR>
<TD>Serial No</TD>
<TD>Image</TD>
</TR>
<?php
$c=1;
while($row=mysql_fetch_array($res))
{
echo "<TR>
<TD>$c-$row[id]</TD>
<TD><IMAGE SRC='$row[image]' height='50' width='50'></TD>
</TR>";
$c++;
}
?>
</TABLE>

<BR><BR><hr size=2 color="#FF0000" width="300"><BR>
<?php

}
?>
</CENTER>
</BODY>
</HTML>
I have created a table called 'image' inside 'abc' database,the fields are 1)id (primary key and auto-incremented) and 2)image(varchar).Actually this is for a uploaded image gallery.
p.s.What I want to do is these -
As you will see the images will appear in rows one below the other inside <TD></TD> i.e. rows.
Now what I want is that as I hover over the thumbnail images(i have deliberately set them to 50x50 height & width) with my mouse they will enlarge to the side of the table of images or show over the image.
This are two links from dynamic drive to show what is the desired effect I want.
1)http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
2)http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

Is it possible?Please Help.
Thanks in advance

bernie1227

06-17-2012, 03:38 AM

Hi megha,
A far as I can see, the root cause of your problems is that, although you have implemented the CSS from the links, you haven't actually done anything about the HTML, so the CSS code is there, but it isn't actually refering to anything in the HTML.

As a side note, I'd like to point out that you shouldn't be using tables for non-tabular data and the HTML tags should be lower case.
Bernie

megha

06-17-2012, 04:29 AM

Hi bernie1227,Thanks for the reply but I checked my code and the css is indeed referring to the html!!
Like "thumbnail" & 'img" in css is referring to the 'thumbnail' class in the html and 'img' is referring to the <img> tag.
Then how do you say that it is not referring to each other?
Also what do you mean by non-tabular data in my code??
After running the above piece of code the images are indeed appearing above the thumbnails but it is not when I am hovering mo mouse over the pictures.
I thanked you for your advice but please do give me the complete code .

bernie1227

06-17-2012, 04:43 AM

Hi bernie1227,Thanks for the reply.
I thanked you for your advice but please do give me the complete code .
Pleaseeee.

Thanks megha, luckily, when I was trying to figure it out, I came across sme code in order to do something similar to google images images hovering. For this example colored boxes are used, and it does have jqueury, but you'll get the basic jist of it. Here's the jsFiddle:

http://jsfiddle.net/Swader/jKTVn/7/
Bernie

megha

06-17-2012, 05:26 AM

Thanks but I want to write code without jquery or javascript.

bernie1227

06-17-2012, 05:50 AM

Hi bernie1227,Thanks for the reply but I checked my code and the css is indeed referring to the html!!
Like "thumbnail" & 'img" in css is referring to the 'thumbnail' class in the html and 'img' is referring to the <img> tag.
Then how do you say that it is not referring to each other?
Also what do you mean by non-tabular data in my code??
After running the above piece of code the images are indeed appearing above the thumbnails but it is not when I am hovering mo mouse over the pictures.
I thanked you for your advice but please do give me the complete code .

Hi megha, sorry about that, what I meant was that the spans are not in your HTML, and they are what's controlling the image enlargement.
It's bad coding practise to put non-tabular data in tables, this is really looking at what you would put in a table of you were writing down a science report for example. So, in a report, you would put data in the table rather in drawings or lists of words, so that's basically the rule for tabular and non-tabular data.

megha

06-17-2012, 07:20 AM

Ok I have corrected the code but still desired result is not coming. What I want is that when I hover my mouse over the images it should enlarge as shown in the links .Can you pls check the code and tell me how to do that@Bernie?

<?php
mysql_connect("localhost","root","a123");
mysql_select_db("abc");
$sql="select * from image";
$res=mysql_query($sql);

?>

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: 500px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility:visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>
</HEAD>
<BODY bgcolor="#CCCC00">
<CENTER>
<FONT size=6 color="#FF0000" face="Comic Sans MS">Image Gallery</FONT><BR><BR>
<hr size=2 color="#003333"><BR><BR>

<?php

if($_GET[page]!="show")
{
?>
<A HREF="img_gallery_uploaded.php?page=show">Show</A>
         
<?php
}
?>
<A HREF="img_gallery_uploaded.php">Exit</A>

<?php
if($_GET[page]=="show")
{
?>
<TABLE border=2>
<TR>
<TD>Serial No</TD>
<TD>Image</TD>
</TR>
<?php
$c=1;
while($row=mysql_fetch_array($res))
{ //$i=1;
echo "<TR>
<TD>$c-$row[id]</TD>

<TD><a class='thumbnail' href='#thumb'><IMAGE SRC='$row[image]' height='50' width='50'></TD><span><img src='$row[image]' /><br />Simply beautiful.</span></a></TD>

<TD><A HREF='img_gallery_uploaded.php?del=$row[id]'>Delete</A></TD>
</TR>";
$c++;
}
?>
</TABLE>

<BR><BR><hr size=2 color="#FF0000" width="300"><BR>
<?php

}
?>
</CENTER>
</BODY>
</HTML>

bernie1227

06-17-2012, 07:58 AM

Ok look, I'm just trying to help you so that you actually know what's going on here. So the main operation is actually fairly basic. Basically all you need to do is change the CSS.
So you need to change

.thumbnail:hover*span{*/*CSS*for*enlarged*image*/
visibility:visible;
top:*0;
left:*230px;*/*position*where*enlarged*image*should*offset*horizontally**/
z-index: 50;
}

To:

.thumbnail:hover*{*/*CSS*for*enlarged*image*/
visibility:visible;
top:*0;
left:*230px;*/*position*where*enlarged*image*should*offset*horizontally**/
z-index: 50;
Height: 100px;
Width: 100px;
}

Then you need to take:

.thumbnail*img{
border:*1px*solid*white;
margin:*0*5px*5px*0;
}*

To:

.thumbnail*img{
border:*1px*solid*white;
margin:*0*5px*5px*0;
Height: 50px;
Width: 50px;
}*

Ok? So that's the very basic code you need to implement to make it enlarge when hovered.

megha

06-17-2012, 10:18 AM

Hi Bernie Thanks for replying.But what are those stars for in the css code?
Some are for comments but what are the rest of the stars? :rolleyes:
Should I replace the original css code i posted with the one you gave above?
Please reply soon. Thanks in adv

bernie1227

06-17-2012, 10:24 AM

Any time megha, sorry about the stars, they seem to have been put in by the forum to replace e spaces for some reason. Just replace them with spaces. Once you've gotten this pesky stars out, just take the Lower code and replace the code I specified above them.

megha

06-17-2012, 10:37 AM

Sorry I tried your code but nothing is working in your code.
At last I post here for your convenience. The images are getting displayed without even mouse hover.The images are static and already on top of the thumbnails .There is no dynamism when mouse is moved

<?php
mysql_connect("localhost","root","");
mysql_select_db("test");
$sql="select * from image";
$res=mysql_query($sql);
@mkdir(uploadedfiles);
if($_POST[sub]=="Upload")
{
$link="uploadedfiles/".time()."-".$_FILES['imm']['name'];
$x=copy($_FILES["imm"]["tmp_name"],$link);
$sql="INSERT INTO `test`.`image` (`id`, `image`) VALUES (NULL, '$link')";
mysql_query($sql);
header("location:img_gallery_uploaded.php?page=show&msg=Image Successfully Inserted......");
}
if($_GET[del])
{
$sql2="DELETE FROM `image` WHERE `id` = '$_GET[del]'";
mysql_query($sql2);
header("location:img_gallery_uploaded.php?page=show&msg=Image Successfully Deleted......");
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> CSS Image Upload </TITLE>

<style type="text/css">

.thumbnail:hover span{/*CSS*for*enlarged*image*/
visibility:visible;
top:0;
left:230px;/*position*where*enlarged*image*should*offset*horizontally**/
z-index: 50;
}

.thumbnail:hover{/*CSS*for*enlarged*image*/
visibility:visible;
top:*0;
left:*230px;/*position*where*enlarged*image*should*offset*horizontally**/
z-index: 50;
Height: 100px;
Width: 100px;
}

.thumbnail*img{
border:*1px*solid*white;
margin:*0*5px*5px*0;
}*

.thumbnail*img{
border:*1px*solid*white;
margin:*0*5px*5px*0;
Height: 50px;
Width: 50px;
}

/* .thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ //CSS for enlarged image
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ //CSS for enlarged image
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ //*CSS for enlarged image on hover
visibility: visible;
top: 0;
left: 60px;} //*position where enlarged image should offset horizontally
*/

</style>

</HEAD>
<BODY bgcolor="#CCCC00">
<CENTER>
<FONT size=6 color="#FF0000" face="Comic Sans MS">Image Uploading</FONT><BR><BR>
<hr size=2 color="#003333"><BR><BR>
<?php
if($_GET[page]!="insert")
{
?>
<A HREF="img_gallery_uploaded.php?page=insert">Insert</A>
         
<?php
}
if($_GET[page]!="show")
{
?>
<A HREF="img_gallery_uploaded.php?page=show">Show</A>
         
<?php
}
?>
<A HREF="img_gallery_uploaded.php">Exit</A>
<?php
if($_GET[page])
{
?>
<hr size=2 color="#FF0000" width="500"><BR><BR>
<?php
if($_GET[page]=="insert")
{
?>
<FORM METHOD=POST ACTION="" ENCTYPE = "multipart/form-data">
<TABLE border=2>
<TR>
<TD>Choose an image file to upload:</TD>
<TD><INPUT TYPE="file" NAME="imm"></TD>
</TR>
<TR>
<TD colspan=2 align=center><INPUT TYPE="submit" name="sub" value="Upload"></TD>
</TR>
</TABLE>
</FORM>
<?php
}
if($_GET[page]=="show")
{
?>
<TABLE border=2>
<TR>
<TD>Serial No</TD>
<TD>Image</TD>
<Td>Select</td>
<TD>Action</TD>
</TR>
<?php
$c=1;
while($row=mysql_fetch_array($res))
{ //$i=1;
echo "<TR>
<TD>$c-$row[id]</TD>

<TD><a class='thumbnail' href='#thumb'><img src='$row[image]' height='50' width='50'></TD><span><img src='$row[image]' /><br />Simply beautiful.</span></a></TD>

<TD><A HREF='img_gallery_uploaded.php?del=$row[id]'>Delete</A></TD>
</TR>";
$c++;
}
?>
</TABLE>
<?php
}
//Select All<input type="checkbox" name="all">
?>

<BR><BR><hr size=2 color="#FF0000" width="300"><BR>
<?php
if($_GET[msg])
{
$a=$_GET[msg];
print "<font color='#660000' face='Comic Sans MS' size='4'>$a</font>";
}
}
?>

</CENTER>
</BODY>
</HTML>

Please note I commented my earlier css and placed your css inside the style but still the result is the same!! Plz Plz I request you to either correct my code fully or it is difficult to follow ur guidelines this way. Pls post the complete code.
Thanks

bernie1227

06-17-2012, 11:12 AM

Alright, let's go back to the basics of the question. You were asking how to d the image hover thing, which you were using the CSS from a website from and it wasn't working.

The reason your code was not working, was because in the example on the website, they were using span tags in order to actually expand the picture when you hover over it. Your code was not working because you did not have any span tags!

If you look back at the first original link you posted, you'll see how they have implemented the span tags in the CSS. I suggest you go back to the basics, and try it without the pho, and then implement it when you have the HTML and CSS from the link working.
Bernie

megha

06-17-2012, 02:14 PM

If you see now and my last 2 posted programs both had span tags,but if you run the code below which contains the span tags hopefully in the right places, it is still not working(I have also included the CSS code that you advised me in last post but not sure the entire CSS is OK, as the desired result is still not coming.Already the enlarged image is appearing at the top when I load my page and further if i hover the cursor over the thumbnails the spanned image is blinking very fast.Please run the code below to understand what I am trying to say.)will request you one last time to see if the code is OK before I give up. :o

<?php
mysql_connect("localhost","root","");
mysql_select_db("test");
$sql="select * from image";
$res=mysql_query($sql);
@mkdir(uploadedfiles);
if($_POST[sub]=="Upload")
{
$link="uploadedfiles/".time()."-".$_FILES['imm']['name'];
$x=copy($_FILES["imm"]["tmp_name"],$link);
$sql="INSERT INTO `test`.`image` (`id`, `image`) VALUES (NULL, '$link')";
mysql_query($sql);
header("location:img_gallery_uploaded.php?page=show&msg=Image Successfully Inserted......");
}
if($_GET[del])
{
$sql2="DELETE FROM `image` WHERE `id` = '$_GET[del]'";
mysql_query($sql2);
header("location:img_gallery_uploaded.php?page=show&msg=Image Successfully Deleted......");
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> </TITLE>

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
visibility:visible;
top:0;
left:230px;
z-index: 50;
Height: 100px;
Width: 100px;
}

.thumbnail img{
border:1px green;
margin:0 5px 5px 0;
Height: 50px;
Width: 50px;
}

/*
.thumbnail span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{
border-width: 0;
padding: 2px;
}

*/

.thumbnail span img
{
border-width: 0;
padding: 2px;
}

</style>

</HEAD>
<BODY bgcolor="#CCCC00">
<CENTER>
<FONT size=6 color="#FF0000" face="Comic Sans MS">Image Uploading</FONT><BR><BR>
<hr size=2 color="#003333"><BR><BR>
<?php
if($_GET[page]!="insert")
{
?>
<A HREF="img_gallery_uploaded.php?page=insert">Insert</A>
         
<?php
}
if($_GET[page]!="show")
{
?>
<A HREF="img_gallery_uploaded.php?page=show">Show</A>
         
<?php
}
?>
<A HREF="img_gallery_uploaded.php">Exit</A>
<?php
if($_GET[page])
{
?>
<hr size=2 color="#FF0000" width="500"><BR><BR>
<?php
if($_GET[page]=="insert")
{
?>
<FORM METHOD=POST ACTION="" ENCTYPE = "multipart/form-data">
<TABLE border=2>
<TR>
<TD>Choose an image file to upload:</TD>
<TD><INPUT TYPE="file" NAME="imm"></TD>
</TR>
<TR>
<TD colspan=2 align=center><INPUT TYPE="submit" name="sub" value="Upload"></TD>
</TR>
</TABLE>
</FORM>
<?php
}
if($_GET[page]=="show")
{
?>
<TABLE border=2>
<TR>
<TD>Serial No</TD>
<TD>Image</TD>
<TD>Action</TD>
</TR>
<?php
$c=1;
while($row=mysql_fetch_array($res))
{ //$i=1;
echo "<TR>
<TD>$c-$row[id]</TD>

<TD><a class='thumbnail' href='#thumb'><img src='$row[image]' height='50' width='50'></TD><span><img src='$row[image]' /><br />Simply beautiful.</span></a></TD>

<TD><A HREF='img_gallery_uploaded.php?del=$row[id]'>Delete</A></TD>
</TR>";
$c++;
}
?>
</TABLE>
<?php
}
//Select All<input type="checkbox" name="all">
?>

<BR><BR><hr size=2 color="#FF0000" width="300"><BR>
<?php
if($_GET[msg])
{
$a=$_GET[msg];
print "<font color='#660000' face='Comic Sans MS' size='4'>$a</font>";
}
}
?>

</CENTER>
</BODY>
</HTML>

I have also commented few lines of CSS ,will you pls check whether commenting them was OK? Will be greatly obliged if you please make this workable. Till now your or my code is already displaying the enlarged image at the top of the table of thumbnails (which I dont want) and I want that the enlarged image will appear at the top or any side only when my mouse cursor hover over the thumbnail gallery.
Hope you get me this time :(

bernie1227

06-17-2012, 10:45 PM

Very sorry about that megha, I get you now.
I've re-written the code for the page without the php, which you can do later.
Here it is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
* * <head>
* * * * <title></title>
* * * **
<style type="text/css">

<style type="text/css">
body {
background-color:*#CCCC00;
}

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
position: absolute;
left: 40%;
top: 300px;
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 2px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -60px;
left: 90px;; /*position where enlarged image should offset horizontally */
z-index: 50;
}

#upload {
text-align: center;
}

#inputs {
position: relative;
left: 80px;
}
</style>

</style>
</head>
<body bgcolor="#CCCC00">
<div id="upload">
* * <font size=6 color="#FF0000" face="Comic Sans MS">Image Uploading</font><br /><br />
* * * * * * <hr size=2 color="#003333"><br /><br />

* * * * * * <A HREF="img_gallery_uploaded.php?page=insert">Insert</A>
* * * * * *          

* * * * * * <A HREF="img_gallery_uploaded.php?page=show">Show</A>
* * * * * *          

* * * * * * <A HREF="img_gallery_uploaded.php">Exit</A>
<br />

* * * * * * <div id="inputs">
* * * * * * Choose an image file to upload:
* * * * * * <INPUT TYPE="file" NAME="imm">
<br/>
</div>
* * * * * * <input type="submit" name="sub" value="Upload">

* * * * * * <hr size=2 color="#FF0000" width="500"><BR><BR>

</div>
*

<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /></span></a>

<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /></span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="media/sushi2.jpg" /></span></a>*

<a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="media/horses.jpg" /></span></a>

</div>
</body>
</html>

So I've tested it and it works so tell me if you have any problems.
Bernie

megha

06-18-2012, 02:48 AM

Bernie!! You still didn't gave me the entire code whereas I posted my entire program.
Please give me the PHP part too. The problem is with the PHP part .I cant integrate the CSS with the PHP.:(

megha

06-18-2012, 03:21 AM

Hi Bernie.your code still doesn't work at all!!
Here is the code I tried from your suggestions -

<?php
mysql_connect("localhost","root","");
mysql_select_db("test");
$sql="select * from image";
$res=mysql_query($sql);
@mkdir(uploadedfiles);
if($_POST[sub]=="Upload")
{
$link="uploadedfiles/".time()."-".$_FILES['imm']['name'];
$x=copy($_FILES["imm"]["tmp_name"],$link);
$sql="INSERT INTO `test`.`image` (`id`, `image`) VALUES (NULL, '$link')";
mysql_query($sql);
header("location:img_up2.php?page=show&msg=Image Successfully Inserted......");
}
if($_GET[del])
{
$sql2="DELETE FROM `image` WHERE `id` = '$_GET[del]'";
mysql_query($sql2);
header("location:img_up2.php?page=show&msg=Image Successfully Deleted......");
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> CSS Image Upload </TITLE>

<style type="text/css">

/* body {
background-color:#CCCC00;
}
*/

.gallerycontainer{
position: relative;
position: absolute;
left: 40%;
top: 300px;
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 2px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -60px;
left: 90px;; /position where enlarged image should offset horizontally /
z-index: 50;
}

#upload {
text-align: center;
}

#inputs {
position: relative;
left: 80px;
}
</STYLE>

</head>

<body bgcolor="#CCCC00">



<CENTER>
<FONT size=6 color="#FF0000" face="Comic Sans MS">Image Uploading</FONT><BR><BR>
<hr size=2 color="#003333"><BR><BR>
<div id="upload">
<?php
if($_GET[page]!="insert")
{
?>
<A HREF="img_up2.php?page=insert">Insert</A>
         
<?php
}
if($_GET[page]!="show")
{
?>
<A HREF="img_up2.php?page=show">Show</A>
         
<?php
}
?>
<A HREF="img_up2.php">Exit</A>
<?php
if($_GET[page])
{
?>
<hr size=2 color="#FF0000" width="500"><BR><BR>
<?php
if($_GET[page]=="insert")
{
?>
<FORM METHOD=POST ACTION="" ENCTYPE = "multipart/form-data">
<TABLE border=2>
<TR>
<TD>Choose an image file to upload:</TD>
<TD><INPUT TYPE="file" NAME="imm"></TD>
</TR>
<TR>
<TD colspan=2 align=center><INPUT TYPE="submit" name="sub" value="Upload"></TD>
</TR>
</TABLE>
</FORM>
<?php
}
if($_GET[page]=="show")
{
?>
<TABLE border=2>
<TR>
<TD>Serial No</TD>
<TD>Image</TD>
<TD>Action</TD>
</TR>
<?php
$c=1;
while($row=mysql_fetch_array($res))
{
echo "<TR>
<TD>$c-$row</TD>

<TD><a class='thumbnail' href='#thumb'><img src='$row[image]' height='50' width='50'></TD><span><img src='$row[image]' /></span></a></TD>

<TD><A HREF='img_up2.php?del=$row[id]'>Delete</A></TD>
</TR>";
$c++;
}
?>
</TABLE>
<?php
}

?>

<BR><BR><hr size=2 color="#FF0000" width="300"><BR>
<?php
if($_GET[msg])
{
$a=$_GET[msg];
print "<font color='#660000' face='Comic Sans MS' size='4'>$a</font>";
}
}
?>

</CENTER>
</BODY>
</HTML>

I noted that you have 3 different class's for enlarged image like - '.thumbnail span','.thumbnail span img','.thumbnail:hover span' ,is it not conflicting with each other?
That is why,may be, even if the hovered image was appearing in earlier programs,it is blinking!!
And the output is same or even worse!!:mad:
See the attached picture of the displayed page in my Firefox browser.The enlarged images are already displayed as before as soon as the page loads.There is no need to put mouse cursor over the thumbnails to make them appear enlarged!!
As you can see the thumbnail gallery has moved to the bottom right and the images are already displayed side-by-side without even mouse over the thumbnails( which i obviously dont want).
Now Sir, [I]Please can you do me a favour & plzz give me the entire working code (CSS+HTML+PHP) ??
:rolleyes: :rolleyes: :rolleyes:

p.s.: I know you already cracked the problem but you are not giving me the solution in full. :( That is very heartbreaking Sir.

bernie1227

06-18-2012, 03:21 AM

Alright megha, I should have it up by this afternoon.

ApacheTech

06-18-2012, 08:49 AM

Now Sir, Please can you do me a favour & plzz give me the entire working code (CSS+HTML+PHP) ??

Alright megha, I should have it up by this afternoon.

Could you possibly do the whole SEO/WebDev community a favour as well and get rid of those putrid uppercase HTML tags? This is when you know you've been coding for too long, those uppercase tags are actually beginning to make me cringe! :( :o :p

ApacheTech

06-18-2012, 08:57 AM

Eugh! I've just looked again (I'm a sucker for punishment) and there's font tags, center tags, empty tags that haven't been slashed to close them, attribute styles instead of CSS styles and inline CSS mixed with internal CSS. I'm suddenly feeling feint. :p

bernie1227

06-18-2012, 08:58 AM

Could you possibly do the whole SEO/WebDev community a favour as well and get rid of those putrid uppercase HTML tags? This is when you know you've been coding for too long, those uppercase tags are actually beginning to make me cringe! :( :o :p

I agree entirely, there are very many coding practice issues with this:
uppercase tags
non-tabular data in tables
too much styling in the html, and not enough in the CSS.

just out of curiosity, do you see what i'm trying to do with the code in order to make it work apache? (posted above)

ApacheTech

06-18-2012, 09:18 AM

I'm glad I'm not the only coding grammar nazi. :p

To be honest with you, I pulled the code into Visual Studio, saw the Validation window come up with 15 Errors, 48 Warnings and 5 Messages then saw your post saying you were fixing it, so gave up reading much else, lol.

I'd need to rewrite it from scratch as XHTML1.0 or XHTML5 if I was going to make sense of it. I get the general idea though, and it seems you're going the right way about it.

Although you should be aware of the extra semi-colon in your CSS code:

left: 90px;; /*position where enlarged image should offset horizontally */

EDIT: I think, if the coding was up to scratch then the DD CSS Module should work without much modification at all.

bernie1227

06-18-2012, 09:41 AM

I'm glad I'm not the only coding grammar nazi. :p

To be honest with you, I pulled the code into Visual Studio, saw the Validation window come up with 15 Errors, 48 Warnings and 5 Messages then saw your post saying you were fixing it, so gave up reading much else, lol.

I'd need to rewrite it from scratch as XHTML1.0 or XHTML5 if I was going to make sense of it. I get the general idea though, and it seems you're going the right way about it.

Although you should be aware of the extra semi-colon in your CSS code:

left: 90px;; /*position where enlarged image should offset horizontally */

EDIT: I think, if the coding was up to scratch then the DD CSS Module should work without much modification at all.

Thanks apache :), the reason I was asking, is that I've written up an almost valid version for the HTML and the CSS, but my php's not that strong, and I was wondering if you could help with integrating his php into it.
Bernie

keyboard

06-18-2012, 09:52 AM

<?php
mysql_connect("localhost","root","a123");
mysql_select_db("abc");
?>

Please use don't post your mysql connection details online! If you don't this, people will be able to access your database!

<?php
mysql_connect("localhost","****","****");
mysql_select_db("****");
?>

Please do something like that instead!

bernie1227

06-18-2012, 10:02 AM

Oh look! Free database details!
:p

ApacheTech

06-18-2012, 10:13 AM

Thanks apache :), the reason I was asking, is that I've written up an almost valid version for the HTML and the CSS, but my php's not that strong, and I was wondering if you could help with integrating his php into it.
Bernie

I'm a .NET programmer. I've only been using PHP for a few weeks.

keyboard

06-18-2012, 10:25 AM

P.s. Megha, bernie's code works fine... all you've got to do is intergrate your php with it (don't try to add bernie's code to your current webpage... Try to add your php to the code bernie posted)

Even if we did combine the code for you, there is no way we could test if for you as we don't have the databases or the other pages that your php uses.

Try combining the code and after that, if your having trouble, just say and we'll try to help you out.

P.s. I say add your code into his because he is currently adhering to web standards, while your code doesn't. We aren't complaning just to be annoying. We're complaing because more often than not, this invalid code causes the problems in the first place (but not in this case)

megha

06-18-2012, 01:32 PM

But Bernie you said you would post the full program. That was a breach of faith.Anyways I will remember that.

djr33

06-18-2012, 05:14 PM

Megha, you're asking for free help so you should take what you can get. Asking someone to "please do all of this for me" is really an unreasonable request. If you want paid help and someone to do everything for you, do that. But if not, please be respectful of those offering help for free.
The phrase "you get what you pay for" comes to mind, and here at DD it's often a really good deal. Lots of help (but rarely everything in a project) for free.

bernie1227

06-18-2012, 08:32 PM

But Bernie you said you would post the full program. That was a breach of faith.Anyways I will remember that.

Alright megha, now there's one thing you have to realize, and that this forum, is a help forum, but we are helping you to learn, rather then to do the whole thing for you.

Now I've done my best to get you working HTML and CSS, however my php is not the best, hence I can't fix your php problems. You'll have to integrate the php yourself. We can't do everything for you.
Bernie

megha

06-19-2012, 04:45 AM

Bernie your CSS is not at all working!!:mad:
I pointed out that you three CSS written for enlarged image which is conflicting.
2ndly,you just copied and pasted the code from DD ,whereas there is no 'gallerycontainer' id used anywhere in the code!
3rdly,I have written the entire program myself and i am not asking for help for the entire program.only a small part that is css .i submitted my entire code and not asking for free help!! Some novice might use the code I posted above for free .So why not you all help me with only a small part of css? Sorry but I am compelled to say this -then what is the use of this nice forum?
Anyways ,thanks for all your advice,I am closing the topic here.

bernie1227

06-19-2012, 11:16 AM

Bernie your CSS is not at all working!!:mad:
I pointed out that you three CSS written for enlarged image which is conflicting.
2ndly,you just copied and pasted the code from DD ,whereas there is no 'gallerycontainer' id used anywhere in the code!
3rdly,I have written the entire program myself and i am not asking for help for the entire program.only a small part that is css .i submitted my entire code and not asking for free help!! Some novice might use the code I posted above for free .So why not you all help me with only a small part of css? Sorry but I am compelled to say this -then what is the use of this nice forum?
Anyways ,thanks for all your advice,I am closing the topic here.

Alright megha, you have Definately stepped over the line here, and these assertions are not going to sit with me.

The code I previously posted for the HTML and CSS does work! as asserted by both myself and keyboard1333, so any problem with it is the fault of how you are using the code.

I have also given you multiple options and spent much time creating this working code for you rather then copying and pasting the code, which you would have seen if you had actually run the code.

Clearly, you were not asking for "just a little bit of CSS" as you continously asked me to integrate the php for you.

Lastly, the whole point of these forums are so that everyone can learn, so some "newbie" seeing your code and learning from it is in fact the very aim of these forums, rather then having to pay for the code (if anything, your coding habits show that you have a lot to learn as well)

I have given you as much help as I can give, and you reject it.
I'm sorry you feel that way, but I Definately do not think you have grounds to call Me a plaugurist .
Bernie

djr33

06-19-2012, 09:58 PM

Megha, you have completely missed the point of the forums here. They're for help, not for asking people to do entire projects for you. It's absolutely unreasonable to be rude to people who are helping you.

You need to change what you're expecting from the discussions here. If you aren't sure, then read through other discussions for examples. Also, there's no guarantee here-- people help if they want to. If you want more help, then post in the paid work requests section.

Bernie, rather than start a direct argument, please let the mods step in. (But what you've posted isn't wrong-- it's just not going to be productive to confront each other about this.)

bernie1227

06-20-2012, 09:08 AM

Bernie, rather than start a direct argument, please let the mods step in. (But what you've posted isn't wrong-- it's just not going to be productive to confront each other about this.)

Sorry about that dj, I just got a bit annoyed.