Hi I need help with my php script. This is a basic site that creates a portfolio page of photographs. On the top it has the large picture, and on the bottom there are thumbnails that update the pic on top when you hover with your mouse. My problems are that (a) I need the thumbnails to wrap after 5 images (start a new line of thumbnails) and (b) I would love it if when you CLICK the thumbnail, it "locks" that picture in place (so when you move your mouse over another pic it won't change - but I do still want the hover feature until they click, not sure if it is possible.) Here is my code so far:
<?php
$thumbnail_height = 60;
$image_height = 400;
function format_portfolio ($dirname, $filenames)
{
global $thumbnail_height;
global $image_height;
$str .= "<table width=775><tr><td width=775 align=center>";
$str .= "<img border=0 name='placeholder' height=$image_height src='images/$dirname/$filenames[0]'><br>";
$str .= "<table width=775 cellpadding=5><tr>";
for ($i=0; $i<count($filenames); $i++) {
$str .= "<td valign=top width=775>";
$str .= "<img height=$thumbnail_height OnMouseover='javascript:document.placeholder.src=\"images/$dirname/$filenames[$i]\"' src='images/$dirname/$filenames[$i]'>";
$str .= "</td>";
}
$str .= "</tr></table>"; // the thumbnail box
$str .= "</td></tr></table>"; // the overall portfolio
return $str;
}
function get_portfolio_html ($dirname)
{
$count = 0;
$filenames = array();
if ($handle = opendir("images/$dirname")) {
while (false !== ($file = readdir($handle))) {
if ($file == '.')
continue;
if ($file == '..')
continue;
$filenames[$count] = $file;
$count++;
}
closedir($handle);
}
//$str .= "found $count items in '$dirname'<br>";
$str .= format_portfolio ($dirname, $filenames);
return $str;
}
function display_portfolio ($dirname)
{
$str = get_portfolio_html ($dirname);
echo $str;
}
?>
Any help would be great. I don't really care about (b) - my first need is much more urgent. Thanks in advance!!
<?php
$thumbnail_height = 60;
$image_height = 400;
function format_portfolio ($dirname, $filenames)
{
global $thumbnail_height;
global $image_height;
$str .= "<table width=775><tr><td width=775 align=center>";
$str .= "<img border=0 name='placeholder' height=$image_height src='images/$dirname/$filenames[0]'><br>";
$str .= "<table width=775 cellpadding=5><tr>";
for ($i=0; $i<count($filenames); $i++) {
$str .= "<td valign=top width=775>";
$str .= "<img height=$thumbnail_height OnMouseover='javascript:document.placeholder.src=\"images/$dirname/$filenames[$i]\"' src='images/$dirname/$filenames[$i]'>";
$str .= "</td>";
}
$str .= "</tr></table>"; // the thumbnail box
$str .= "</td></tr></table>"; // the overall portfolio
return $str;
}
function get_portfolio_html ($dirname)
{
$count = 0;
$filenames = array();
if ($handle = opendir("images/$dirname")) {
while (false !== ($file = readdir($handle))) {
if ($file == '.')
continue;
if ($file == '..')
continue;
$filenames[$count] = $file;
$count++;
}
closedir($handle);
}
//$str .= "found $count items in '$dirname'<br>";
$str .= format_portfolio ($dirname, $filenames);
return $str;
}
function display_portfolio ($dirname)
{
$str = get_portfolio_html ($dirname);
echo $str;
}
?>
Any help would be great. I don't really care about (b) - my first need is much more urgent. Thanks in advance!!