Stunning lightbox effect (that anyone can install)

Install

If you're using one of these platforms, click your platform and follow the instructions to install the Magic Thumb module:

If you're not using one of the platforms above, install Magic Thumb like so:

  1. Download the Magic Thumb demo.
  2. Unzip the file on your computer and FTP the magicthumb folder to your website directory (on your server), keeping the file and folder structure intact.
  3. Reference the JavaScript and CSS files before the </head> in your page. Example:

    <link href="magicthumb/magicthumb.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="magicthumb/magicthumb.js"></script>
    

    (If you cannot access the head section of your page, reference the files elsewhere such as the main content of your page.)

  4. Link your small image to your large image with a class of MagicThumb. Example:

    <a href="big.jpg" class="MagicThumb"><img src="small.jpg" alt="" /></a>

A basic HTML page could look like this:

<html>
<head>
<title>Magic Thumb example</title>
<link href="magicthumb.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="magicthumb.js"></script>
</head>
<body>
<a href="big.jpg" class="MagicThumb"><img src="small.jpg" alt="" /></a>
</body>
</html>

Customize

Customize your Magic Thumb just how you want it. There are 28 parameters available.

Apply your settings with the data-options attribute. Example:

<a href="big.jpg" class="MagicThumb" data-options="expandSpeed:1500; expandEffect:fade;"><img src="small.jpg"/></a>

Alternatively, set your customizations with a <script> tag, to apply the same settings to every Magic Thumb image on the page. Example:

<script type="text/javascript">
MagicThumbOptions = {
    'expandSpeed':'1500',
    'expandEffect':'fade'
}
</script>

Do not put a comma after the last tag or Internet Explorer will throw a JavaScript error (a well documented IE bug).

Position

The image will enlarge into the center of the screen by default. You can change it to enlarge over the small image using expandAlign attribute.

Magic Thumb - Integration Guide
<a href="big.jpg" class="MagicThumb" data-options="expandAlign:image;"><img src="small.jpg"/></a>

(Notice how the button(s) show in corner of image, not in the corner of your screen. Button(s) are automatically positioned to the top right on Windows and Linux; and the top left on Mac OS. Visit the Buttons section to change position).

Effect

Choose from two effects to enlarge the image.

  1. Expand - large image will enlarge from your base image.
  2. Fade - large image will appear smoothly without enlarging.

The expand option is used by default. Change this to fade by adding the expandEffect parameter.

Fade looks like this:

Magic Thumb - Integration Guide
<a href="big.jpg" class="MagicThumb" data-options="expandEffect:fade;"><img src="small.jpg"/></a>

Easing

You can change the effect to all sorts of behaviours by using the expandEasing setting. Make it exactly how you like by choosing your favourite bezier curve options at cubic-bezier.com.

Bezier enlarge example 1
<a href="big.jpg" class="MagicThumb" data-options="expandEasing:cubic-bezier(.09,.63,0,.99);"><img src="small.jpg"/></a>

Trigger

Change your Magic Thumb to open on hover instead of on click. Set the expandTrigger option to hover:

Magic Thumb - Integration Guide
<a href="big.jpg" class="MagicThumb" data-options="expandTrigger:hover"><img src="small.jpg"/></a>

Text links

You can open images from text like so:

Look at this image!

<a href="big.jpg" class="MagicThumb">Look at this image</a>!

You can also open images via buttons, forms, menus and in other ways. Refer to the API example below.

Caption

Add titles or detailed descriptions to your enlarged images.

There are 3 ways to add text:

  • title - fast and easy; good for text only.
  • alt - fast and easy; good for text only.
  • span - advanced control; for adding any HTML formatting.
The image title tag is used by default. For example:

Magic Thumb - Integration Guide
<a href="big.jpg" class="MagicThumb" title="Caption displayed using title code"><img src="small.jpg"/></a>

Show a caption via the image alt tag using captionSource attribute:

Caption displayed using image alt tag
<a href="big.jpg" class="MagicThumb" data-options="captionSource:alt;"><img src="small.jpg" alt="Caption displayed using image alt tag"/></a>
Show rich captions with HTML tags by setting captionSource to <span>:
<a href="big.jpg" class="MagicThumb" data-options="captionSource:span;"><img src="small.jpg"/>
<span>Caption displayed using span tag. Here is some <strong>bold text</strong> and <em>italic text</em> and [a href="example.html"]here is a link[/a]</span>
</a>

You can position the caption to the right of the image by setting captionPosition:right. Here is a long, detailed description applied to the image:

<a href="big.jpg" class="MagicThumb" data-options="captionPosition:right; captionSource:span;"><img src="small.jpg"/>
<span>
<h4><strong>BREATHABLE COMFORT, EFFORTLESS RIDE</strong></h4>
The [a href="http://store.nike.com/us/en_us/pd/lunarepic-low-flyknit-mens-running-shoe/pid-11141961/pgid-11862849" rel="nofollow"]Nike LunarEpic Low Flyknit Men's Running Shoe[/a] is lightweight and breathable with targeted cushioning for a soft, effortless sensation underfoot.
<br />
<h5>ULTRA-LIGHT SUPPORT</h5>
A flexible, breathable Flyknit upper wraps your foot for a second-skin fit. Targeted areas provide lightweight support where you need it most.
<h5>FLUID FEEL</h5>
The soft, contoured Lunarlon midsole has precision-lasered cuts on the sides that collapse during footstrike, delivering a perfectly smooth transition from heel to toe.
<h5>SUPERB SOFTNESS</h5>
The pressure-mapped, laser-cut outsole amplifies the cushioning exactly where you need it, and disperses the impact across the entire foot, for incredible comfort and smoothness.
<br />
<br />
<form action="https://www.magictoolbox.com/magiczoomplus/examples/">
    <input type="submit" value="More Examples" />
</form>
<h5>STATS</h5>
<ul>
<li>Weight: 9.6 ounces</li>
<li>Offset: 10mm</li>
</ul>
<h5>FLYKNIT ORIGINS</h5>
Nike Flyknit technology was inspired by feedback from runners seeking a shoe with the snug (and virtually unnoticed) fit of a sock. Nike embarked on a four-year mission with teams of programmers, engineers and designers to create the technology needed to make the knit upper with static properties for structure and durability. Then the precise placement of support, flexibility and breathability—all in one layer—was refined. The result is a featherweight, formfitting and virtually seamless upper.
</span>
</a>

CSS

You can change the styling of the caption, font, colors, background and borders by editing the magicthumb.css file. Either edit the content of the CSS file itself or copy the styles you wish to change, paste them into your HTML page and adjust styles. By placing your edits in your own page, you won't need to worry about overwriting your changes in magicthumb.css in future, when you upgrade to the latest version of your Magic Thumb license. For quick reference, here is the latest magicthumb.css file (link opens in new window).

In the rare case that you want different styles on different images, you can create a new CSS class and reference it in data-options using cssClass parameter:

<a href="big.jpg" class="MagicThumb" data-options="cssClass: yourname"><img src="small.jpg"/></a>

Add your style changes to the <head> of your page e.g.:

<style>
.yourname.MagicThumb {
    border: 2px solid #a01894;
}

.yourname .mgt-bg {
    background-color: #78d3dc;
}

.yourname .MagicThumb-expanded {
    border: 10px solid red;
}
</style>
Magic Thumb - Integration Guide
<a href="big.jpg" class="MagicThumb" data-options="cssClass: yourname"><img src="small.jpg"/>

If you get stuck with CSS formatting, please contact us.

Buttons

Forward, back and close buttons are shown in the corner of the entire browser window by default. This setting is named auto.

Instead, you can position the buttons on the image by using the buttons parameter. Choose from top-left, top-right, bottom-left, bottom-right. This demo places buttons over the bottom-right of the image:

Magic Thumb - Integration Guide
Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide
<a href="big1.jpg" class="MagicThumb" id="buttons" data-options="buttons:bottom-right;"><img src="main1.jpg"/></a>
<a href="big1.jpg" data-thumb-id="buttons" data-image="main1.jpg"><img src="tiny1.jpg"/></a>
<a href="big2.jpg" data-thumb-id="buttons" data-image="main2.jpg"><img src="tiny2.jpg"/></a>
<a href="big3.jpg" data-thumb-id="buttons" data-image="main3.jpg"><img src="tiny3.jpg"/></a>
<a href="big4.jpg" data-thumb-id="buttons" data-image="main4.jpg"><img src="tiny4.jpg"/></a>
<a href="big5.jpg" data-thumb-id="buttons" data-image="main5.jpg"><img src="tiny5.jpg"/></a>
<a href="big6.jpg" data-thumb-id="buttons" data-image="main6.jpg"><img src="tiny6.jpg"/></a>

Multiple images

Switch between different images of the same product by creating 3 different size of each image - a small thumbnail, a main image and a large image. In the example below, each JPEG is sufficed with tiny, main or big (though any name can be used).

To swap between many image, add an id to the <a> tag, then use the data-thumb-id attribute to associate your images, for example:

Magic Thumb - Integration Guide
Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide
<a href="big1.jpg" class="MagicThumb" id="hello"><img src="main1.jpg"/></a>
<a href="big1.jpg" data-thumb-id="hello" data-image="main1.jpg"><img src="tiny1.jpg"/></a>
<a href="big2.jpg" data-thumb-id="hello" data-image="main2.jpg"><img src="tiny2.jpg"/></a>
<a href="big3.jpg" data-thumb-id="hello" data-image="main3.jpg"><img src="tiny3.jpg"/></a>
<a href="big4.jpg" data-thumb-id="hello" data-image="main4.jpg"><img src="tiny4.jpg"/></a>
<a href="big5.jpg" data-thumb-id="hello" data-image="main5.jpg"><img src="tiny5.jpg"/></a>
<a href="big6.jpg" data-thumb-id="hello" data-image="main6.jpg"><img src="tiny6.jpg"/></a>

You can swap the main image on hover instead of on click. Example:

Magic Thumb - Integration Guide
Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide
<a href="big1.jpg" class="MagicThumb" id="hello" data-options="selectorTrigger:hover;"><img src="main1.jpg"/></a>
<a href="big1.jpg" data-thumb-id="hello" data-image="main1.jpg"><img src="tiny1.jpg"/></a>
<a href="big2.jpg" data-thumb-id="hello" data-image="main2.jpg"><img src="tiny2.jpg"/></a>
<a href="big3.jpg" data-thumb-id="hello" data-image="main3.jpg"><img src="tiny3.jpg"/></a>
<a href="big4.jpg" data-thumb-id="hello" data-image="main4.jpg"><img src="tiny4.jpg"/></a>
<a href="big5.jpg" data-thumb-id="hello" data-image="main5.jpg"><img src="tiny5.jpg"/></a>
<a href="big6.jpg" data-thumb-id="hello" data-image="main6.jpg"><img src="tiny6.jpg"/></a>

Expand thumbnails

To save time, thumbnails can expand the large image straight away, instead of swapping the main image. To apply it, set the selectorEffect attribute to expand, for example:

Magic Thumb - Integration Guide
Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide
<a href="big1.jpg" class="MagicThumb" id="hello" data-options="selectorEffect: expand"><img src="main1.jpg"/></a>
<a href="big1.jpg" data-thumb-id="hello" data-image="main1.jpg"><img src="tiny1.jpg"/></a>
<a href="big2.jpg" data-thumb-id="hello" data-image="main2.jpg"><img src="tiny2.jpg"/></a>
<a href="big3.jpg" data-thumb-id="hello" data-image="main3.jpg"><img src="tiny3.jpg"/></a>
<a href="big4.jpg" data-thumb-id="hello" data-image="main4.jpg"><img src="tiny4.jpg"/></a>
<a href="big5.jpg" data-thumb-id="hello" data-image="main5.jpg"><img src="tiny5.jpg"/></a>
<a href="big6.jpg" data-thumb-id="hello" data-image="main6.jpg"><img src="tiny6.jpg"/></a>

Speed

Define how long the enlarge effect takes to open using expandSpeed. Once in the enlarged view you can choose how long it takes images to switch using gallerySpeed.

The speed is calculated in milliseconds, from 0 (fast) to 10000 (slow), e.g.:

