Removed references to .full-img, debounce, and smartresize, and replaced with pure CSS
issue #172 New code will center all post images and allow them to extend beyond the main text column. No JavaScript or special classes required.
This commit is contained in:
parent
b064e9fc87
commit
a5dcaf6cd5
|
@ -858,8 +858,9 @@ body:not(.post-template) .post-title {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Stop .full-img from creating horizontal scroll - slight hack due to
|
/* Stop elements, such as img wider than the post content, from
|
||||||
imperfections with browser width % calculations and rounding */
|
creating horizontal scroll - slight hack due to imperfections
|
||||||
|
with browser width % calculations and rounding */
|
||||||
.post-template .content {
|
.post-template .content {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
@ -876,21 +877,21 @@ body:not(.post-template) .post-title {
|
||||||
display: none;
|
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 {
|
.post-content img {
|
||||||
display: block;
|
display: block;
|
||||||
max-width: 100%;
|
max-width: 126%;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0.6em 0;
|
padding: 0.6em 0;
|
||||||
}
|
/* Centers an image by (1) pushing its left edge to the
|
||||||
|
center of its container and (2) shifting the entire image
|
||||||
/* Break out larger images to be wider than the main text column
|
in the opposite direction by half its own width.
|
||||||
the class is applied with jQuery */
|
Works for images that are larger than their containers. */
|
||||||
.post-content .full-img {
|
position: relative;
|
||||||
width: 126%;
|
left: 50%;
|
||||||
max-width: none;
|
-webkit-transform: translateX(-50%); /* for Safari and iOS */
|
||||||
margin: 0 -13%;
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The author credit area after the post */
|
/* The author credit area after the post */
|
||||||
|
@ -1622,12 +1623,7 @@ body:not(.post-template) .post-title {
|
||||||
|
|
||||||
.post-content img {
|
.post-content img {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.post-content .full-img {
|
|
||||||
width: auto;
|
|
||||||
width: calc(100% + 32px); /* expand with to image + margins */
|
width: calc(100% + 32px); /* expand with to image + margins */
|
||||||
margin: 0 -16px; /* get rid of margins */
|
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
max-width: 112%; /* fallback when calc doesn't work */
|
max-width: 112%; /* fallback when calc doesn't work */
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,67 +3,20 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* globals jQuery, document */
|
/* globals jQuery, document */
|
||||||
(function ($, sr, undefined) {
|
(function ($, undefined) {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
var $document = $(document),
|
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);
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
$document.ready(function () {
|
$document.ready(function () {
|
||||||
|
|
||||||
var $postContent = $(".post-content");
|
var $postContent = $(".post-content");
|
||||||
$postContent.fitVids();
|
$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();
|
$(".scroll-down").arctic_scroll();
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// smartresize
|
|
||||||
jQuery.fn[sr] = function(fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
|
|
||||||
|
|
||||||
// Arctic Scroll by Paul Adam Davis
|
// Arctic Scroll by Paul Adam Davis
|
||||||
// https://github.com/PaulAdamDavis/Arctic-Scroll
|
// https://github.com/PaulAdamDavis/Arctic-Scroll
|
||||||
$.fn.arctic_scroll = function (options) {
|
$.fn.arctic_scroll = function (options) {
|
||||||
|
@ -95,4 +48,4 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
};
|
};
|
||||||
})(jQuery, 'smartresize');
|
})(jQuery);
|
||||||
|
|
Loading…
Reference in New Issue