Develop Reference

How to shrink an image width based on scroll position

I'm looking to shrink a logo based on scroll
So far, I have something like this
logoSize = function(){
var headerOffset = $(window).height() - 650;
var maxScrollDistance = 1300;
$(window).scroll(function() {
var percentage = maxScrollDistance / $(document).scrollTop();
if (percentage <= headerOffset) {
$('.logo').css('width', percentage * 64);
}
console.log(percentage);
});
}
logoSize();
I'm close, but the image either starts too wide or it shrinks too quickly, I need it to happen for the first 650px of scroll as you can see - Any ideas? Perhaps a percentage width would be better?

I've re-written your code based on the assumption that you have a target size in mind , e.g. after scrolling 650px you want your image to be 250px wide.
It scrolls smoothly between the native size and the target size, and takes into account the fact that the window height could be less than your maximum scrolling distance:
logoSize = function () {
// Get the real width of the logo image
var theLogo = $("#thelogo");
var newImage = new Image();
newImage.src = theLogo.attr("src");
var imgWidth = newImage.width;
// distance over which zoom effect takes place
var maxScrollDistance = 650;
// set to window height if that is smaller
maxScrollDistance = Math.min(maxScrollDistance, $(window).height());
// width at maximum zoom out (i.e. when window has scrolled maxScrollDistance)
var widthAtMax = 500;
// calculate diff and how many pixels to zoom per pixel scrolled
var widthDiff = imgWidth - widthAtMax;
var pixelsPerScroll =(widthDiff / maxScrollDistance);
$(window).scroll(function () {
// the currently scrolled-to position - max-out at maxScrollDistance
var scrollTopPos = Math.min($(document).scrollTop(), maxScrollDistance);
// how many pixels to adjust by
var scrollChangePx = Math.floor(scrollTopPos * pixelsPerScroll);
// calculate the new width
var zoomedWidth = imgWidth - scrollChangePx;
// set the width
$('.logo').css('width', zoomedWidth);
});
}
logoSize();
See http://jsfiddle.net/raad/woun56vk/ for a working example.

Proportional resize images in a fixed block

