Page 1 of 4 123 ... LastLast
Results 1 to 10 of 33

Thread: Image enlarge

  1. #1
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Image enlarge

    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
    Last edited by megha; 06-16-2012 at 12:52 PM.

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    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

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

    megha (06-17-2012)

  4. #3
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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 .
    Last edited by megha; 06-17-2012 at 04:46 AM.

  5. #4
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by megha View Post
    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

  6. #5
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

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

  7. #6
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by megha View Post
    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.

  8. #7
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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>
    Last edited by megha; 06-17-2012 at 07:34 AM.

  9. #8
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    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.

  10. #9
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by megha; 06-17-2012 at 10:31 AM.

  11. #10
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •