0

以下を表示する Fancybox エフェクトが必要です。

画像、タイトル、段落

実際には画像とタイトルのみが表示されます。

オーバーレイ ボックスにもテキストを表示するにはどうすればよいですか?

<li>
<a class="fancybox" rel="projects" href="<?php the_field('image'); ?>" title="<?php the_title(); ?>">
<img src="<?php the_field('image'); ?>" alt="" />
</a>
<p>Some content...</p>      
</li>

$(".fancybox").fancybox({
        padding : 0,
        nextEffect : 'fade',
        prevEffect : 'fade',
        title : this.title,
        helpers : {
            title   : {
                type: 'outside'
            }
        }
    });

何か案は？

4

1 に答える 1

1

fancyboxのtitleプロパティは、任意の有効な HTML に設定できます。適切なタイトルというよりも、キャプションのように振る舞います。したがって、次のようなことができます：

    title = '<h1>' + this.title + '</h1><p>' + this.parent().children('p').html() + '</p>',

次に、ファンシーボックスには、タイトルfancybox-titleが含まれる要素と、 の段落のコピーである要素を含むクラスの div があります。私の例の問題は、要素の子であるすべての段落要素を返すことです。そのため、複数の段落がある場合は、それらすべてを取得しようとします。ファンシーボックスのキャプションに複数のブロックレベルの要素を含めることができるように、HTML を再構築することをお勧めします。段落を特定のクラスの div で囲み、そのクラスをメソッドのセレクターとして使用して、そこに複数の段落を配置したり、本当に必要なものを配置したりできます。複数の段落が必要ない場合は、クラスをh1plichildrenlilichildrenpタグを付けて、childrenメソッドでそれを選択します。

    <li>
      <a class="fancybox" rel="projects" href="<?php the_field('image'); ?>" title="<?php the_title(); ?>">
        <img src="<?php the_field('image'); ?>" alt="" />
      </a>
      <div class="caption">
        <p>Some content...</p>
      </div>      
    </li>

    $(".fancybox").fancybox({
        padding : 0,
        nextEffect : 'fade',
        prevEffect : 'fade',
        title : '<h1>' + this.title + '</h1>' + this.parent().children('.caption').html(),
        helpers : {
            title   : {
                type: 'outside'
            }
        }
    });

h1もちろん、最も適切と思われるものに置き換えることができます。ヘッダーと段落の CSS ファイルにスタイルを追加すれば、準備完了です (.fancybox-title h1 {}と.fancybox-title p {})。

于 2013-02-18T17:23:18.667 に答える