An easy way to show an image into place holder / target box

Show In Place Holder 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.


Plug-in Options

How to Setup?

  1. Insert the jQuery elements in your document's <head> section, e.g.: Add jQuery library to HTML page
  2. Insert the Plug-in CSS in your document's <style> section

    <link href="css/show-in-ph-style.css" rel="stylesheet" type="text/css" />
  3. Insert the Plug-in JS in your document's <script> section

    <script src="js/jquery.showInPlaceHolder.min.js" type="text/javascript" language="javascript"></script>
  4. 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


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


  • 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

About Plug-in

"hoverOver" plug-in is useful for showing content on image or text blocks to show short information related to product, image etc. Plug-in provides various animation effects to show content. Plug-in can be used in...

  • To show content on hover over image/text
  • To show zoom-in/info icon on image
  • To show CTA buttons on hover over overlay
  • To show title text in over lay and slide up on hover over

Purchase plug-in   l   View Demo