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

しかし、問題の 2 番目の部分を解決するのに苦労しています。つまり、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;
 }

ファンシーボックスコンポーネントのサイズと位置を把握できれば、明示的なスタイルを構築して画像を必要な場所に移動できますが、そのような情報を見つけることができませんでした.

だから、私が求めているのは、この小さな画像を画像に重ねるより良い方法か、さまざまなサイズを取得して、必要な場所に確実に配置できるようにすることです。

また、この段階では、このソリューションは、「フラグ」のクラスを持つ写真のみに効果を適用することを検討し始めていないことも指摘しておきます。まず、必要な効果を生成できるようにする必要があります。

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 に答える