Download Now

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

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

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

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.

*Note: We'll be using Overlayer in conjunction with Lightbox

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

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

<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

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

View Code


Example: Tabs

  • Tab One
  • Tab Two
  • Tab Three

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

View Code


Example: share

Share On Twitter Pin It! Stumbleupon 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

Name Default Description
effect fade The animation effect for the overlay. Can be fade, top, bottom, left, right.
duration 300 The duration of the animation effect for the overlay in milliseconds. Can be any positive integer.
easing swing The easing effect for the overlay animation. If jQuery Easing is used, you can use any easing methods. To see all the easing types click here.

Inline Slides Options

Name Default Description
fx fade Slide effect. Can be fade or slide
speed 700 Transition duration in milliseconds. Can accept any positive integer.
pager false To enable slide pagination set this option to true or on
nav true Navigation is enabled by default. To disable, you can use false or off
easing swing Transition easing methods when jQuery Easing plugin is used.

ToolTip Options

Name Default Description
activation hover The trigger for tooltip activation. Can be hover or click
maxwidth 220 Sets the maximum width of the toltips in pixels.
gutter 5 The amount of space between the tooltip and the originating element in pixels.
sticky false To turn on sticky tooltips use true.
position top Default position for the tooltips. Can be top, right, bottom or left.
delay 0 The delay before removing tooltips off the screen in milliseconds. Not applicable for sticky tooltips.
fadeIn 300 Fade in speed of the tooltips in milliseconds.
fadeOut 300 Fade out speed of the tooltips in milliseconds.

LightBox Options

Name Default Description
padding 10 Space inside lightBox around content.
width 560 Set a width in pixel.
height 340 Set a height in pixel.
titlePosition float How should the titlte show up? Can be float, outside, inside or over
transitionIn elastic Set a opening transition. Can be fade, elastic, or none
transitionIn elastic Set a closing transition. Can be fade, elastic, or none
overlayColor #000 Color of the background overlay. Accepts any hexadecimal color code.
easingIn swing Easing method to use when the lightbox opens.
easingOut swing Easing method to use when the lightbox closes.