Lightweight Grid View With Expanding Preview - Inline Popup
File Size: | 22.6 KB |
---|---|
Views Total: | 4122 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Inline Popup is a jQuery plugin for creating a responsive grid view that allows to displays more details in a popup-style expanding panel similar to the effect seen on Google Images.
How to use it:
1. Load both jQuery library and the jQuery inline popup plugin's script when needed.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery-inline-popup.min.js"></script>
2. Add custom content to the grid view following the markup structure like this:
<div id="ip-container"> <div class="article"> <h2>Grid 1</h2> <p>Description 1 [...]</p> <div class="ip-details"> <p>More Detais</p> </div> </div> <div class="article"> <h2>Grid 2</h2> <p>Description 2 [...]</p> <div class="ip-details"> <p>More Detais</p> </div> </div> <div class="article"> <h2>Grid 3</h2> <p>Description 3 [...]</p> <div class="ip-details"> <p>More Detais</p> </div> </div> ... </div>
3. The main CSS styles for the grid view.
#ip-container { position: relative; } .article { border: 1px solid #c2c2c2; color: #585858; width: 270px; height: 270px; float: left; background: #fff; margin-bottom: 15px; margin-right: 15px; padding: 15px; cursor: pointer; } .article > h2 { margin: 0 0 10px; font: 100 24px/125% "Source Sans Pro", sans-serif; color: #337ab7; } .article span { display: block; padding-bottom: 5px; } .article strong { color: #d7342f; }
4. Style the expanding preview with the following CSS snippets.
.ip-details { display: none; } .inlinepopup { background: #fff none repeat scroll 0 0; border: 1px solid #c2c2c2; float: left; width: 100%; margin-bottom: 15px; position: relative; } .inlinepopup_content { border-top: 5px solid #cc0a0a; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.5); padding: 20px; color: #585858; } .inlinepopup_arrow { background: url("images/arrow-top.png") no-repeat scroll center 0; height: 32px; position: absolute; top: -30px; width: 32px; } .inlinepopupClose { background: url("images/close.png") no-repeat scroll 0 0; cursor: pointer; height: 16px; position: absolute; right: 5px; text-indent: -9999px; top: 10px; width: 16px; z-index: 99; overflow: hidden; transition: all 0.5s ease 0s; } .inlinepopupClose:hover { transform: rotate(180deg); } .inlinepopup_content h2 { color: #585858; font: 100 26px/140% "Source Sans Pro", sans-serif; margin: 0; padding: 0 0 10px; } .inlinepopup_content ul, .inlinepopup_content ol { margin: 0 0 20px; padding: 0 0 0 20px; } .inlinepopup_content .img-middle img { margin: 5px auto; } .inlinepopup_content a.go-button { background: rgba(0, 0, 0, 0) url("images/arrow-right.png") no-repeat scroll right center / 18% auto; color: #585858; font: 600 18px/150% "Source Sans Pro", sans-serif; padding: 5px 30px 5px 0; }
5. Initialize the plugin with some options.
$("#ip-container").inlinePopup({ itemSelector : ".article", closeinnerelem:"X" })
6. All default options.
$("#ip-container").inlinePopup({ // CSS selector of grid item "itemSelector" : "", // default CSS classes "ipclass" : "inlinepopup", "ipcloseclass" : "inlinepopupClose", "iparrowclass" : "inlinepopup_arrow", "ipcontentwrapperclass" : "inlinepopup_content", "detailsElem" : "ip-details", // active the first item on page load "activeFirst" : true, // auto scroll the page to the active item "scrollToViewPort" : true, // shows indicator arrow "arrow" : true, // scroll offset in pixels "scrollOffset" : 0, // custom close icon "closeinnerelem" : "<i class='fa fa-close'></i>" })
Changelog:
2018-07-31
- device orientation & row count break issue fixes
2016-12-29
- bugs fixed.
This awesome jQuery plugin is developed by Position2. For more Advanced Usages, please check the demo page or visit the official website.