Categories:

Home / Free JavaScripts / Images & Music / Here

Cut & Paste Plus Size image viewer

Credit: JavaScript Kit

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


JavaScript Tools:
Site Info

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.