Поиск и повторение изображения с помощью JQuery

Question

Я пытаюсь использовать JQuery для создания динамического заголовка страницы с использованием изображения, которое существует в статье. Я планирую предоставить образ классу (.thumbnail). Я хочу удалить изображение из статьи после его использования для заголовка. Вот логика:

• Найти IMG тег с .thumbnail класса
• Переместить это изображение на новый DIV (#dynHeader), класс это .Image1
• Масштабирование изображения до х пикселей в высоту, поддерживать аспект для ширины
• Найти ширину вновь масштабируемого изображения (вар remainWidth)
• Вычислить остальные ширина #dynHeader
• дубликат IMG справа от .Image1, назовем его .Image2
• Установите его ширину на значение remainWidth
• кадрирование на высоту .Image1
• расположите на оси Y с определенным значением

Мне нужно знать, как найти и дублировать IMG.thumbnail. Я уверен, что больше проблем будет возникать, когда я продолжу работать через это, но я полностью застрял. Я думаю об этом неправильно? Есть ли способ разместить одно и то же изображение на странице дважды?

Спасибо за любую помощь.

для -Alex-

Edit: Я отправляю решение, как я использую его на моем сайте для всех, кто может столкнуться с этой проблемой. Выбрал код из ответа и настроил его правильно.

//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); 

Тогда я использовал некоторые CSS позиционировать IMAGE2 и скрыть переполнения (трансфокатора & кадрирования эффект, я стрелял в).

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

Надеюсь, это поможет кому-то еще! Спасибо Алекс за то, что он правильно указал.

Answer 1

Это должно вам начать работу: (пожалуйста, имейте в виду, его 100% от верхней части моей головы, и его поздно здесь ... может быть несколько опечаток там!)

//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 

Это определенно может быть улучшилось, но должно дать вам общую идею :)

О, и при размещении одного и того же изображения на странице нет проблем, просто введите clone() и добавьте его туда, где вы хотите столько раз, сколько хотите!