showInPlaceHolder - The jQuery Plug-in

About Plug-in

Show in Place Holder plug-in is developed to show an image to place holder / target box. Plug-in can be used to showcase image portfolios, product images, software screenshots or any dam thing that you want to display to place holder / target box by clicking / hovering image thumbs or anchor links.

Plug-in provides facility to apply more than 20 animation effects to show image to place holder / target box. You can also add description text of an image.

Go through plug-in options, examples, features to get more idea how it can be useful for your requirement.

Also don’t forget to go through other awesome jQuery plug-ins I have posted on codecanyon.

Documentation

Plug-in Options

How to Setup?

Insert the jQuery elements in your document's <head> section, e.g.: Add jQuery library to HTML page

Insert the Plug-in CSS in your document's <style> section

<link href="css/show-in-ph-style.css" rel="stylesheet" type="text/css" />

Insert the Plug-in JS in your document's <script> section

<script src="js/jquery.showInPlaceHolder.min.js" type="text/javascript" language="javascript"></script>

Define plug-in options for showInPlaceHolder. e.g. content, eventType, placeHolderId, fitToPlaceHolder, imgTransition: 'fade', aniDuration: 500

$.fn.showInPlaceHolder.defaults = {
    content: '',
    eventType: 'hover',                           // hover/click
    placeHolderId: 'placeholder-box',       // Place holder id
    fitToPlaceHolder: true,                     // Fit image in placeholder box
    imgTransition: 'fade',                        // Image transition - none, fade, slideLeft, slideRight, slideTop, slideBottom
    aniDuration: 500                             // Animation duration
};

Examples

Demo 1 [eventType:'hover', imgTransition:'fade', fitToPlaceHolder: true]

Demo 2 [On each thumb different event type]

You can also set event Click, I am applied eventType: 'click'.
You can even have long text with scrollbar, you can be set through CSS. See this description text is too long, you can gothroug image content text by scrolling text.

Plug-in Features

Features

Show in place holder plug-in can be defined on image thumb, anchonr link or any HTML tag
You can define content text either in "content" option of plug-in initialization or define data-content='#contentID' and define content inside <div id="contentID">Content Goes Here</div>
20 different animation styles
4 styles for show content e.g. fly, curtain, fade, tocenter/fromcenter

Note: To make a faster load you should resize image dimentions as per place holder / target box

Other Plug-ins

addDot - The jQuery Plug-in for Adding Hot Spots

About Plug-in

"addDot" plug-in is useful for adding a hot spot to show short description about specific portion of an image. User can also add thumb image in the description. Plug-in can be used in various industries like.

Real Estate - Building Image (Can show which floor has what facility)
Automotive - Tow/Four Wheeler (Short info about part of vehicle)
Medical Domain – Human Body (Describing various products that company have for specific part of human body)
Education – Human Anatomy
Factory Machinery – CNC Machines (Explaining which part does what when final product is out)

Purchase plug-in l View Demo

hoverOver - jQuery Plugin for Adding Hover Content