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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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() {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Login and Register Modal
Image Crop jQuery
Creating password field text hide show via a single class
Hover Effect Style

Questions / Comments: