mirror of
https://github.com/ViViDboarder/Vivid-Casper.git
synced 2024-12-22 19:47:38 +00:00
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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@ -876,21 +877,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 */
|
||||
@ -1622,12 +1623,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,67 +3,20 @@
|
||||
*/
|
||||
|
||||
/* 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();
|
||||
|
||||
});
|
||||
|
||||
// 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) {
|
||||
@ -95,4 +48,4 @@
|
||||
});
|
||||
|
||||
};
|
||||
})(jQuery, 'smartresize');
|
||||
})(jQuery);
|
||||
|
Loading…
Reference in New Issue
Block a user