Image enlarge

**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 Code:


<?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>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<?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/cs...image-gallery/
2)http://www.dynamicdrive.com/style/cs...-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

Originally Posted by megha

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

Originally Posted by megha

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 Code:


<?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>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<?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

Code:

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

To:

Code:

.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:

Code:

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

To:

Code:

.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?

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.

Thread: Image enlarge

Thread Tools

Search Thread

Image enlarge

The Following User Says Thank You to bernie1227 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions