0

当用户单击轮播中的图像时，我正在创建一个更大的弹出图像。我已经实现了这一点，但是图像位置会根据其在轮播中的位置而有所不同。我现在拥有的 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 与克隆图像放在屏幕中间？

4

2 回答 2

0

我认为这与 .clone() 方法有关。您可以确保只设置弹出图像属性，因为克隆图像将导致接触与克隆目标相同的值。

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

注意：确保这是在 css 中的 .cloudcarousel 类下面声明的

于 2013-06-26T03:53:09.123 回答
0

您是否需要将当前的主徽标图像替换为用户将在轮播中单击的图像？

您能否详细说明放大图像的位置。或所需内容的快照？

于 2013-06-26T04:02:16.867 回答