Present 'Em

Present 'Em is a simple jQuery plugin which basically initiates an image viewer within the browser with much less fuss. Hence, you just present 'em 😎

Features

• Light and flexible
• Intuitive gallery
• Adjustable frame
• Preloader for images
• Ways to initiate : many!
• Ways to kill : 3 ('X' button at top right, 'Esc' key on keyboard, clicking anywhere outside frame)

Options

• fHeight sets frame height (in pixels)
• fWidth sets frame width (in pixels)

What you need

• jQuery (as of now 😉)
• Images to be presented in gallery.
• Thumbnail images.

How to use

• Include the jquery.presentem.js file after icluding jQuery.
• Include the jquery.presentem.css stylesheet in head.
• Add a data-hqimg attribute in every one of your thumbnail img tag containing the relative path of corresponding larger image.
• Call presentem() by attaching it to the thumbnail images selector.

Example (Conservative approach) :

HTML

<div id="thumbs">
    <img src="imgs/thumbs/thumb_01.jpg" data-hqimg="hq_imgs/hq_img_01.jpg">
    <img src="imgs/thumbs/thumb_02.jpg" data-hqimg="hq_imgs/hq_img_02.jpg">
    <img src="imgs/thumbs/thumb_03.jpg" data-hqimg="hq_imgs/hq_img_03.jpg">
    <img src="imgs/thumbs/thumb_04.jpg" data-hqimg="hq_imgs/hq_img_04.jpg">
</div>

JavaScript :

$("div#thumbs img").click(function(){
    $("div#thumbs img").presentem();
})

Example (Free-thinker approach):

HTML

<section>
    <img src="imgs/thumbs/thumb_01.jpg" data-hqimg="hq_imgs/hq_img_01.jpg" class="view">
</section>
<section>
    <img src="imgs/thumbs/thumb_02.jpg" data-hqimg="hq_imgs/hq_img_02.jpg" class="view">
</section>
<section>
    <img src="imgs/thumbs/thumb_03.jpg" data-hqimg="hq_imgs/hq_img_03.jpg" class="view">
</section>
<section>
    <img src="imgs/thumbs/thumb_04.jpg" data-hqimg="hq_imgs/hq_img_04.jpg" class="view">
</section>

Javascript :

$(window).load(function(){
    $(".view").presentem({fHeight:400, fWidth:600});
})

Live Demo

Get a peek of Present 'Em at this demo.

License