...

View Full Version : Image Rollover Help



Energy_IT
10-27-2008, 07:00 PM
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.

BoldUlysses
10-27-2008, 07:30 PM
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 (http://jquery.com/demo/thickbox/) or Lightbox (http://www.huddletogether.com/projects/lightbox2/). They're very easy to set up and use.

Energy_IT
10-30-2008, 07:39 PM
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

//
$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

sakka
10-30-2008, 08:22 PM
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.

Energy_IT
11-03-2008, 07:07 PM
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...............

Scriptet
11-03-2008, 08:22 PM
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; }

Energy_IT
11-04-2008, 02:03 PM
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
//
$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>';
//
?>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum