Stunning lightbox effect (that anyone can 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: (If you cannot access the head section of your page, reference the files elsewhere such as the main content of your page.) A basic HTML page could look like this: 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. <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). EffectChoose from two effects to enlarge the image.
The expand option is used by default. Change this to fade by adding the expandEffect parameter. Fade looks like this: <a href="big.jpg" class="MagicThumb" data-options="expandEffect:fade;"><img src="small.jpg" /></a> EasingYou 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. <a href="big.jpg" class="MagicThumb" data-options="expandEasing:cubic-bezier(.09,.63,0,.99);"><img src="small.jpg" /></a> TriggerChange your Magic Thumb to open on hover instead of on click. Set the expandTrigger option to hover: <a href="big.jpg" class="MagicThumb" data-options="expandTrigger:hover"><img src="small.jpg" /></a> ContentMagic Thumb works with HTML elements, so you can link to URLs, add captions and create text with links. Link to URL Normally, clicking the enlarged image will close it. Instead, the enlarged image can link to another page by applying the <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: <a href="big.jpg" class="MagicThumb" data-options="link:http://www.example.com; linkTarget:_blank;"><img src="small.jpg" /></a> CaptionAdd titles or detailed descriptions to your enlarged images. There are 3 ways to add text:
The image title tag is used by default. For example: <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: <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: BREATHABLE COMFORT, EFFORTLESS RIDEThe [a href="http://store.nike.com/us/en_us/pd/lunarepic-low-flyknit-2-mens-running-shoe/pid-11232563/pgid-11558949" rel="nofollow"]Nike LunarEpic Low Flyknit Men's Running Shoe[/a] is lightweight and breathable with targeted cushioning for a soft, effortless sensation underfoot.ULTRA-LIGHT SUPPORTA flexible, breathable Flyknit upper wraps your foot for a second-skin fit. Targeted areas provide lightweight support where you need it most.FLUID FEELThe soft, contoured Lunarlon midsole has precision-lasered cuts on the sides that collapse during footstrike, delivering a perfectly smooth transition from heel to toe.SUPERB SOFTNESSThe 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.STATS
FLYKNIT ORIGINSNike 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.<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-2-mens-running-shoe/pid-11232563/pgid-11558949" rel="nofollow"]Nike LunarEpic Low Flyknit Men's Running Shoe[/a] is lightweight and breathable with targeted cushioning for a soft, effortless sensation underfoot. <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. <form action="https://www.magictoolbox.com/magicthumb/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> Text with linksYou 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. CSSYou 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> <a href="big.jpg" class="MagicThumb" data-options="cssClass: yourname"><img src="small.jpg" /> </a> If you get stuck with CSS formatting, please contact us. ButtonsForward, 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: <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 imagesSwitch 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: <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: <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 thumbnailsTo 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: <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> SpeedDefine 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.: <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> SizeIf 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: <a href="big.jpg" class="MagicThumb" data-options="expandImageSize:original"><img src="small.jpg" /></a> Video lightboxMagic 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: <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=RLiG6Dj6wmI" 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=RLiG6Dj6wmI" 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 videosTo show videos hosted on your own website or elsewhere, Magic Thumb supports these common video formats:
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 <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 <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 <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> Enlarge your slideshowYou 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: <script src="magicthumb/magicthumb.js" type="text/javascript"></script> <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 and your slideshow will look like this. 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> 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> 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 <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 <a href="big.jpg" class="MagicThumb" data-options="expandTrigger:hover; hint: always; textHint: Hover to enlarge"><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 <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 <a href="big.jpg" class="MagicThumb" data-options="autostart: false"><img src="small.jpg" /></a> API & callbacksAPI methodsControl Magic Thumb exactly how you want with these 14 JavaScript calls:
Example: <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
Keyboard navigationMagic Thumb can be controlled with these key strokes:
You can disable keyboard shortcuts like so: <a href="big.jpg" class="MagicThumb" data-options="keyboard:false;"><img src="small.jpg" /></a> Parameters Below is the complete list Magic Thumb parameters. You can apply parameters via the <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 <script> var MagicThumbOptions = { expandSpeed:'1500', expandEffect:'fade' }; </script>Parameters for Magic Thumb
Mobile optionsFor mobile devices (smartphones in particular), global parameters can be overwritten either with the <script> var MagicThumbMobileOptions = { expandEffect:'fade' }; </script> or locally via the <a href="big.jpg" class="MagicThumb" data-mobile-options="expandEffect: fade;"><img src="small.jpg" /></a>Parameters for Magic Thumb
Need more help? Send a message to our friendly tech support team. We reply to every email within a few hours (Mon-Fri). How do I enlarge an image on click?Get the selector of the required image using . getElementById(selector).. Set the ratio by which the image needs to be enlarged using . style. ... . Animation effect can be added using . style. ... . When the function is called using the .. How do you click on an image in HTML?Steps:. Create <img> element in the HTML code.. Add style to <img> element and set display properties to none.. Create a JavaScript “show()” function that can access the image and change the display property to block.. Add button in HTML code which calls “show()” function when user clicks on it.. How do you enlarge HTML?In HTML, you can change the size of text with the <font> tag using the size attribute. The size attribute specifies how large a font will be displayed in either relative or absolute terms. Close the <font> tag with </font> to return to a normal text size.
How do I Auto size an image in HTML?Answer: Use the CSS max-width Property
You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
|