It's common practice on an image-heavy site to show a set of thumbnail images which link to a full-sized image that is displayed when the image is clicked, either inline in a modal pop up, or in a separate window. In this example we'll create a thumbnail image that scales to a full-sized version when clicked.
Add the following few elements to the
<body>element of the template file:<div id="container"> <img src="img/europa.jpg" alt="Europa"> </div>
The script we need is a little longer, but is still pretty simple. In the empty function at the end of the page, add the following code:
$("img").click(function() { var img = $(this); if(!img.hasClass("full")) { img.addClass("full").effect("scale", { percent: 400, scale: "box", origin: ['top','left'] }); } else { img.removeClass("full").effect("scale", { percent: 25, scale: "box", origin: ['top','left'] }); } });Save the...