Question

我正在展示一些图片......

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

我想要的是带有“flag”类的条目，以便在较小的图像上显示小标记图像（例如，pic2_2.jpg）和主要的fancybox图像（例如，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组件的大小和位置，那么我可以构建一个明确的样式来将图像移动到我想要的位置但是我一直无法找到这样的信息。

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

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

Answer 1

考虑在

中使用insertBefore而不是insertAfter

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

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

在fancybox中的主图像上添加图像

1 个答案: