使用JQuery查找和複製圖像

Question

我正在嘗試使用JQuery來創建使用文章中存在的圖像的動態頁面標題。我打算給圖像一個類（.thumbnail）。一旦用於標題，我想從文章中刪除圖像。下面是邏輯：

• 查找IMG標籤與.thumbnail類
• 移動它.Image1圖像到一個新的DIV（#dynHeader），類
• 縮放圖像以x像素的高度，保持對於寬度
• 方面找到新縮放的圖像的寬度（VAR remainWidth）
• 計算的#dynHeader
• 剩餘寬度重複所述IMG到.Image1的右側，把它叫做.Image2
• 設置它的寬度remainWidth的價值
• 作物它.Image1
• Y軸其位置的高度與一個特定的值

我需要知道如何找到並複製IMG .thumbnail。我相信當我繼續完成這個工作時會出現更多問題，但我完全陷入困境。我在想這個錯嗎？有沒有辦法在頁面上放置相同的圖像兩次？

感謝您的任何幫助。

-Alex

編輯：我張貼的解決方案，我用它在我的網站別人誰可能會遇到這個問題。從答案中拿出代碼並調整它以正確運行。

//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定位鏡像2和隱藏溢出（變焦&作物影響我拍攝的）。

#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 

它絕對可以改善，但應該給你的總體思路:)

哦，只要將相同的圖像的頁面，沒有任何問題，只是克隆（）的元素，你想上哪兒，只要你想多次加入吧！