<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');