Magic Thumb - Integration Guide
Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide
<a href="big1.jpg" class="MagicThumb" id="hello" data-options="expandSpeed:2000; gallerySpeed:2000"><img src="main1.jpg"/></a> 
<a href="big1.jpg" data-thumb-id="hello" data-image="main1.jpg"><img src="tiny1.jpg"/></a>
<a href="big2.jpg" data-thumb-id="hello" data-image="main2.jpg"><img src="tiny2.jpg"/></a>
<a href="big3.jpg" data-thumb-id="hello" data-image="main3.jpg"><img src="tiny3.jpg"/></a>
<a href="big4.jpg" data-thumb-id="hello" data-image="main4.jpg"><img src="tiny4.jpg"/></a>
<a href="big5.jpg" data-thumb-id="hello" data-image="main5.jpg"><img src="tiny5.jpg"/></a>
<a href="big6.jpg" data-thumb-id="hello" data-image="main6.jpg"><img src="tiny6.jpg"/></a>
<a href="big7.jpg" data-thumb-id="hello" data-image="main7.jpg"><img src="tiny7.jpg"/></a>

Size

If the enlarged image is taller or wider than the users' screen, it is automatically scaled down to fit the screen without scrolling.

Alternatively, you can show the original full size image by setting expandImageSize to original, for example:

Magic Thumb - Integration Guide
<a href="big.jpg" class="MagicThumb" data-options="expandImageSize:original"><img src="small.jpg"/></a>

Video

Magic Thumb is an excellent way to display videos as well as images. Display videos hosted on your website or on YouTube or Vimeo URL.

Example with YouTube and Vimeo:

Magic Thumb - Integration Guide
Magic Thumb - Integration Guide Magic Thumb - Integration Guide
<a href="big1.jpg" class="MagicThumb" id="hello"><img src="main1.jpg"/></a>
<a href="big1.jpg" data-thumb-id="hello" data-image="main1.jpg"><img src="tiny1.jpg"/></a>
<a href="big2.jpg" data-thumb-id="hello" data-image="main2.jpg"><img src="tiny2.jpg"/></a>
<a href="YOUTUBE-VIDEO-URL" data-thumb-id="hello"><img src="tiny4.jpg"/></a>
<a href="VIMEO-VIDEO-URL" data-thumb-id="hello"><img src="tiny5.jpg"/></a>

The example above uses image thumbnails for each video (tiny4.jpg and tiny5.jpg). If you cannot create thumbnails for your videos, you can automatically fetch tiny thumbnails based on the video URL. The example below uses 1 image and 2 videos:

<a href="big1.jpg" class="MagicThumb" id="hello"><img src="main1.jpg"/></a>
<a href="big1.jpg" data-thumb-id="hello" data-image="main1.jpg"><img src="tiny1.jpg"/></a>
<a href="https://www.youtube.com/watch?v=JUdNeFh2SDo" data-thumb-id="hello"></a>
<a href="https://vimeo.com/162826208" data-thumb-id="hello"></a>

Alternatively, you can display the video itself, which will open on click in Magic Thumb:

<a href="https://www.youtube.com/watch?v=JUdNeFh2SDo" class="MagicThumb"></a>

You can customize the lightbox with any of the usual Magic Thumb parameters. This Vimeo example has been customized to always show the hint text:

<a href="https://vimeo.com/162826208" data-options="hint:always;" class="MagicThumb"></a>

Custom videos

To show videos hosted on your own website or elsewhere, Magic Thumb supports these common video formats:

  • mp4 - a digital multimedia container format
  • ogv - a free lossy video compression format
  • flv - a flash video container file format
  • 3gp - a multimedia container format
  • webm - an open media file format

To enlarge a video in Magic Thumb, add the video URL as a link, for example:

<a href="your-video-url.mp4" class="MagicThumb"></a>
The most widely used format is mp4. However, there is no single video format supported by all browsers, so it is recommended to provide a second video in a fallback format. Do this by adding the extra-formats option and inside it, place the either video.ogv, video.flv, video.3gp or video.webm according to the fallback format you have. The code below uses mp4 as the primary format and flv as the fallback in case mp4 isn't supported:

<a href="your-video-url.mp4" extra-formats="video.flv" class="MagicThumb"></a> 

Group images

