By ss54 on

I have posted a story content with a thumbnail. I have tried to let the user get a bigger image when one hovers with mouse on the thumbnail. So I could not do it with CSS on the story content type. however, I found it possible to this with the following code, and the question is how to do this on a Drupal content that is, how to insert this CSS code with classes in between into a Drupal page.

The code that works outside Drupal is :

Css Code

<style type=”text/css”>
.spiderpic{
position: relative;
z-index: 0;
}

.spiderpic:hover{
background-color: transparent;
z-index: 50;
}

.spiderpic span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
}

.spiderpic span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.spiderpic:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

HTML code
<a class=”spiderpic” href=”http://webdesigninfo.wordpress.com”><img src=”http://a.wordpress.com/avatar/settysantu-48.jpg?1180110315″ width=”48px” height=”48px” border=”0″ /><span><img src=”http://www.stumbleupon.com/mainpics/2725502.jpg” /></span></a>

See this example picture

I would so much grateful for any help.

⋅ Categories: Drupal 6.x

Comments

gjangelo’s picture

gjangelo commented

Are you uploading the image as a CCK image field?

  • Let the larger image be uploaded into the CCK field.
  • Use the imagecache module to size the thumbnail image
  • use contemplate module to add the hover functionality to your content type.
    • print the field to the thumbnail path in the page.
    • add jss/css to activate the large image path display/hover functionality

Which would be a lighter version of the cloudzoom module(?) http://drupal.org/project/cloud_zoom

ss54’s picture

ss54 commented

Thanks a lot for this reply. One point, I could not understand the forth bullet (print the field to the thumbnail path in the page.). may I ask you to explain it in more detail.
BTW, I used the above style by including it into the style.css file and used the html in the body of a story type and it worked. But may be your method is much better, in the sense that the popup opens in a more beautiful way.

Thanks

gjangelo’s picture

gjangelo commented

Have you looked at cloud zoom? It may be what you are after.

To clarify the fourth point:
When Imagecache generates the thumbnail to your image that you uploaded via CCK imagefield, the original and thumbnail images have different locations.

EX:
/sites/default/files/mainimg/
/sites/default/files/imagefield_thumbs/mainimg/

using contemplate or devel, you can find the fieldname variable:

ex: $node->field_mainimg[0]['filename']

So I can just edit the contemplate output (or story template) to print both images:

/sites/default/files/mainimg/<?php print $node->field_mainimg[0]['filename'] ?>
/sites/default/files/imagefield_thumbs/mainimg/<?php print $node->field_mainimg[0]['filename'] ?>

You'd add the appropriate css classes to that code, and then put the correlating css & js in your theme to complete the interaction.

edit: img tags do not display as code on drupal.org, so the above code is incomplete so that it will display.

spovlot’s picture

spovlot commented

I would recommend using the imagecache theme() function instead of hardcoding the image path.

As mentioned on http://drupal.org/node/163561 :

If you want to add manually an image and apply an imagecache preset on it, you need to add a code snippet to the desired .tpl.php file:

<?php
print theme('imagecache', $preset, $image['filepath'], $alt, $title,  $attributes); 
?>