Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Would it be possible to add an extra span to the output of images so that we could then use rollover effects based on the span? For example currently an image output looks like:
<div class="sb-image sb-gallery sb-gallery-field_image">
<a title="An Image" rel="shadowbox[field_image]" href="https://example.com/image.png">
<img title="An Image" alt="An Image" src="https://example.com/smaller.png">
</a>
</div>
But if it was:
<div class="sb-image sb-gallery sb-gallery-field_image">
<a title="An Image" rel="shadowbox[field_image]" href="https://example.com/image.png">
<img title="An Image" alt="An Image" src="https://example.com/smaller.png">
<span class="sb-rollover"></span>
</a>
</div>
We could do a simple css trick if we wanted to show a nice rollover magnifying glass etc.
Comments
Comment #1
7wonders CreditAttribution: 7wonders commentedIts actually very simple. Change line 340 of shadowbox.module to:
$output = l('<span class="sb-rollover"></span>' . $output, $variables['url'], $options);
I have only tested this with images and it works perfectly by doing:
Borrowed from here - http://webdesignandsuch.com/create-overlay-on-image-hover-jquery-css3/
Comment #2
7wonders CreditAttribution: 7wonders commented