4

わかりましたので、最近 ' fancyBox ' を自分のサイトに追加しました。ただし、ギャラリー画像のすぐ下に、サムネイル (その機能はサムネイル ヘルパーの一部であるため、別の .js ファイル内) を配置したいと考えています。

私は最初に画像を含むdivを変更しようとしました(そしてサムネイルを想定しました)が、2つは本体以外の親divを持たない兄弟divです。次に、要素を実際にページに「印刷」しているものを理解しようと試みたところ、「ラップ」の使用法がたくさん見つかりました。

例えば:

tpl: {
            wrap     : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
            image    : '<img class="fancybox-image" src="{href}" alt="" />',
            iframe   : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + (IE ? ' allowtransparency="true"' : '') + '></iframe>',
            error    : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
            closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
            next     : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
            prev     : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
        },

まず最初に; tpl : {}, ? それは何ですか?配列ですか?機能?その構文に適合するものについて話しているドキュメントを見つけることができません。

第二に、実際のhtmlが「印刷」されている行ではなく、印刷する必要があるものを定義している領域と、その中の値がhtmlが実際に印刷されるときに呼び出されるだけだと思います。...?だから、これを(サムネイルjsファイルから)印刷できるという意味ではありません:

this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body');
        this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);

画像の実際のhtmlが印刷されている行に?これらは 2 つの別個のファイルの一部であることに注意してください。

基本的に必要なのは、ギャラリーとサムネイルの両方に親 div を用意することだけです。このようにして、ギャラリーのサイズに合わせてサムネイルを配置できます。私も drupal を使用しているので、明らかにテンプレートでない限り、html ドキュメントのほとんどすべてのハード コーディングは不要です。

私は着ぐるみでこれを理解しようとしましたが、私の経験不足とメインファイルの長さが 2020 行であるため、成功する可能性はほとんどありません. むしろ、見知らぬ壁に何度もぶつかり、気が狂いそうになります。

4

1 に答える 1