Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image Rollover Help

    Good Afternoon,
    I started work for a new company and they put me in charge of their website. I am a network/graphics design guru not a web admin. So please bare with me.

    I have a "php" site and they have a projects page "www.energy-electric.com/projects.php" that has a drop down menu with the files associated to a sql db.

    Is there a way to get the "job" images to enlarge on mouseover.

    Any suggestions or ideas?
    Or even a starting point?
    I have read up on CSS and Java but nothing seems to apply to php.

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    PHP and HTML/CSS/Javascript are two different things. PHP is a server-side scripting language that outputs client-side code like HTML and CSS.

    In other words, figure out how to do what you want to with CSS or Javascript first. Then figure out how much actual PHP scripting is used on your site (from the looks of it, probably not much--just common elements like the nav menu, header and footer--but I could be wrong). Then find the original (non-outputted) PHP source code and add the CSS/Javascript as desired.

    As an alternative to a pure CSS solution, you might consider something like Thickbox or Lightbox. They're very easy to set up and use.
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    Energy_IT (10-30-2008)

  • #3
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok.
    So I've tried using Lightbox. I have done everything the instructions say to do.
    I still cannot get the lightbox js & css to apply to the images in the table generated via php.

    here is the code for the table
    PHP Code:
    //
    $projectlink '';
    $images '';
    if (
    $clientrow[2] != '') {
        
    $projectlink '&bull;&nbsp;<a class="blue" href="'.$clientrow[2].'"target="_blank">'.$clientrow[2].'</a><br />';
        }
    if (
    $clientrow[3]) {
        
    $images '<img width="200" height="120" src="i/'.$clientrow[3].'" border="0" alt="'.$clientrow[1].'" />';
        } 
    if (
    $clientrow[4]) {
        
    $images .= '<br /><img width="200" height="120" src="i/'.$clientrow[4].'" border="0" alt="'.$clientrow[1].'" vspace="4" />';
        }
    print 
    '<tr bgcolor="#CCCCCC"><td width="90%" align="left" valign="middle"><b>'.$clientrow[1].'</b></td>';
    print 
    '<td width="10%" align="center" valign="middle" bgcolor="#CCCCCC" rowspan="2">';
    print 
    $images.
    print 
    '<tr><td align="left" valign="top">'.nl2br($clientrow[5]).'<br />'.$projectlink.'&nbsp;</td></tr>';
    '</td></tr>';
    // 
    I still cannot figure where to call the JS and apply the css. I have tried numerous places (not in the php code) and nothing seems to work.


    please advise. Thank you
    Last edited by Energy_IT; 10-30-2008 at 08:41 PM.

  • #4
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Have you tried this lightbox?

    http://leandrovieira.com/projects/jquery/lightbox/

    I found it the easiest to implement-- no javascript required in the code, you just assign a class to a link. Just make sure you have the jquery javascript linked in the header of the file you're working on!

    Edit: You do have to define how to call the lightbox (like "Select all links in object with gallery ID", or "Select all links with lightbox class" -- the last one is the one I prefer) but the "How to use" section tells you how to do it.

    Double edit!: Also looking at the source code of the examples provided helps too. Although that is a "duh" thing, it has really helped me in the past for trying to learn how the javascript is implemented.
    Last edited by sakka; 10-30-2008 at 09:25 PM.

  • #5
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, So i have read both of the these lightboxes "how to's" and I don't think I can use either of these.

    It's too far out of my scope.

    I am pulling these images from a sql db using php.

    I'm not simply using an image gallery.

    my image1 and image2 are defined in the php.

    I cannot seem to make the connection on how to put all these peices together. grrr...............

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    What do you mean by images to enlarge? You can do something simple like this:

    <img src="blah.jpg" class="myimage" />

    and inside css:

    .myimage { width: 200px; height: 200px; }
    .myimage:hover { width:400px; height:400px; }

  • #7
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I finally got the lightbox to work.
    thank you everyone for your time and assistance.
    for reference here is the code I ended up utilizing.
    PHP Code:
    <?php
    //
    $projectlink '';
    $images '';
    if (
    $clientrow[2] != '') {
        
    $projectlink '&bull;&nbsp;<a class="blue" href="'.$clientrow[2].'" target="_blank">'.$clientrow[2].'</a><br />';
        }
    if (
    $clientrow[3]) {
        
    $images '<a href="i/'.$clientrow[3].'" rel="lightbox[projects]"><img width="200" height="120" src="i/'.$clientrow[3].'" border="0" alt="'.$clientrow[1].'" /></a>';
        }
    if (
    $clientrow[4]) {
        
    $images .= '<br /><a href="i/'.$clientrow[4].'" rel="lightbox[projects]"><img width="200" height="120" src="i/'.$clientrow[4].'" border="0" alt="'.$clientrow[1].'" vspace="4" /></a>';
        }
    print 
    '<tr bgcolor="#CCCCCC"><td width="90%" align="left" valign="middle"><b>'.$clientrow[1].'</b></td>';
    print 
    '<td width="10%" align="center" valign="middle" bgcolor="#CCCCCC" rowspan="2">';
    print 
    $images.'</td></tr>';
    print 
    '<tr><td align="left" valign="top">'.nl2br($clientrow[5]).'<br />'.$projectlink.'&nbsp;</td></tr>';
    //
    ?>


  •  

    Posting Permissions

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