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

7wonders’s picture

Its 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:

span.sb-rollover {
  opacity: 1;
  -o-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -webkit-transition: -webkit-transform 1s;
  background: url(../images/mag.png) center center no-repeat #000;
  cursor: pointer;
  height: 346px;
  width: 347px;
  position: absolute;
  z-index: 10;
  opacity: 0;
}

span.sb-rollover:hover {
  opacity: .7;
  -o-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -webkit-transition: -webkit-transform 1s;
  -webkit-box-shadow: 0px 0px 4px #000;
  -moz-box-shadow: 0px 0px 4px #000;
  box-shadow: 0px 0px 4px #000;
}

Borrowed from here - http://webdesignandsuch.com/create-overlay-on-image-hover-jquery-css3/

7wonders’s picture

Status: Active » Needs review