Magic Thumb™

Examples

Initialize on click

Buy now  £25 Get support

Fetch the large image from the server only when the user clicks.

This demo is not obvious because the image is already within the zip file. Try it [a href="http://www.magictoolbox.com/magicthumb_examples/"]here on our website[/a] to see a better example.

Normally, the large image is automatically fetched after everything else has downloaded. The means it is ready instantly if the user requests it. If you use initialize on click, it will reduce your bandwidth but the user experience is not as good.

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Initialize on click</title>
  4.        
  5.         <!-- link to magicthumb.css file -->
  6.         <link href="magicthumb/magicthumb.css" rel="stylesheet" type="text/css" media="screen"/>
  7.         <!-- link to magicthumb.js file -->
  8.         <script src="magicthumb/magicthumb.js" type="text/javascript"></script>
  9.        
  10.     </head>
  11.     <body>
  12.        
  13.             <h4>Fetch the large image from the server only when the user clicks.</h4>
  14.             <p>
  15.                  <!-- define Magic Thumb which is initializing after user click on the image -->
  16.                 <a href="images/nano_large.jpg" class="MagicThumb" rel="click-to-initialize: true"><img src="images/nano_small.jpg" alt=""/><span>This demo is not obvious because the image is already within the zip file. Try it [a href="http://www.magictoolbox.com/magicthumb_examples/"]here on our website[/a] to see a better example.</span></a>
  17.             </p>
  18.             <p>Normally, the large image is automatically fetched after everything else has downloaded. The means it is ready instantly if the user requests it. If you use initialize on click, it will reduce your bandwidth but the user experience is not as good.</p>
  19.        
  20.     </body>
  21. </html>