jQuery-Inline-Popup

A jQuery Plugin to show content/image within an inline frame using a simplified jQuery code that enable users to expand preview as can be seen in Google Image.

Here the steps to configure...

Step 1 : Download and link to the Jquery plugin

Step 2 : Download and link to the Jquery inlinePopup plugin

Step 3 : Fire the jQuery inlinePopup Plugin

$(document).ready(function(){   $("#wrapper-container").inlinePopup({itemSelector : ".items"}) });

Plugin Options

• itemSelector
  Child class.Click event will be added to these child elements.(eg:".items")
• ipclass
  Inline popup wrapper element class.(Default : inlinepopup)
• ipcloseclass
  Inline popup close element class.(Default : inlinepopupClose)
• iparrowclass
  Inline popup arrow element class.(Default : inlinepopup_arrow)
• ipcontentwrapperclass
  Inline popup content wrapper element class.(Default : inlinepopup_content)
• detailsElem
  Class of the element which has preview/detailed content.(Default : ip-details)
• activeFirst
  Make first child as active element by default.(default : true)
• scrollToViewPort
  While showing the expanded preview.Automatically page will scroll to the inlinePopup section.(default : true)
• arrow
  Add arrow in inlinePopup.(default : true)
• scrollOffset
  If the page have sticky header.Add the header height.(default : 0)
• closeinnerelem
  Close inner/child elem or Close text.(default : <i class='fa fa-close'></i>)

Getting started

HTML

Include the inlinePopup .js file in your site.

<script src="/path/jquery-inline-popup.min.js"></script>

InlinePopup works on a container element with a group of similar child items.

<div id="wrapper-container">   <div class="items">     ...     <div class="ip-details">..       (detailed content/large image for preview )..     </div>   </div>   <div class="items">     ...     <div class="ip-details">..       (detailed content/large image for preview )..     </div>   </div>   ... </div>

CSS

All sizing of items is handled by your CSS.

#wrapper-container { position:relative; } .items { width:250px; height:250px; float:left; } .ip-details { display:none; } .inlinepopup {  width:100%; float:left; }

Initialize with jQuery

$("#ip-container").inlinePopup({   "itemSelector":".article",   "ipcloseclass":"inlinepopupClose",   "iparrowclass":"inlinepopup_arrow",   "ipcontentwrapperclass":"inlinepopup_content",   "closeinnerelem":"X" })