Thumbnail Hover Enarge Effect, Mouseover on Thumbnail in Image Modul Teaser

Hello!

I thought I share this little modification to image module to make the thumbnail image in the teaser to enlargen on mouseover or hover in other word. This modification based on css and not javascript!
I'm sure that there is better way to do this or if anyone would make a module out of it I would apprecaiate it but till then this is easy and it works. The actual effect and image locations can be changed if you change the css px values in section 3.:

1. I added an extra function to includes/common.inc:

function l2($text, $path, $attributes = array(), $query = NULL, $fragment = NULL, $absolute = FALSE, $html = FALSE) {
if ($path == $_GET['q']) {
if (isset($attributes['class'])) {
$attributes['class'] .= ' active';
}
else {
$attributes['class'] = 'active';
}
}
return check_url(url($path, $query, $fragment, $absolute)) .'"'. drupal_attributes($attributes) .'>'. ($html ? $text : check_plain($text)) ;
}

2. modify the following functions in modules/image/image.module:

function image_display(&$node, $label = IMAGE_PREVIEW, $attributes = array()) {
// regenerate images?
if ($node->images[$label] != $node->images[IMAGE_ORIGINAL] &&
(!file_exists(file_create_path($node->images[$label])) ||
filemtime(file_create_path($node->images[$label])) < variable_get('image_updated', 0)))
{
_image_remove_derivatives($node);
_image_build_derivatives($node);
node_save($node);
drupal_set_message(t('The image %title had missing derivative image which has been regenerated.', array('%title' => $node->title)));
}

if (empty($node->images[$label])) {
return;
}

$image_info = image_get_info(file_create_path($node->images[$label]));
$attributes['class'] = "$label". (isset($attributes['class']) ? $attributes['class'] : "");
$attributes['width'] = $image_info['width'];
$attributes['height'] = $image_info['height'];

return theme('image_display', $node, $label, file_create_url($node->images[$label]), $attributes);
}

function theme_image_teaser($node) {
return 'nid, array(), NULL, NULL, TRUE, TRUE).
image_display($node, IMAGE_ORIGINAL).'';
}

3. Add the following to modules/system/default.css:

.content {

left: 0px;
position: relative;
top: 0px;

}

.content a .image image-_original {

display: block;
height: 0px;
left: -0px;
position: absolute;
top: -0px;
width: 0px;
}

.content a.image image-thumbnail , .content a.image image-thumbnail :visited {

display: block;

}

.content a.image image-thumbnail :hover .image image-_original {

display: block;
height: 200px;
left: 0px;
position: absolute;
top: 0px;
width: 200px;
}

.content {

left: 0px;
position: relative;
top: 0px;
width: 100px;
}

.content a ._original{

display: block;
height: 0px;
left: -0px;
position: absolute;
top: -0px;
width: 0px;
}

.content a.thumbnail, .content a.thumbnail:visited {

display: block;

}

----------------------------------------------------------
Have fun with! The modification code was base on the following demostration:
http://moneytreesystems.com/css/picpopup.html

.content a.thumbnail:hover ._original{

display: block;
height: 200px;
left: 0px;
position: absolute;
top: 0px;
width: 200px;
}

Keywords: thumbnail popup, mouseover thubnail, hover thumbnail, hover image, mouseover image, hover teaser, mouseover teaser, image module, mouse over, image effect, pop up image