Images which are spread around a web page can be combined to appear in the same enlarged view. This is achieved using group parameter, for example these images are all using 1 to group them together:

<a href="big1.jpg" class="MagicThumb" data-options="group: 1"><img src="small1.jpg"/></a>
<a href="big2.jpg" class="MagicThumb" data-options="group: 1"><img src="small2.jpg"/></a>
<a href="big3.jpg" class="MagicThumb" data-options="group: 1"><img src="small3.jpg"/></a>
<a href="big4.jpg" class="MagicThumb" data-options="group: 1"><img src="small4.jpg"/></a>
<a href="big5.jpg" class="MagicThumb" data-options="group: 1"><img src="small5.jpg"/></a>
<a href="big6.jpg" class="MagicThumb" data-options="group: 1"><img src="small6.jpg"/></a>

But if different images relate to specific subjects, you can choose which images are shown in the enlarged view. As long as the group name is the same, the images will be grouped together, for example:

<a href="big1.jpg" class="MagicThumb" data-options="group: 1"><img src="small1.jpg"/></a>
<a href="big2.jpg" class="MagicThumb" data-options="group: 1"><img src="small2.jpg"/></a>

<a href="big3.jpg" class="MagicThumb" data-options="group: 2"><img src="small3.jpg"/></a>
<a href="big4.jpg" class="MagicThumb" data-options="group: 2"><img src="small4.jpg"/></a>

<a href="big5.jpg" class="MagicThumb" data-options="group: 3"><img src="small5.jpg"/></a>
<a href="big6.jpg" class="MagicThumb" data-options="group: 3"><img src="small6.jpg"/></a>

Hint

A text hint "Click to expand" is displayed on the image to indicate that it is zoomable. On mobiles, the text is "tap to expand".

The hint appears on load, then hides once the user first interacts with the image. You can configure the hint to always appear on the image by setting the hint option to always. To remove the hint, set the hint parameter to off.

Click the toggle to test the three options:

<a href="big.jpg" class="MagicThumb" data-options="hint: once"><img src="small.jpg"></a>

The text of the hint can be changed with the textHint option. This is useful to change the language or if the enlarge effect has been changed to activate on hover instead of on click. For example:

Magic Thumb - Integration Guide
<a href="big.jpg" class="MagicThumb" data-options="expandTrigger:hover; hint: always; textHint: Hover to enlarge"><img src="small.jpg"></a>

Link to URL

Normally, clicking the enlarged image will close it.

Instead, the enlarged image can link to another page by applying the link parameter, for example:

Magic Thumb - Integration Guide
<a href="big.jpg" class="MagicThumb" data-options="link:http://www.example.com;"><img src="small.jpg"/></a>

The link can open in the current window, a new window or a frame. This link opens in a new window:

Magic Thumb - Integration Guide
<a href="big.jpg" class="MagicThumb" data-options="link:http://www.example.com; linkTarget:_blank;"><img src="small.jpg"/></a>

Lazy load

For the fastest user experience, Magic Thumb preloads the large image during page load so that it is instantly ready to view if the user clicks to enlarge it.

Instead, you can configure the large image to load on demand (lazy-loading) with the lazyLoad: true option. The large image will be downloaded when the user clicks to expand it.

The lazy loading code looks like this:

<a href="big.jpg" class="MagicThumb" data-options="lazyLoad: true"><img src="small.jpg"></a>

Autostart

Magic Thumb starts automatically during page load. Alternatively, you can start it manually by setting the autostart parameter to false, like so:

<a href="big.jpg" class="MagicThumb" data-options="autostart: false"><img src="small.jpg"></a>

API

Control Magic Thumb exactly how you want with these 14 JavaScript calls:

  • MagicThumb.start(); - enable all Magic Thumb images on the page.
  • MagicThumb.start('id'); - enable a particular image by calling its id (in the <a> tag).
  • MagicThumb.stop(); - stop all images on the page.
  • MagicThumb.stop('id'); - stop a particular image by calling its id (in the <a> tag).
  • MagicThumb.refresh(); - reload all Magic Thumb images on the page.
  • MagicThumb.refresh('id'); - reload a particular image by calling its id (in the <a> tag).
  • MagicThumb.expand('id'); - expand a particular image by calling its id (in the <a> tag).
  • MagicThumb.close('id'); - restore a particular image by calling its id (in the <a> tag).
  • MagicThumb.next('id'); - switch to next image by calling its id (in the <a> tag).
  • MagicThumb.prev('id'); - switch to previous image by calling its id (in the <a> tag).
  • MagicThumb.switchTo('id', selector); - Switch to a particular image by calling its id and selector. selector refers to either the selectors DOM element or its index number (index number starts from 0).
  • MagicThumb.isReady('id'); - returns true if Magic Thumb can use API methods by calling its id (in the <a> tag).
  • MagicThumb.isLoad('id'); - returns true if Magic Thumb loaded images by calling its id (in the <a> tag).
  • MagicThumb.update(node, large-image-url, small-image-url); - update particular Magic Thumb by calling its id (in the <a> tag).

Example:

Magic Thumb - Integration Guide
Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide
<script type="text/javascript">
MagicThumb.expand('id-of-your-choice');
</script>

<a href="big.jpg" class="MagicThumb" id="id-of-your-choice"><img src="small.jpg"/></a>

Or:

<script type="text/javascript">
MagicThumb.expand(document.getElementById('id-of-your-choice'));
</script>

<a href="big.jpg" class="MagicThumb" id="id-of-your-choice"><img src="small.jpg"/></a>

Callbacks

  • onReady: function({ group: "thumb_id" }) {} - triggers when a Magic Thumb instance with a particular id (in its <a> tag) is ready to operate.
  • onLoad: function({ group: "thumb_id" }) {} - triggers when a Magic Thumb instance with a particular id (in its <a> tag) is ready to operate and images have downloaded.
  • onSwap: function({ group: "thumb_id" }) {} - triggers when images are swapped in a Magic Thumb instance with a particular id (in its <a> tag).
  • onExpandSwap: function({ group: "thumb_id" }) {} - triggers when a images are swapped in the expanded view of a Magic Thumb instance with a particular id (in its <a> tag).
  • onUpdate: function({ group: "thumb_id" }) {} - triggers when images are changed in a Magic Thumb instance with a particular id (in its <a> tag).
  • onExpand: function({ group: "thumb_id", itemId: "id_of_selector" }) {} - triggers when an image is expanded in a Magic Thumb instance with a particular id (in its <a> tag).
  • onClose: function({ group: "thumb_id", itemId: "id_of_selector" }) {} - triggers when an expanded image is closed in a Magic Thumb instance with a particular id (in its <a> tag).

Keyboard navigation

Magic Thumb can be controlled with these key strokes:

  • Left arrow - previous image
  • Right arrow - next image
  • Escape - close

You can disable keyboard shortcuts like so:

<a href="big.jpg" class="MagicThumb" data-options="keyboard:false;"><img src="small.jpg"/></a>

Enlarge your slideshow

You can add enlarge effects to each image in a slideshow by combining Magic Thumb with Magic Slideshow.

Update your file references before your </head> tag. For example:

<link href="magicthumb/magicthumb.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="magicthumb/magicthumb.js" type="text/javascript"></script>

<link href="magicslideshow/magicslideshow.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>

<style type="text/css">.mss-slide div { text-align:center; }</style>

Place the following code in the <body> tag of your web page. The example below uses thumbnails:

<div class="MagicSlideshow" data-options="autoplay: false; selectors: bottom; selectors-style: thumbnails;" id="thumb-slideshow">
	<a href="big1.jpg" class="MagicThumb" data-options="group:slideshow-thumbnails;" data-thumb-image="tiny1.jpg"><img src="small1.jpg"/></a>
	<a href="big2.jpg" class="MagicThumb" data-options="group:slideshow-thumbnails;" data-thumb-image="tiny2.jpg"><img src="small2.jpg"/></a>
	<a href="big3.jpg" class="MagicThumb" data-options="group:slideshow-thumbnails;" data-thumb-image="tiny3.jpg"><img src="small3.jpg"/></a>
	<a href="big4.jpg" class="MagicThumb" data-options="group:slideshow-thumbnails;" data-thumb-image="tiny4.jpg"><img src="small4.jpg"/></a>
