Overlayer

With Overlayer, you can add overlays and captions to you images which responds to the mouse pointer. You can use use image or any HTML content in the overlay.

Overlayer: default Example

It can be activated via HTML5 data attribute data-overlayer

<a data-overlayer="true" href="link.html"><img src="image.jpg" alt="" /></a>

Overlayer: custom overlay

Custom Overlay: Bottom

Custom Overlay: Top

Custom Overlay: Left

Custom Overlay: Right

To use a custom overlay you need to add a div tag inside the desired element and give it a class overlay. You can also use the effect parameter to change the animation effect. For example:

<a data-overlayer="effect:bottom;" href="mypage.html">
    <img src="image.jpg" alt="" />
    <div class="overlay">Custom content goes here</div>
</a>

Overlayer: Inverse effect

Custom Overlay: Bottom

Custom Overlay: Top

Custom Overlay: Left

Custom Overlay: Right

You can change the state of overlayer's default behaviour using the invert parameter. For example:

<a data-overlayer="invert:on;" href="mypage.html">
    <img src="image.jpg" alt="" />
    <div class="overlay">Custom content goes here</div>
</a>

Overlayer: custom animation

Custom Overlay Animation

Custom Overlay Animation

• Effect : Bottom
• Easing : easeOutBack
• duration : 1000

Custom Overlay Animation

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

You can also use multiple parameters to create unique effects. Here is a list of common parameters:

• effect - Set an effect for custom overlay (fade, bottom, top, right or left)
• invert - Reverses the state of effect. Visible on page load and moves out on hover (fade, bottom, top, right or left)
• duration - Animation Speed(in milliseconds). (eg. 300)
• easing - Set the animation easing method (click here to see all the easing methods available)

<a data-overlayer="effect:bottom; easing:easeOutBack; duration:1000;" href="mypage.html">
    <img src="image.jpg" alt="" />
    <div class="overlay">Custom content goes here</div>
</a>

LightBox

The Lightbox allows you to display images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.

LightBox: basic example

To use lighbox on a link you need to use the HTML5 attribute data-lightbox. For example:

<a href="image_big.jpg" data-lightbox="true"><img src="image.jpg" alt="" /></a>
<a href="http://youtube.com/watch?v=videoID" data-lightbox="true" ><img src="image.jpg"  /></a>
<a href="http://vimeo.com/videoID" data-lightbox="true" ><img src="image.jpg" /></a>
<a href="/path_to_ajax/file.html" data-lightbox="true" ><img src="image.jpg" /></a>
<a href="http://domain.com/swfpath.swf" data-lightbox="true" ><img src="image.jpg" /></a>
<a href="http://iframe.com" data-lightbox="true" ><img src="image.jpg" /></a>

LightBox: setting captions

Title Position: Float

Title Position: Outside

Title Position: Over

Title Position: Inside

For creating captions you need to specify a title tag and set the position parameter in the data attribute. For example:

<a data-lightbox="titlePosition:float" href="image_big.jpg" title="Some
                    Title" ><img src="image.jpg" alt="" /></a>

TitlePosition can be one of these: float, over, inside, outside

LightBox: image galleries

If you want to create a group/gallery for your images or videos use the group parameter. For example:

<a data-lightbox="group:gallery" href="image1.jpg"><img src="image1_small.jpg" alt="" /></a>
<a data-lightbox="group:gallery" href="image2.jpg"><img src="image2_small.jpg" alt="" /></a>

Inline Slides

Inline Slides: default example

Use the HTML5 custom data attribute data-slides to activate the slideshow. For example

<div data-slides="on">
    <img src="image_1.jpg" />
    <img src="image_2.jpg" />
    <img src="image_3.jpg" />
</div>

By default the effect is set to fade. To use the sliding effect, use the fx parameter in the data attribute.

<div data-slides="fx:slide">
    <img src="image_1.jpg" />
    <img src="image_2.jpg" />
    <img src="image_3.jpg" />
</div>

Inline Slides: navigation/pagination setup

Default Pager

You can activate the pager by using the pager parameter in the data atrribute.

Default Pager Without Navigation

The navigation is enabled by default. To turn it off use nav:off parameter in the data attribute.

Custom Pager

<div data-slides="pager:on">
    <img src="image_1.jpg" />
    <img src="image_2.jpg" />
    <img src="image_3.jpg" />
</div>

To use a custom pagination you need to specify the class or the ID of the pager element. All the top-level children of the custom pager element serves as a trigger for paginating the slides. For example:

<div data-slides="pager:#pager">
    <img src="image_1.jpg" />
    <img src="image_2.jpg" />
    <img src="image_3.jpg" />
</div>

Here #pager refers to the ID of the custom pager element. Please note that you can also provide classes instead of ID. For example data-slides="pager:.pager"

ToolTips

ToolTips are a great way to provide information or hints to your user.

ToolTips: default setup

Use the HTML5 custom data attribute data-tooltip to activate the tooltip. The content of the tooltips are pulled from the title attribute of the element, but you can use any HTML content in your tooltips which we will show you in the later section.

You can use tooltips in just about any HTML tag of your website. For example:

<a href="image_lb.jpg" data-tooltip="on" title="Hi There! Im a
    ToolTip" >
    <img src="image.jpg" width="180" height="120" alt="" />
