1
0
mirror of https://github.com/ViViDboarder/Vivid-Casper.git synced 2025-01-08 20:07:39 +00:00

Removed references to .full-img, debounce, and smartresize, and replaced with pure CSS

issue 
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:
Matthew Guy 2015-02-18 23:46:35 -05:00
parent b064e9fc87
commit a5dcaf6cd5
2 changed files with 17 additions and 68 deletions

View File

@ -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 */
} }

View File

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