</div>

Your slideshow will look like this:

Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide

If you prefer to use bullets instead of thumbnails, please use this code in your <body> tag:

<div class="MagicSlideshow" data-options="autoplay: false; selectors: bottom; selectors-style: bullets;" id="bullet-slideshow">
	<a href="big1.jpg" class="MagicThumb" data-options="group:slideshow-bullets;"><img src="small1.jpg"/></a>
	<a href="big2.jpg" class="MagicThumb" data-options="group:slideshow-bullets;"><img src="small2.jpg"/></a>
	<a href="big3.jpg" class="MagicThumb" data-options="group:slideshow-bullets;"><img src="small3.jpg"/></a>
	<a href="big4.jpg" class="MagicThumb" data-options="group:slideshow-bullets;"><img src="small4.jpg"/></a>
</div>
Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide Magic Thumb - Integration Guide

Parameters

Below is the complete list Magic Thumb parameters. You can apply parameters via the data-options attribute, with multiple parameters separated by a semi-colon, for example:

<a href="big.jpg" class="MagicThumb" data-options="expandSpeed:1500; expandEffect:fade"><img src="small.jpg"></a>

Alternatively, you may also apply parameters via the MagicThumbOptions variable, for example:

<script>
var MagicThumbOptions = {
    expandSpeed:'1500',
    expandEffect:'fade'
};
</script>
Parameters for Magic Thumb
Parameter Default Options Description
Effect
expandSpeed 350 0-10000 (milliseconds) Duration when enlarging image.
expandEffect expand expand / fade Effect while expanding image.
expandEasing cubic-bezier(.12,1.32,.57,1.54) string CSS3 Animation Easing. See cubic-bezier.com.
expandTrigger click click / hover How to trigger enlarge effect.
selectorEffect switch switch / expand Effect to use when switching between thumbnail images.
selectorTrigger click click / hover Method to switch between thumbnail images.
gallerySpeed 250 0-10000 (milliseconds) Speed images take to switch in enlarge view.
Positioning
expandImageSize fit-screen fit-screen / original Size of expanded view.
expandAlign screen screen / image Align expanded image relative to screen or small image.
Caption
captionSource title title / alt / span Source of caption text.
captionPosition bottom bottom / right / off Where to position caption.
Buttons
buttons auto auto / top-left / top-right / bottom-left / bottom-right / off Where to position buttons.
textBtnClose Close string Text label that appears on mouse over the "close" button.
textBtnNext Next string Text label that appears on mouse over the "next" button arrow.
textBtnPrev Previous string Text label that appears on mouse over the "previous" button arrow.
Miscellaneous
loop true true / false Rewind to the first item after the last or stop at the last item.
textClickHint Click to expand string Hint that shows when thumb mode activated, or in inactive state if thumb mode is disabled.
textHoverHint Hover to expand string Hint that shows when thumb mode activated, or in inactive state if thumb mode is disabled (when expandTrigger is set to hover).
hint once once / always / off How to show hint.
keyboard true true / false Ability to use keyboard shortcuts.
rightClick true true / false Whether to allow context menu on right click.
group string Group images into gallery.
cssClass string Extra CSS class applied to lightbox.
link string Link enlarged image to a URL.
linkTarget _self _self / _blank Open link in browser window/frame.
lazyLoad false true / false Whether to load large image on demand.
autostart true true / false Whether to start Magic Thumb on image automatically on page load or manually.

Mobile options

For mobile devices (smartphones in particular), global parameters can be overwritten either with the MagicThumbMobileOptions variable:

<script>
var MagicThumbMobileOptions = {
  expandEffect:'fade'
};
</script>

or locally via the data-mobile-options attribute:

<a href="big.jpg" class="MagicThumb" data-mobile-options="expandEffect: fade;"><img src="small.jpg"></a>
Parameters for Magic Thumb
Parameter Default Options Description
textClickHint Tap to expand string Hint that shows when thumb mode activated, or in inactive state if thumb mode is disabled.
slideMobileEffect rotate rotate / straight Effect images use to switch in enlarge view for mobile devices.
Need more help? Send a message to our friendly tech support team. We reply to every email within a few hours (Mon-Fri).