"Smart Image Preview :: Limit Preview Image - Scroll Down Hover - Show Fullscreen"
Bootstrap 3.3.0 Snippet by NathanAdhitya

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2>Smart Image Preview :: Limit Preview Image - Scroll Down Hover - Show Fullscreen</h2> <div class="thread-parent"> <p>Proactively whiteboard intermandated intellectual capital via just in time supply chains. Dynamically productize excellent quality vectors rather than distributed data. Conveniently benchmark extensive content through client-centric methods of empowerment. Progressively repurpose interdependent expertise whereas emerging process improvements. Competently redefine highly efficient expertise through empowered e-commerce.</p> <img src="http://i.imgur.com/u6NNIP6.jpg"> <p>Completely myocardinate multimedia based total linkage for value-added experiences. Conveniently extend standardized scenarios rather than synergistic initiatives. Completely syndicate market-driven e-business rather than extensible markets. Assertively harness stand-alone web-readiness vis-a-vis plug-and-play testing procedures. Credibly foster enterprise-wide alignments through strategic applications.</p> <img src="http://i.imgur.com/6Df0zT4.jpg"> <p>Synergistically utilize just in time networks without turnkey vortals. Holisticly simplify sticky models vis-a-vis team building markets. Interactively actualize covalent collaboration and idea-sharing and intermandated collaboration and idea-sharing. Holisticly customize installed base mindshare with client-centered interfaces. Seamlessly target tactical infomediaries whereas value-added e-commerce.</p> <img src="http://i.imgur.com/xNbkboD.jpg"> <p>Energistically brand superior experiences whereas scalable supply chains. Assertively restore best-of-breed quality vectors without.</p> <img src="http://i.imgur.com/lOqi4O6.jpg"> <p>Compellingly productivate high-quality best practices with 2.0 mindshare. Compellingly create world-class web services with top-line collaboration and idea-sharing. Progressively target proactive innovation via market-driven e-services. Collaboratively enable bleeding-edge methodologies before extensible potentialities. Conveniently implement client-centered functionalities before enabled "outside the box" thinking.</p> </div> </div>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin); body{ font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-size:14px; line-height:1.4285em; color: rgba(0,0,0,.87); } .thread-parent img { max-width: 100%; } /* Limited Images */ .limited-parent-image { cursor: pointer; position: relative; max-height: 200px; overflow: hidden; -moz-transition: max-height .5s; -webkit-transition: max-height .5s; -o-transition: max-height .5s; -ms-transition: max-height .5s; transition: max-height .5s; } .limited-parent-image:hover { max-height: 1000px; height: 100%; } .limited-expand { background: rgba(0, 0, 0, 0.13); position: absolute; cursor: pointer; padding: 5px; color: #fff; right: 0; top: 0; } .limited-modal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; /*overflow: hidden;*/ padding-top: 25px; padding-bottom: 25px; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); } /* Modal Content (image) */ .limited-modal-content-image { margin: auto; display: block; } /* Add Animation */ .limited-modal-content-image { max-height:100%; max-width:100%; -webkit-animation-name: limited_zoom; -webkit-animation-duration: 0.6s; animation-name: limited_zoom; animation-duration: 0.6s; } @-webkit-keyframes limited_zoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes limited_zoom { from {transform: scale(0.1)} to {transform: scale(1)} } /* The Close Button */ .limited-close-modal { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .limited-close-modal:hover, .limited-close-modal:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .limited-modal-content-image { width: 100%; } }
var limitImagesPreview = function(selector) { const max_height = 200; // maximum height of images. var limited_image = '<div class="limited-parent-image"></div>'; var limited_description = '<span class="limited-expand">'+ '<i class="glyphicon glyphicon-resize-full"></i>'+ '</span>'; var limited_modal = '<div class="limited-modal">'+ ' <span class="limited-close-modal">×</span>'+ ' <img class="limited-modal-content-image">'+ '</div>'; $(selector).each(function(i, block){ var images = $(block).find('img'); for (var i = 0; i < images.length; i++) { var image = $(images[i]); image.addClass('limited-origin-image'); if ((image.height() > max_height) || (image.get(0).height > max_height) || (image.get(0).naturalHeight > max_height)) { image.wrap(limited_image); image.closest('.limited-parent-image').append(limited_description); image.closest('.limited-parent-image').after(limited_modal); }else { // this condition if image isn't loaded with complete image.load(function(){ if(this.height > max_height) { image.wrap(limited_image); image.closest('.limited-parent-image').append(limited_description); image.closest('.limited-parent-image').after(limited_modal); } }); } }//end for }); }; // Click to Expand the image. $(document).on('click', '.limited-parent-image', function() { var nextElement = $(this).next().attr({'style':'display:block'}); nextElement.find('.limited-modal-content-image').attr({ 'src': $(this).find('.limited-origin-image').attr('src'), 'alt': $(this).find('.limited-origin-image').attr('alt') }); }); $(document).on('click', '.limited-close-modal', function() { $(this).closest('.limited-modal').attr({'style':'display:none'}); }); $(document).on('click', '.limited-modal', function() { $(this).get(0).style.display = 'none'; }); // EOF // Set parent div element limitImagesPreview('.thread-parent');

Related: See More


Questions / Comments: