Cut & Paste Plus Size image viewer
|
Description: Plus Size Image Viewer automatically adds a caption beneath the images of your choice that when clicked on launches a "plus size" version of the image. The enlarged image can be a different image from the original, so the former is loaded only on demand when requested. FYI, this script is inspired by a similar image viewer seen on some pages of WSJ.
Example:
Directions
Step 1: Add the following script to the <HEAD> section of your page:
It references two external files plus an image. Download them below (right click, and select "save as"):
Step 2: Then, add the below sample markup to your <BODY>:
To add a "plus size" caption to any image, insert the two attributes in red inside the image's IMG tag:
<img src="thumb.jpg" style="width:200px" data-plusimage="large.jpg" data-plussize="700,466" />
Where:
-
data-plusimage: The full URL or path to the enlarged image, such as http://mysite.com/large.jpg, or images/large.jpg.
-
data-plussize: The width and height of the enlarged image, in the format "w,h". Pixel is the assumed unit.
There are also some variables inside plusimageviewer.js you want to edit, most notably, the path to the "close" image on your server:
enlargeboxmarkup: '<div class="enlargebox"><div
class="title"><img src="closebox.gif" style="margin: 2px 1px 1px 0"
title="Hide Image" /></div><div class="largeimage"></div></div>',
captionoffset: [-5, -15], //additional offset of caption relative to bottom left
edge of image
fadeduration: [300, 100], //fade in and out duration, in milliseconds