Question

I’m attempting to use JQuery to create a dynamic page header using an image that exists in the article. I plan to give the image a class (.thumbnail). I want to remove the image from the article once it is used for the header. Here is the logic:

• Find IMG tag with .thumbnail class
• Move that image to a new DIV (#dynHeader), class it .Image1
• Scale the image to x pixels in height, maintain aspect for width
• Find the width of the newly scaled image (var remainWidth)
• Calculate the remaining width of #dynHeader
• Duplicate the IMG to the right of .Image1, call it .Image2
• Set its width to the value of remainWidth
• Crop it to the height of .Image1
• Position it on the Y axis with a specific value

I need to know how to find and duplicate the IMG .thumbnail. I’m sure more problems will surface as I continue working through this, but I am completely stuck. Am I thinking about this wrong? Is there a way to place the same image on the page twice?

Thanks for any help.

-alex

Edit: I’m posting the solution as I’m using it on my site for anyone else who might run into this problem. Took the code from the answer and tweaked it to function correctly.

 //need to clone before removing class so that the original is deletable later.
    var cache = $('img.thumbnail').clone().removeClass('thumbnail').addClass('Image1').css('float','left');
//remove the original from the text         
            $('img.thumbnail').remove();
//attach the cloned image to the header
            $('#dynHeader').append(cache);
//find the ratio
            var ratio = (cache.width() / cache.height());
//set variable to hold image height
            var imageHeight = (365);
//set variable to hold image width 
            var imageWidth = (imageHeight*ratio);
//set the image height & width
            cache.height(imageHeight).width(imageWidth);
//figure the amount of width remaining in the header
            var remainWidth = $('#dynHeader').width() - imageWidth;
//clone the header image
            var dupe = cache.clone();
//work with the cloned image - change the class to Image2, set the width and height         dupe.removeClass('Image1').addClass('Image2').css("width",remainWidth+"px").css("height","auto");
//place Image2 to the right of Image1
            cache.after(dupe);

Then I used some CSS to position Image2 and hide the overflow (the zoom & crop effect I was shooting for).

#dynHeader{
    height: 365px;
    overflow: hidden;
    margin-bottom: 30px;
}
img.Image2{
    position: relative;
    top: -150px;
}

Hope this helps someone else! Thanks Alex for pointing this the right way.

Answer 1

This should get you started: (please bear in mind its 100% off the top of my head and its late here… could be some typos in there!)

//Find IMG tag with .thumbnail class:
$('img.thumbnail')

//Move that image to a new DIV (#dynHeader), class it .Image1

// change class before and then grab image
var cache = $('img.thumbnail').removeClass('thumbnail').addClass('Image1').clone();

// remove from context
$('img.thumbnail').remove();

// add it to the div
$('#dynHeader').append(cache);

// Scale the image to x pixels in height, maintain aspect for width
// cache selector
var cache = $('.Image1');

// calculate aspect
var ratio = (cache.width() / cache.height());

// calculate & store width
var remainWidth = (x*ratio);

// scale to x pixels in height
cache.height(x).width(remainWidth);

// Calculate the remaining width of #dynHeader
var remainHeaderWidth = $('#dynHeader').width() - remainWidth;

// Duplicate the IMG to the right of .Image1, call it .Image2
// assuming you mean "duplicate it and add to the right"
var dupe = cache.clone();
dupe.removeClass('Image1).addClass('Image2');

// Set its width to the value of remainWidth
dupe.width(remainHeaderWidth);

// Crop it to the height of .Image1
// not sure about the cropping, here's how you would change it without maintaing aspect
dupe.height(cache.height());

// add it after the first image
cache.after(dupe);

// Position it on the Y axis with a specific value
// cant remember off the top of my head but as far as I know you have to first find its    
// position on the axis and then shift it maybe applying relative css positioning

It can definitely be improved but should give you the general idea 🙂

Oh and as far as placing the same image on the page, no problem, just clone() the element and add it where you want as many times as you want!