I have 3 random images and one fixed block (200x300px).
Please, help me to write an algoritm, I need to change image size proportionally to get into fixed block.
Images width must be equal of block width
http://jsfiddle.net/U8AAu/2/
var images = [
getRandSizes(),
getRandSizes(),
getRandSizes()
];
var sizes = getProportionalSizes(200, 300, images);
$.each(sizes, function(i, size){
var $img = $("<div>", {
class: 'img',
width: size[0],
height: size[1]
}).appendTo('.fixed-block')
});
// todo:
function getProportionalSizes(maxWidth, maxHeight, sizes){
return sizes;
}
function getRandSizes(){
return [getRand(100,200), getRand(100,200)]
}
function getRand(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

Always changing the image width to fill the box width will cause aspect ratio issues, and will distort your pictures. I would recommend doing something like this.
var image1 = new Object( );
var sizeArray = getRandSizes( );
image1.width = sizeArray[0];
image1.height = sizeArray[1]; //Repeat for images 2 and 3
var images =
[
image1,
image2,
image3
];
images = getProportionalSizes( 200, 300, images );
images.forEach( function( image )
{
var $img = $("<div>",
{
class: 'img',
width: image.width,
height: image.height
}).appendTo('.fixed-block')
});
function getProportionalSizes(maxWidth, maxHeight, images)
{
var totalHeight;
images.forEach( function( image )
{
totalHeight += image.height;
});
images.forEach( function( image )
{
var ratio = image.height / totalHeight;
image.height *= ratio;
image.width *= ratio; //This will ensure that images maintain aspect ratio, but that the total height of the 3 images matches the container height.
});
return images;
}
function getRandSizes()
{
return [getRand(100,200), getRand(100,200)]
}
function getRand(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
EDIT ------------------------
If having full block width is a requirement, and the distortion of the images is irrelevant, then do this instead.
function getProportionalSizes(maxWidth, maxHeight, images)
{
var totalHeight;
images.forEach( function( image )
{
totalHeight += image.height;
});
images.forEach( function( image )
{
var ratio = image.height / totalHeight;
image.height *= ratio;
image.width = maxWidth //This will keep the individual image height proportional to each other, but stretch the picture in the x-direction to fill the block.
});
return images;
}

To change the width of the image to a fixed block width of 200, change your size definition to:
width: 200,
height: size[1]*200/size[0]
This will preserve the aspect ratio while resizing the image to the proper width.
Note that it is possible that the resulting image will be taller than the height specified. If the original image is 100x200, the resulting resized image will be 200x400. This is unavoidable, given the problem constraints.

jQuery jslint var was used before it was defined

I've been using jslint to try see what it says about my code, and i get lots of flags, but i am working through trying improve it. However i am stuck on the error
maxHeight was used before it was defined
My jQuery:
$.fn.thumbSizr = function () { // begin function
"use strict";
return this.each(function () {
var $this = $(this);
maxWidth = $(this).parent().width(); // Max width for the image
minHeight = $(this).parent().height(); // Max height for the image
ratio = 0; // Used for aspect ratio
width = $(this).width(); // Current image width
height = $(this).height(); // Current image height
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height < minHeight){
ratio = minHeight / height; // get ratio for scaling image
$(this).css("height", minHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
var $img = $(this),
css = {
position: 'absolute',
marginLeft: '-' + (parseInt( $img.css('width') ) / 2) + 'px',
left: '50%',
top: '50%',
marginTop: '-' + (parseInt( $img.css('height') ) / 2) + 'px'
};
$img.css( css );
});
};
I'm no jQuery pro so this might be ropey but i really wanted to make it as good as possible. Can anyone explain and suggest why i am getting this message and how to avoid it in the future?
Thanks

You are using semicolon instead of comma when declaring multiple variable with single "var"
This part is wrong:
var $this = $(this);
maxWidth = $(this).parent().width(); // Max width for the image
minHeight = $(this).parent().height(); // Max height for the image
ratio = 0; // Used for aspect ratio
width = $(this).width(); // Current image width
height = $(this).height(); // Current image height
fixed:
var $this = $(this),
maxWidth = $(this).parent().width(), // Max width for the image
minHeight = $(this).parent().height(), // Max height for the image
ratio = 0, // Used for aspect ratio
width = $(this).width(), // Current image width
height = $(this).height(); // Current image height

how to direct download button to url with showing the image

i have this code. and i want when i press download image that it will show the filtered image in my designed webpage. someone can help me how can i do this?
i know i have to change something here in the url. but its dont working and i dont really know why:
var url = canvas.toDataURL("image/png;base64;"); downloadImage.attr('href', url);
please help me.
$(function() {
/*
In this code, we are going to do the following:
1. Accept an image on drag and drop
2. Create a new canvas element (original), with a max size
of 500x500px (customizable) and keep it in memory
3. Listen for clicks on the filters. When one is selected:
3.1 Create a clone of the original canvas
3.2 Remove any canvas elements currently on the page
3.3 Append the clone to the #photo div
3.4 If the selected filter is different from the "Normal"
one, call the Caman library. Otherwise do nothing.
3.5 Mark the selected filter with the "active" class
4. Trigger the "Normal" filter
*/
var maxWidth = 500,
maxHeight = 500,
photo = $('#photo'),
originalCanvas = null,
filters = $('#filters li a'),
filterContainer = $('#filterContainer');
// Use the fileReader plugin to listen for
// file drag and drop on the photo div:
photo.fileReaderJS({
on:{
load: function(e, file){
// An image has been dropped.
var img = $('<img>').appendTo(photo),
imgWidth, newWidth,
imgHeight, newHeight,
ratio;
// Remove canvas elements left on the page
// from previous image drag/drops.
photo.find('canvas').remove();
filters.removeClass('active');
// When the image is loaded successfully,
// we can find out its width/height:
img.load(function() {
imgWidth = this.width;
imgHeight = this.height;
// Calculate the new image dimensions, so they fit
// inside the maxWidth x maxHeight bounding box
if (imgWidth >= maxWidth || imgHeight >= maxHeight) {
// The image is too large,
// resize it to fit a 500x500 square!
if (imgWidth > imgHeight) {
// Wide
ratio = imgWidth / maxWidth;
newWidth = maxWidth;
newHeight = imgHeight / ratio;
} else {
// Tall or square
ratio = imgHeight / maxHeight;
newHeight = maxHeight;
newWidth = imgWidth / ratio;
}
} else {
newHeight = imgHeight;
newWidth = imgWidth;
}
// Create the original canvas.
originalCanvas = $('<canvas>');
var originalContext = originalCanvas[0].getContext('2d');
// Set the attributes for centering the canvas
originalCanvas.attr({
width: newWidth,
height: newHeight
}).css({
marginTop: -newHeight/2,
marginLeft: -newWidth/2
});
// Draw the dropped image to the canvas
// with the new dimensions
originalContext.drawImage(this, 0, 0, newWidth, newHeight);
// We don't need this any more
img.remove();
filterContainer.fadeIn();
// Trigger the default "normal" filter
filters.first().click();
});
// Set the src of the img, which will
// trigger the load event when done:
img.attr('src', e.target.result);
},
beforestart: function(file){
// Accept only images.
// Returning false will reject the file.
return /^image/.test(file.type);
}
}
});
// Listen for clicks on the filters
filters.click(function(e){
e.preventDefault();
var f = $(this);
if(f.is('.active')){
// Apply filters only once
return false;
}
filters.removeClass('active');
f.addClass('active');
// Clone the canvas
var clone = originalCanvas.clone();
// Clone the image stored in the canvas as well
clone[0].getContext('2d').drawImage(originalCanvas[0],0,0);
// Add the clone to the page and trigger
// the Caman library on it
photo.find('canvas').remove().end().append(clone);
var effect = $.trim(f[0].id);
Caman(clone[0], function () {
// If such an effect exists, use it:
if( effect in this){
this[effect]();
this.render();
// Show the download button
showDownload(clone[0]);
}
else{
hideDownload();
}
});
});
// Use the mousewheel plugin to scroll
// scroll the div more intuitively
filterContainer.find('ul').on('mousewheel',function(e, delta){
this.scrollLeft -= (delta * 50);
e.preventDefault();
});
var downloadImage = $('a.downloadImage');
function showDownload(canvas){
downloadImage.off('click').click(function(){
// When the download link is clicked, get the
// DataURL of the image and set it as href:
var url = canvas.toDataURL("image/png;base64;");
downloadImage.attr('href', url);
}).fadeIn();
}
function hideDownload(){
downloadImage.fadeOut();
}
});

You can try this:
var downloadImage = $('a.downloadImage');
var url = canvas.toDataURL("image/png;base64;");
downloadImage.attr('href', url);

Load image with jQuery and append it to the DOM

I'm trying to load an image from a given link
var imgPath = $(imgLink).attr('href');
and append it to the page, so I can insert it into a given element for an image viewer.
Even though I searched Stackoverflow and the jQuery docs without end, I can't figure it out.
After I load the image, I want to set different values to it, like width, height, etc.
Update:
This is what I got. The problem I'm having is that I can't run jQuery functions on the img element.
function imagePostition(imgLink) {
// Load the image we want to display from the given <a> link
// Load the image path form the link
var imgPath = $(imgLink).attr('href');
// Add image to html
$('<img src="'+ imgPath +'" class="original">').load(function() {
$(imgLink).append(this);
var img = this;
// Resize the image to the window width
// http://stackoverflow.com/questions/1143517/jquery-resizing-image
var maxWidth = $(window).width(); // window width
var maxHeight = $(window).height(); // window height
var imgWidth = img.width; // image width
var imgHeight = img.height; // image height
var ratio = 0; // resize ration
var topPosition = 0; // top image position
var leftPostition = 0; // left image postiton
// calculate image dimension
if (imgWidth > maxWidth) {
ratio = imgHeight / imgWidth;
imgWidth = maxWidth;
imgHeight = (maxWidth * ratio);
}
else if (imgHeight > maxHeight) {
ratio = imgWidth / imgHeight;
imgWidth = (maxHeight * ratio);
imgHeight = maxHeight;
}
// calculate image position
// check if the window is larger than the image
// y position
if(maxHeight > imgHeight) {
topPosition = (maxHeight / 2) - (imgHeight / 2);
}
// x position
if(maxWidth > imgWidth) {
leftPostition = (maxWidth / 2) - (imgWidth / 2);
}
$(imgLink).append(img);
// Set absolute image position
img.css("top", topPosition);
img.css("left", leftPostition);
// Set image width and height
img.attr('width', imgWidth);
img.attr('height', imgHeight);
// Add backdrop
$('body').prepend('<div id="backdrop"></div>');
// Set backdrop size
$("#backdrop").css("width", maxWidth);
$("#backdrop").css("height", maxHeight);
// reveal image
img.animate({opacity: 1}, 100)
img.show()
});
};

$('<img src="'+ imgPath +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});
If you want to do for several images then:
function loadImage(path, width, height, target) {
$('<img src="'+ path +'">').load(function() {
$(this).width(width).height(height).appendTo(target);
});
}
Use:
loadImage(imgPath, 800, 800, '#some_target');

Here is the code I use when I want to preload images before appending them to the page.
It is also important to check if the image is already loaded from the cache (for IE).
//create image to preload:
var imgPreload = new Image();
$(imgPreload).attr({
src: photoUrl
});
//check if the image is already loaded (cached):
if (imgPreload.complete || imgPreload.readyState === 4) {
//image loaded:
//your code here to insert image into page
} else {
//go fetch the image:
$(imgPreload).load(function (response, status, xhr) {
if (status == 'error') {
//image could not be loaded:
} else {
//image loaded:
//your code here to insert image into page
}
});
}

var img = new Image();
$(img).load(function(){
$('.container').append($(this));
}).attr({
src: someRemoteImage
}).error(function(){
//do something if image cannot load
});

after you get the image path, try either of following ways
(as you need to set more attr than just the src)
build the html and replace to the target region
$('#target_div').html('<img src="'+ imgPaht +'" width=100 height=100 alt="Hello Image" />');
you may need to add some delay if changing the "SRC" attr
setTimeout(function(){///this function fire after 1ms delay
$('#target_img_tag_id').attr('src',imgPaht);
}, 1);

I imagine that you define your image something like this:
<img id="image_portrait" src="" alt="chef etat" width="120" height="135" />
You can simply load/update image for this tag and chage/set atts (width,height):
var imagelink;
var height;
var width;
$("#image_portrait").attr("src", imagelink);
$("#image_portrait").attr("width", width);
$("#image_portrait").attr("height", height);

With jQuery 3.x use something like:
$('<img src="'+ imgPath +'">').on('load', function() {
$(this).width(some).height(some).appendTo('#some_target');
});