克隆的圖像更改固定分區位置

當用戶單擊旋轉木馬內的圖像時，我創建了一個彈出式大圖。我已經達到了這個目標，但圖像位置取決於它在旋轉木馬中的位置。在CSS我現在是：克隆的圖像更改固定分區位置

#carousel1{ 
    width:1000px; 
    height:200px; 
    overflow:scroll; 
} 
#popUp{ 
    display: none; 
    position: fixed !important; 
    width: 580px !important; 
    height: 350px !important; 
    z-index: 9999; 
}

的相關HTML是：

<div id = "carousel1"> 
    <img class="cloudcarousel" src="1.png" alt="1" title="Flag 1 Title" /> 
    <img class="cloudcarousel" src="2.png" alt="2" title="Flag 2 Title" /> 
    <img class="cloudcarousel" src="3.png" alt="3" title="Flag 3 Title" /> 
    <img class="cloudcarousel" src="4.png" alt="4" title="Flag 4 Title" /> 
    <img class="cloudcarousel" src="5.png" alt="5" title="Flag 5 Title" /> 
</div> 
<div id = "popUp"></div>

的相關jQuery是：

this.imagePop = function() { 
    if (options.imagePop !== 'no') { 

     $(container).bind('click', this, function (event) { 

      clearInterval(event.data.autoRotateTimer); // Stop auto rotation if mouse over. 
      clearInterval(event.data.intervalLeft); 
      clearInterval(event.data.intervalRight); 
      var text = $(event.target).attr('alt'); 
      // If we have moved over a carousel item, then show the alt and title text. 

      var $img = $(event.target); 
      $('#popUp').html($img.clone().height(200).width(300)).add($('#overLay')).fadeIn(); 
      $('#popUp').add($('#overLay')).click(function() { 
       $('#popUp').add($('#overLay')).fadeOut(function() { 
        $('#popUp').empty(); 
       }); 
      }); 
     }); 
    }; 
};

對於這個問題指的工作示例：WWW。 bingetech.com/carousel

是否有可能將popUp div與克隆圖像置於屏幕中間？

來源

2013-06-26 Chris

希望你注意到我的編輯，下次只提出你的問題什麼是相關的答案。無用的PHP或其他東西只是給你的代碼添加噪音，使其很難遵循。記住！ :)快樂編碼 –

我認爲它與.clone（）方法有關。您可以確保只設置彈出式圖像屬性，因爲克隆圖像會導致與克隆目標相同的值。

#popUp img { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -175px; 
    margin-left: -290px; 
}

注：確保此聲明中的CSS

來源

2013-06-26 03:53:09 jonosma

添加了代碼，仍然沒有放置圖像中心...我也在想它可能是克隆（）方法，但仍然不確定儘管 – Chris

不要ü需要目前主要的.cloudcarousel類下面 - 標誌圖像由一個用戶會點擊轉盤被取代？

您能否詳細說明放大圖像的位置。或者想要什麼的快照？

來源

2013-06-26 04:02:16

完全居中在頁面中，請注意圖像如何彈出不同的圖像位置。 – Chris

試試這個。在旋轉木馬div之前放置popup div。將彈出窗口的樣式更改爲'position：relative; margin：0px auto'並將彈出窗口的高度降低到圖像高度，即200px –

克隆的圖像更改固定分區位置

回答

相關問題