</a>

ToolTips: position setting

You can change the direction of the tooltip using the position parameter in the data attribute. However the script will check if the tooltip is going outside the browser viewport, in which case it will automatically flip to the best position.

<a href="image_lb.jpg" data-tooltip="position:bottom" title="Hi There! Im a ToolTip" >
    <img src="image.jpg" width="180" height="120" alt="" />
</a>

position can be one of these: top, right, bottom, left

ToolTips: sticky tips

You can make a tooltip sticky using the sticky parameter in the data attribute. For example:

<a href="image_lb.jpg" data-tooltip="sticky:on" title="Hey! Im a Sticky tooltip." >
    <img src="image.jpg" width="180" height="120" alt="" />
</a>

ToolTips: custom activation methods

The tooltip can be activated via hover, click and focus method. The default method is hover.
Please note that the focus method can only be used on form elements like text input, textarea and select boxes.

Activation with Click

Click to activate tooltips

<a href="image_lb.jpg" data-tooltip="activation:click" title="Custom Activation" >
    <img src="image.jpg" width="180" height="120" alt="" />
</a>

Activation with Focus

<input data-tooltip="activation:focus" type="text" title="Activate on Focus" />

ToolTips: custom width

To set the maximum width of the tooltip you can use the maxwidth parameter in the data attribute. For example:

<a href="image_lb.jpg" data-tooltip="maxwidth:300" title="A tooltip with custom width" >
    <img src="image.jpg" width="180" height="120" alt="" />
</a>

ToolTips: custom content

Just look at these

The content of this tooltip is coming from a div element.

The content of this tooltip is coming from a div element.

To create a custom tooltip use a div element with the CSS class tip-content. You can use any HTML inside the div element. For example:

<a data-tooltip="on" href="mypage.html">
    <img src="image.jpg" width="180" height="120" alt="" />
    <div class="tip-content">Tooltip content goes here..</div>
</a>

Advanced Examples

You can mix and match the effects from the script to bring about unique user experience. Here are some of the very few examples (only limited by our imagination)

Example: Image gallery

Alice in Wonderland

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante

View Code

<div data-overlayer="on">
    <img src="image.jpg" alt="" >
    <div class="overlay">
        <h3><strong>Alice in Wonderland</strong></h3>
        <p>Paragraph text here...</p>
        <a href="image_big.jpg" data-overlayer="on" data-lightbox="transitionOut:fade; group:mygroup;">
        <img src="demo/thumbs/image_thumb.jpg" alt="" >
        </a>
    </div>
</div>
                        

View Code

<div data-overlayer="effect:bottom">
    <div data-slides="pager:#gallery">
        <img src="image_big_1.jpg" alt="" >
        <img src="image_big_2.jpg" alt="" >
        <img src="image_big_3.jpg" alt="" >
        <img src="image_big_4.jpg" alt="" >
    </div>
    <div class="overlay" id="gallery">
        <img src="image_thumb_1.jpg" alt="" >
        <img src="image_thumb_2.jpg" alt="" >
        <img src="image_thumb_3.jpg" alt="" >
        <img src="image_thumb_4.jpg" alt="" >
    </div>
</div>
                        

Example: Tabs

<ul id="tabs">
    <li>Tab One</li>
    <li>Tab Two</li>
    <li>Tab Three</li>
</ul>
<div data-slides="fx:slide; pager:#tabs; nav:off">
    <p>Content goes here...</p>
    <p>Content goes here...</p>
    <p>Content goes here...</p>
</div>
                

Example: share

Click to Share

Usage

ThumbFx requires jQuery 1.7+ and jQuery Easing (visit the project page). Jquery Easing is included in the zip file.

As the tagline says, you don't need any JavaScript knowledge, just include the JS and CSS file in your webpage's head section and you're ready to go. Don't forget to copy the images folder to your server.

Usage: Advanced Setup

The script provides you with four methods namely overlayer, lightbox, slides and tooltip.

The defaults for all the methods are defined in the core JS file. However, you can overwrite the defaults by simply re-initializing the methods in your webpage and providing your default options. For Example:

<script type="text/javascript">
jQuery(function ($) {
	$('[data-overlayer]').overlayer({
		effect: 'top', // Default overlayer animation effect set to top
		duration: 2000 // Default overlayer animation duration is now set to 2000 
	});
	$('[data-lightbox]').lightbox({
		titlePosition: 'inside',
		transitionIn: 'fade'
	});
});
</script>     

In the above example, we just re-initialized the overlayer and the lightbox methods to use new options. Now all elements using these methods will inherit the new defaults and not the ones set in the JS file. But you can still fine tune each setting in the elements data attribute.

To activate ThumbFx methods on other elements, you just need to initialize the methods on your preferred element. For example to activate lightbox on all anchor tags with the class name zoom:

<script type="text/javascript">
jQuery(function ($) {
	$('a.zoom').lightbox();
});
</script>     

Usage: available Options

There's a plethora of options you can use for each methods. Listed below are all the options you can use in your data attribute as well as in the re-initialisation function, listed by method's name.

OverLayer Options

Inline Slides Options

ToolTip Options

LightBox Options