You are here

README.txt in Hover Preview for ImageCache 6

Same filename and directory in other branches
  1. 7 README.txt
Hover Preview for ImageCache
============================

Requires Drupal 6.x, Imagefield, ImageCache, and Content modules.

This module provides a new series of ImageCache formatters. The overall goal
is to enable the ability to provide a hover state of an image when a mouse
rolls over it. This is similar to functionality you would find on many
shopping websites.

The implementation of this module goes a bit further than just a javascript
hover. The idea is you create multiple imagecache presets, and this will allow
you to hover from any preset to any other preset.

Here's a step-by-step of how to use it.

1) Create at least two imagecache presets, one for your thumbnail/static/small
image, and one for your larger hover image. You can create as many presets as
you like, but for this example we'll use two.

Preset #1 = Thumbnail = Scale and Crop, size of 80x80
Preset #2 = BigImage = Scale and Crop, size of 200x200

2) After saving your presets, you now have new choices available for the field
output. Let's say I am using views, and I created a view that outputs an
imagefield. I can now open the view, click on that field, and head down to the
'format' section. You have new options available to you, such as:

Hover: Thumbnail TO: BigImage
Hover: BigImage TO: Hover

The item on the left is the static image size to output, and the item on the
right is the hover state.

3) You can also manually output this at the theme layer with a statement
similar to the following. I am assuming you opened a file such as
node-mynodetype.tpl.php.

<?php
  print theme('hover_preview', $node, 'field_mycckfieldname', 'Thumbnail',
	'BigImage');
?>

In this case, field_mycckfieldname is the name of your CCK field, Thumbnail is
the name of the source imagecache preset, and BigImage is the hover state.


IMPORTANT NOTE: If you have a lot of imagecache presets, you are going to have a huge
number of formatters. This is due to the fact that the module maps ALL presets
to ALL other presets.

File

README.txt
View source
  1. Hover Preview for ImageCache
  2. ============================
  3. Requires Drupal 6.x, Imagefield, ImageCache, and Content modules.
  4. This module provides a new series of ImageCache formatters. The overall goal
  5. is to enable the ability to provide a hover state of an image when a mouse
  6. rolls over it. This is similar to functionality you would find on many
  7. shopping websites.
  8. The implementation of this module goes a bit further than just a javascript
  9. hover. The idea is you create multiple imagecache presets, and this will allow
  10. you to hover from any preset to any other preset.
  11. Here's a step-by-step of how to use it.
  12. 1) Create at least two imagecache presets, one for your thumbnail/static/small
  13. image, and one for your larger hover image. You can create as many presets as
  14. you like, but for this example we'll use two.
  15. Preset #1 = Thumbnail = Scale and Crop, size of 80x80
  16. Preset #2 = BigImage = Scale and Crop, size of 200x200
  17. 2) After saving your presets, you now have new choices available for the field
  18. output. Let's say I am using views, and I created a view that outputs an
  19. imagefield. I can now open the view, click on that field, and head down to the
  20. 'format' section. You have new options available to you, such as:
  21. Hover: Thumbnail TO: BigImage
  22. Hover: BigImage TO: Hover
  23. The item on the left is the static image size to output, and the item on the
  24. right is the hover state.
  25. 3) You can also manually output this at the theme layer with a statement
  26. similar to the following. I am assuming you opened a file such as
  27. node-mynodetype.tpl.php.
  28. print theme('hover_preview', $node, 'field_mycckfieldname', 'Thumbnail',
  29. 'BigImage');
  30. ?>
  31. In this case, field_mycckfieldname is the name of your CCK field, Thumbnail is
  32. the name of the source imagecache preset, and BigImage is the hover state.
  33. IMPORTANT NOTE: If you have a lot of imagecache presets, you are going to have a huge
  34. number of formatters. This is due to the fact that the module maps ALL presets
  35. to ALL other presets.