Merge pull request #172 from mankittens/master
Improvement to .post-content .full-img
This commit is contained in:
commit
7af816a48e
|
@ -1052,8 +1052,9 @@ body:not(.post-template) .post-title {
|
|||
border: none;
|
||||
}
|
||||
|
||||
/* Stop .full-img from creating horizontal scroll - slight hack due to
|
||||
imperfections with browser width % calculations and rounding */
|
||||
/* Stop elements, such as img wider than the post content, from
|
||||
creating horizontal scroll - slight hack due to imperfections
|
||||
with browser width % calculations and rounding */
|
||||
.post-template .content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
@ -1070,21 +1071,21 @@ body:not(.post-template) .post-title {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Keep images centred and within the bounds of the post-width */
|
||||
/* Keep images centered, and allow images wider than the main
|
||||
text column to break out. */
|
||||
.post-content img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-width: 126%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
padding: 0.6em 0;
|
||||
}
|
||||
|
||||
/* Break out larger images to be wider than the main text column
|
||||
the class is applied with jQuery */
|
||||
.post-content .full-img {
|
||||
width: 126%;
|
||||
max-width: none;
|
||||
margin: 0 -13%;
|
||||
/* Centers an image by (1) pushing its left edge to the
|
||||
center of its container and (2) shifting the entire image
|
||||
in the opposite direction by half its own width.
|
||||
Works for images that are larger than their containers. */
|
||||
position: relative;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%); /* for Safari and iOS */
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* The author credit area after the post */
|
||||
|
@ -1737,12 +1738,7 @@ body:not(.post-template) .post-title {
|
|||
|
||||
.post-content img {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post-content .full-img {
|
||||
width: auto;
|
||||
width: calc(100% + 32px); /* expand with to image + margins */
|
||||
margin: 0 -16px; /* get rid of margins */
|
||||
min-width: 0;
|
||||
max-width: 112%; /* fallback when calc doesn't work */
|
||||
}
|
||||
|
|
|
@ -3,60 +3,16 @@
|
|||
*/
|
||||
|
||||
/* globals jQuery, document */
|
||||
(function ($, sr, undefined) {
|
||||
(function ($, undefined) {
|
||||
"use strict";
|
||||
|
||||
var $document = $(document),
|
||||
|
||||
// debouncing function from John Hann
|
||||
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
|
||||
debounce = function (func, threshold, execAsap) {
|
||||
var timeout;
|
||||
|
||||
return function debounced () {
|
||||
var obj = this, args = arguments;
|
||||
function delayed () {
|
||||
if (!execAsap) {
|
||||
func.apply(obj, args);
|
||||
}
|
||||
timeout = null;
|
||||
}
|
||||
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
} else if (execAsap) {
|
||||
func.apply(obj, args);
|
||||
}
|
||||
|
||||
timeout = setTimeout(delayed, threshold || 100);
|
||||
};
|
||||
};
|
||||
var $document = $(document);
|
||||
|
||||
$document.ready(function () {
|
||||
|
||||
var $postContent = $(".post-content");
|
||||
$postContent.fitVids();
|
||||
|
||||
function updateImageWidth() {
|
||||
var $this = $(this),
|
||||
contentWidth = $postContent.outerWidth(), // Width of the content
|
||||
imageWidth = this.naturalWidth; // Original image resolution
|
||||
|
||||
if (imageWidth >= contentWidth) {
|
||||
$this.addClass('full-img');
|
||||
} else {
|
||||
$this.removeClass('full-img');
|
||||
}
|
||||
}
|
||||
|
||||
var $img = $("img").on('load', updateImageWidth);
|
||||
function casperFullImg() {
|
||||
$img.each(updateImageWidth);
|
||||
}
|
||||
|
||||
casperFullImg();
|
||||
$(window).smartresize(casperFullImg);
|
||||
|
||||
$(".scroll-down").arctic_scroll();
|
||||
|
||||
$(".menu-button, .nav-cover, .nav-close").on("click", function(e){
|
||||
|
@ -66,9 +22,6 @@
|
|||
|
||||
});
|
||||
|
||||
// smartresize
|
||||
jQuery.fn[sr] = function(fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
|
||||
|
||||
// Arctic Scroll by Paul Adam Davis
|
||||
// https://github.com/PaulAdamDavis/Arctic-Scroll
|
||||
$.fn.arctic_scroll = function (options) {
|
||||
|
@ -100,4 +53,4 @@
|
|||
});
|
||||
|
||||
};
|
||||
})(jQuery, 'smartresize');
|
||||
})(jQuery);
|
||||
|
|
Loading…
Reference in New Issue