You are here

Home » API reference » Hover Preview for ImageCache 7

README.txt in Hover Preview for ImageCache 7

Same filename and directory in other branches
  1. 6 README.txt
Hover Preview Image Style
=========================

Requires Drupal 7.x.

This module provides a mouse hover state for images. 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 image styles, 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. In the Field Display settings, choose Hover Preview as the display.


3) Now you must configure how the Hover Preview is presented:
- The image style
- What to link the image to
- The Hover Preview action (image popup preview or image replacement)
- The Hover Preview style when showing the previewed image

File

README.txt
View source 
  1. Hover Preview Image Style

  2. =========================

  3. 

  4. Requires Drupal 7.x.

  5. 

  6. This module provides a mouse hover state for images. This is similar to

  7. functionality you would find on many shopping websites.

  8. 

  9. The implementation of this module goes a bit further than just a javascript

  10. hover. The idea is you create multiple imagecache presets, and this will allow

  11. you to hover from any preset to any other preset. 

  12. 

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

  14. 

  15. 1) Create at least two image styles, one for your thumbnail/static/small

  16. image, and one for your larger hover image. You can create as many presets as

  17. you like, but for this example we'll use two.

  18. 

  19. Preset #1 = Thumbnail = Scale and Crop, size of 80x80

  20. Preset #2 = BigImage = Scale and Crop, size of 200x200

  21. 

  22. 

  23. 2) After saving your presets, you now have new choices available for the field

  24. output. In the Field Display settings, choose Hover Preview as the display.

  25. 

  26. 

  27. 3) Now you must configure how the Hover Preview is presented:

  28. - The image style

  29. - What to link the image to

  30. - The Hover Preview action (image popup preview or image replacement)

  31. - The Hover Preview style when showing the previewed image

  32.