Load image with jQuery and append it to the DOM
image, javascript, jquery
Solution
$('<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');
Problem
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() }); }; ```