Description on hover - php-file?

simonsenphoto / 2010-03-25 12:14:02   

Hi @all,

I found the nice exhibit and worked on customizing it (actually with test pictures: www.simonsenphoto.com/portfolio).

I like it simple and clean so I tried to show the image captions only on hover at the bottom of the pictures. Didn't found a solution here and looked around in the web, where I found this nice explanation:

http://www.sohtanaka.com/web-design/css-on-hover-image-captions/

But everytime I tried to bring it to work I got an error message.

The pictures display by using this modiefied iwakami.php-file:

<?php if (!defined('SITE')) exit('No direct script access allowed');

/**
* Iwakami
*
* Exhibition format
*
* @version 1
* @author Vaska
*/

// defaults from the general libary - be sure these are installed
$exhibit['dyn_css'] = dynamicCSS();
$exhibit['dyn_js'] = dynamicJS();
$exhibit['exhibit'] = createExhibit();

function dynamicJS()
{
return "function show_image(id)
{
$('.pic').hide();
$('#p' id).show();
$('#num').html(id);
return false;
}";
}

function createExhibit()
{
$OBJ =& get_instance();
global $rs;

$pages = $OBJ->db->fetchArray("SELECT *
FROM ".PX."media, ".PX."objects_prefs
WHERE media_ref_id = '$rs[id]'
AND obj_ref_type = 'exhibit'
AND obj_ref_type = media_obj_type
ORDER BY media_order ASC, media_id ASC");

// ** DON'T FORGET THE TEXT ** //
$s = $rs['content'];

if (!$pages) return $s;

$i = 1; $a = '';

$total = count($pages);

// people will probably want to customize this up
foreach ($pages as $go)
{
$title = ($go['media_title'] == '') ? '' : $go['media_title'] . ' ';
$caption = ($go['media_caption'] == '') ? ' ' : $go['media_caption'];

$x = getimagesize(DIRNAME . GIMGS . '/' . $go['media_file']);

$off = ($i == 1) ? "style='display: block;'" : "style='display: none;'";

$next = ($i == $total) ? 1 : $i 1;
$prev = ($i == 1) ? $total : $i-1;

$a .= "<div id='p$i' class='pic' $off>";
$a .= "<a href='#' onclick='show_image($next); return false;'><img src='" . BASEURL . GIMGS . "/$go[media_file]' alt='$go[media_caption]' width='" . $x[0] . "' height='" . $x[1] . "' class='img-bot' /></a><p>{$title}<br>{$caption}<br><a href='#' onclick='show_image($prev); return false;'> << &nbsp;</a> $i / $total <a href='#' onclick='show_image($next); return false;'>&nbsp; >></a></p></div>";

$i ;
}

// images
$s .= "<div id='img-container'>\n";
$s .= "<div id='pics'>\n";
$s .= $a;
$s .= "</div>\n";
$s .= "</div>\n\n";

return $s;
}

function dynamicCSS()
{
return "#img-container { }
#pics { }
p#nums { }
.img-bot { margin-bottom: 12px; }";
}

?>

----------snip---------

Okay, I did write the css code into the main style-css...

But where/how the hell do I have to put the code in the php-file to make it work? Or I'm totally wrong to put it in the iwakami.php-file?

Would be great to get an answer, I'm nearly indespair :-(

Thank you
Stefan

This thread has been closed, thank you.