Widgetkit

Hits: 50259

Article Index

Page 3 of 3

The Widgetkit Spotlight allows you to add an overlay to your images which fades or moves in on mouse hover. The overlay can be an image or HTML content. The default magnifier spotlight is a perfect match to be used with a lightbox.

Features

  • Create nicely animated image overlays
  • Supports custom image or HTML content overlays
  • 5 different animation modes
  • Build on the latest jQuery version
  • Works with Joomla and WordPress

Examples

If no custom overlay is set the default spotlight fades in an overlay with an magnifier image. If you define a custom overlay you can choose between different animations - fade, bottom, top, right and left.

fade

fadeCustom Overlay (Bottom)

fadeCustom Overlay (Right)

fade

fadeCustom Overlay (Top)

fadeCustom Overlay (Left)

How to use

Use the HTML5 custom data attribute data-spotlight to activate the spotlight.

<a data-spotlight="on" href="/mypage.html">
  <img src="/image.jpg" width="180" height="120" alt="" />
</a>

To create a custom overlay use a div element with the CSS class overlay. You can set the effect parameter to the data attribute. For example:

<a data-spotlight="effect:bottom;" href="/mypage.html">
  <img src="/image.jpg" width="180" height="120" alt="" />
  <span class="overlay">Custom Overlay</span>
</a>

You can set the effect parameter to fade, bottom, top, right and left.

Tags: Widgetkit slideshow spotlight lightbox

Words from our ministers

 

Rev. Chris Humble

Rev. Christopher Humble

Acts Ch. 2 v.42 "they devoted themselves to the apostles's teaching, fellowship, breaking bread and prayers"

Bruce2

Rev. Bruce Sawyer

Micah Ch6 v8 "he has shown you, O mortal what is good. And what does the Lord require of you? To act justly and love mercy and to walk humbly with your God"

 

Rev. Les Nevin.

 

 

Thought for the month.

John Ch.10 v10 "I have come in order that you might have life - life in all its fullness."