Permalink
Browse files

Duplicate files because they aren't being picked up...

  • Loading branch information...
Michael Pelletier
Michael Pelletier committed Apr 15, 2018
1 parent 2253076 commit 93753cd3fa8c0c6e237f7683663dbf181c8cd1ec
Showing with 293 additions and 0 deletions.
  1. +17 −0 jquery.resizeandcrop.css
  2. +276 −0 jquery.resizeandcrop.js
View
@@ -0,0 +1,17 @@
/*
* jQuery Plugin - Resize and Crop - v0.2 - CSS
*/
div.resize-and-crop {
overflow: hidden;
display: -moz-inline-block; /* FF2 */
display: inline-block;
*display: inline; /* IE6&7 */
*zoom: 1; /* IE6&7: give hasLayout property */
/*vertical-align: top;*/ /* was added for Webkit but HAS SIDE EFFECTS */
position: relative; /* important for absolute pos of child img */
}
div.resize-and-crop img {
position: absolute;
}
View
@@ -0,0 +1,276 @@
/**
* jQuery Plugin - Resize and Crop
* Version: 0.4.1
*
* Contributor(s):
* Mikaël Gravé
* Luis Cruz
*
* License: Copyright (c) 2013 Traackr Licensed under the MIT license.
*
* By default, takes a list of <img> elements and performs a batch resize and crop operation on them.
* If a "realsrc" attribute is present on the element, the "src" attribute will be treated as a placeholder image and
* swapped out for a resized and cropped version of the image specified in the "realsrc" attribute. If the "realsrc"
* image cannot be loaded, the placeholder image will be displayed.
*
* Example:
* <img src="http://www.example.com/default.png" realsrc="http://www.example.com/example.png" />
* <script type="text/javascript">
* $(document).ready(function() {
* $("img").resizeAndCrop();
* });
* </script>
*
* Options:
* width: Integer
* Force the width of the resulting resized and cropped image.
* Defaults to 0 indicating the image will inherit the width from the "src" attribute image
*
* height: Integer
* Force the height of the resulting resized and cropped image.
* Defaults to 0 indicating the image will inherit the height from the "src" attribute image
*
* crop: Boolean
* Crop the image
* Defaults to true
*
* center: Boolean
* Center the image when cropping it
* Defaults to true
*
* smart: Boolean
* Use smart crop + center mode
* Defaults to true
*
* preserveSize: Boolean
* Float the image within the container if the original image is too small to fit the desired size
* Defaults to false
*
* forceResize: Boolean
* Force small images to be resized
* Defaults to false
*
* imgClass: String
* CSS classes to apply to the generated <img> element
* Defaults to ''
*
* contClass: String
* CSS classes to apply to the generated <div> container element around the <img> element
* Defaults to ''
*
* renderStartDelay: Integer
* How long in milliseconds to delay before starting to load and render the images
* Defaults to 50
*
* renderBatchSize: Integer
* How many images to process at one time
* Defaults to 10. If set to 0, the whole queue of images will be processed in one pass
*
* renderBatchPause: Integer
* How long in milliseconds to pause between processing batches of images
* Defaults to 200
*
*/
(function ($) {
$.fn.resizeAndCrop = function (options) {
// Supported configuration parameters
var settings = {
// Force resulting image size?
// (0=inherit from placeholder img element)
'width': 0,
'height': 0,
// Crop resulting image?
'crop': true,
// Center when cropping?
'center': true,
// Smart crop+center mode?,
'smart': true,
// If the original image is too small to fit
// the wished sized, do we make it float
// within a larger container?
'preserveSize': false,
// Force small images to be resized?
'forceResize': false,
// Optional classes for resulting img element
// and div container element
'imgClass': '',
'contClass': '',
// Start loading/rendering after...
'renderStartDelay': 50, // ms
// Load images by batch of...
'renderBatchSize': 10, // #images
// Pause in between batches
'renderBatchPause': 200 // ms
};
var queue = [];
// If options exist, lets merge them
// with our default settings
if (options) {
$.extend(settings, options);
}
this.each(function () {
queue.push(this); // Defer loading
});
setTimeout(_run, settings.renderStartDelay || 0); // Start loading images
return this;
/**
* Bind images a batch at a time
*/
function _run() {
var max = settings.renderBatchSize || queue.length, // If batch size is 0, render the whole queue in one pass
i = 0;
for (; i < max && queue.length; i++) {
_bindImage(queue.shift());
}
if (queue.length) {
setTimeout(_run, settings.renderBatchPause || 0);
}
}
/**
* Bind an IMG element to the loader & triggers the actual load.
* @param {DOM Element} imgEl <img> element detected in the DOM tree and that needs to be "loaded", resized and cropped.
* @param
*/
function _bindImage(imgEl) {
var $img = $(imgEl),
realSrc = $img.attr("realsrc") || $img.attr("src");
if (!realSrc) {
return;
}
// Temp image, not yet connected to DOM
var newImg = $(document.createElement('img'));
// Important: We pass the DOM img object, not the jQ one
newImg.bind("load", {img: imgEl}, _onload);
// carry over alt and title if they exist
var altStr, titleStr;
if (typeof (altStr = $img.attr('alt')) !== 'undefined') {
newImg.attr("alt", altStr);
}
if (typeof (titleStr = $img.attr('title')) !== 'undefined') {
newImg.attr("title", titleStr);
}
// Load image (in the background -- not visible yet)
newImg.attr("src", realSrc);
}
/**
* Where the magic happens: once an image has successfully loaded (or failed), it is resized/cropped (of needed)
* and the temp DOM img element used for the loading is swapped with the DOM img element that was originally
* in the HTML source.
* @param {DOM Event} e DOM event. Its payload contains e.img (original DOM img element in the HTML source while 'this'
* points to the temp DOM img element used for the loading.)
*/
function _onload(e) {
// Notes on image elements used below:
// 'this' is a DOM image object, it's a temporary IMG element that serves to load the desired image.
// $origImg is the jQ wrapper object for the above image element.
// curImg is the DOM element matching the <img realsrc> tag in your HTML page
// $curImg is the jQ wrapper object for the previous image element.
// All the work is done on the temporary image object (this/$origImg). Once it's loaded and sized properly,
// we encapsulate it within a containing <div> (cont) that is also used for cropping the image by using
// a masking technique (faux-cropping using CSS overflow hidden).
// Finally, we swap the original <img> node with that <div> node.
// Original image (natural size), temp node
var $origImg = $(this),
// Can't use origImg.width() because not visible
origW = this.width,
origH = this.height,
// Current placeholder image in markup (DOM object)
curImg = e.data.img,
// Current placeholder image in markup (jQuery object)
$curImg = $(curImg),
// Requested width (do not use $curImg.width()!)
reqW = settings.width || parseInt($(curImg).css("width")) || curImg.width,
// Requested height
reqH = settings.height || parseInt($(curImg).css("height")) || curImg.height,
// What it will finally be...
cropW = settings.forceResize ? reqW : Math.min(origW, reqW),
cropH = settings.forceResize ? reqH : Math.min(origH, reqH),
// Encapsulating <div>
cont;
// Check loaded image is valid
if (!origW || !origH) {
// Invalid, do nothing
return;
}
// No-crop mode, same dimensions: just act as a deferred loader
if (!settings.crop && reqW == origW && reqH == origH) {
$curImg.attr("src", $origImg.attr("src"));
return;
}
// Resize image
if (cropW * origH < cropH * origW) {
this.width = Math.round(origW * cropH / origH);
this.height = cropH;
} else {
this.width = cropW;
this.height = Math.round(origH * cropW / origW);
}
// Style it
if (settings.imgClass) {
$origImg.addClass(settings.imgClass);
}
if (!settings.crop) {
$curImg.replaceWith($origImg); // Swap nodes
return;
}
// Crop
// Create container element (mask)
cont = $(document.createElement('div'));
cont.addClass("resize-and-crop");
if (settings.preserveSize) {
cont.width(reqW).height(reqH);
} else {
// Crop it
cont.width(cropW).height(cropH);
// Center it
if (settings.center) {
$origImg.css('left', -Math.max(0, Math.round(( this.width - cropW ) / 2)));
if (settings.smart && this.height / this.width > 1.2) {
$origImg.css('top', 0);
} else {
$origImg.css('top', -Math.max(0, Math.round(( this.height - cropH ) / 2)));
}
}
}
// Style it
if (settings.contClass) {
cont.addClass(settings.contClass);
}
// Insert image into container
cont.append($origImg);
// Swap nodes
$curImg.replaceWith(cont);
}
};
})(jQuery);

0 comments on commit 93753cd

Please sign in to comment.