1

我正在显示许多图像...

<div id="gallery"> 
    <a href="photos/pic1.jpg" rel="lightbox-left" title=""> 
        <img src="photos/pic1_2.jpg" /></a> 

    <a href="photos/pic2.jpg" rel="lightbox-left" title="my title" class="flag"> 
        <img src="photos/pic2_2.jpg"  /></a>
</div>

我想要的是具有“标志”类的条目在较小的图像（例如 pic2_2.jpg）和主要的花式框图像（例如 pic2.jpg）上显示一个小标志图像。

我使用以下实现的第一部分（我将叠加图像添加为背景图像）

$("<img src='/images/empty.png' class='overlay' />").insertAfter("a.flag img");

与 CSS 的

img.overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 18px;
    height: 21px;
    background-image: url(/images/flag.png);
    background-repeat: no-repeat;
    border:none !important;
}

但是我很难解决问题的第二部分，即在fancybox 主图片上叠加图像。

我通过向标题添加图像然后使用 CSS 移动它来获得某种控制，但似乎无法找到将其移动到适用于任何尺寸图像的位置。我试过的是

   $('#gallery a').fancybox({
        beforeShow: function () {
            if (this.title) {
                this.title = "<img src='/images/flag.png' class='moveflag' />" + this.title;
            }
            else {
                this.title = "<img src='/images/flag.png' class='moveflag' />";
            }
        }
    });

与 CSS 的

.moveflag {
    position:absolute;
    top:-50px;
    left:5px;
 }

如果我能掌握 fancybox 组件的大小和位置，那么我可以构建一个明确的样式来将图像移动到我想要的位置，但我一直无法找到这些信息。

所以，我所追求的要么是在图片上叠加这个小图像的更好方法，要么是某种获得各种尺寸的方法，这样我就可以将它可靠地放置在我想要的位置。

我还要指出，在这个阶段，这个解决方案甚至还没有开始考虑将效果仅应用于具有“标志”类的图片。首先我需要能够产生我想要的效果！

4

1 回答 1

0

考虑使用insertBefore而不是insertAfter在

$("<img src='/images/empty.png' class='overlay' />").insertAfter("a.flag img");

因为overlay是绝对定位的，所以不会影响真实图像的位置。但是，您需要z-index在 CSS 中进行管理，以使您的叠加层z-index比原始图片更大。

于 2012-10-31T12:12:15.927 回答