(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.

Expand - large image will enlarge from your base image.

Fade - large image will appear smoothly without enlarging.

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

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

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:

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:

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:

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:

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:

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.

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).