web-dev-qa-db-ja.com

同じページに別々のFancyboxギャラリーを作成するにはどうすればよいですか？

JQuery1.7.1とFancybox1.3.4を使用しています。私はFancyboxを初めて使用します。昨日まで使ったことがないのですが、自分が取り組んでいるサイトで広く使われています。 Fancyboxをセットアップした人は、彼が...無関係だったために終了しました。 :)

商品比較ページを作成しています。 1ページに最大4つの製品が表示されます。各商品には、その商品に固有の最大5つの画像を含めることができます。

現在、画像をクリックすると、Fancyboxが開き、ページ上のすべての画像のギャラリーが作成されます。したがって、5つの画像を含む1つの製品がある場合、5つの画像ギャラリーがあります。 5つの画像を含む4つの製品がある場合、20の画像を含む1つのギャラリーがあります。これは私にはうまくいきません。

私が欲しいのは、各製品に独自のギャラリーを持たせることです。製品Aをクリックすると、製品Aに関連付けられている画像のみが表示されます。製品Bをクリックすると、画像が表示されます。

Fancyboxで1つのページに個別のギャラリーを作成するにはどうすればよいですか？

[〜＃〜]編集[〜＃〜]

現在、私のrel属性は「autoGallery」に設定されています。以下の回答の1つは、私が探しているものを生成するようなものに変更することを提案しました：

<img rel='Gallery1'>
<img rel='Gallery1'>
<img rel='Gallery2'>
<img rel='Gallery2'>
<img rel='Gallery3'>
<img rel='Gallery3'>

Rel属性を「autoGallery」以外に変更すると、画像をクリックすると、画像が新しいウィンドウで開きます。

jqueryfancybox
13
Evik James

各ギャラリーに異なるrel属性を割り当てるだけです

<a class="fancybox" rel="gallery01" href="product01/image01.jpg">one</a>
<a class="fancybox" rel="gallery01" href="product01/image02.jpg">one</a>
<a class="fancybox" rel="gallery01" href="product01/image03.jpg">one</a>
<a class="fancybox" rel="gallery01" href="product01/image04.jpg">one</a>

<a class="fancybox" rel="gallery02" href="product02/image01.jpg">two</a>
<a class="fancybox" rel="gallery02" href="product02/image02.jpg">two</a>
<a class="fancybox" rel="gallery02" href="product02/image03.jpg">two</a>

<a class="fancybox" rel="gallery03" href="product03/image01.jpg">three</a>
<a class="fancybox" rel="gallery03" href="product03/image02.jpg">three</a>
<a class="fancybox" rel="gallery03" href="product03/image03.jpg">three</a>

...そしてそれらはすべて同じスクリプトを使用できます：

$(".fancybox").fancybox();
33
JFK

これがもう1つの例です（ fancyBox3 に基づく）。 data-fancybox属性に同じ値を追加します。 （たとえば、data-fancybox="group"）

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
body {
  margin: 0;
  padding: 10vh 10vw;
  color: #444;
}

h1 {
  font-weight: 700px;
}

h2 {
  font-weight: 600;
}

a,
a:hover {
  color: #ff5268;
}

.imglist {
  font-size: 0;
}

.imglist a {
  display: inline-block;
  margin: 10px 10px 0 0;
}

.imglist a:last-of-type {
  margin-right: 0;
}

.imglist a img {
  vertical-align: top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.js"></script>

<h2>fancybox v3.5.2 - Grouping galleries</h2>

<p>
  Groups are created by adding the same <code>data-fancybox</code> attribute value
</p>

<hr class="my-5" />

<h4>Group 1 Gallery</h4>
<p class="imglist" style="max-width: 1000px;">
  <a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="group1" data-caption="Backpackers following a dirt trail">
    <img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
  </a>

  <a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="group1" data-caption="Mallorca, Llubí, Spain">
    <img src="https://source.unsplash.com/eWFdaPRFjwE/240x160" />
  </a>

  <a href="https://source.unsplash.com/c1JxO-uAZd0/1500x1000" data-fancybox="group1" data-caption="Danish summer">
    <img src="https://source.unsplash.com/c1JxO-uAZd0/240x160" />
  </a>

  <a href="https://source.unsplash.com/eXHeq48Z-Q4/1500x1000" data-fancybox="group1" data-caption="Sunrise above a sandy beach">
    <img src="https://source.unsplash.com/eXHeq48Z-Q4/240x160" />
  </a>
</p>

<h4>Group 2 Gallery</h4>
<p class="imglist" style="max-width: 1000px;">
  <a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="group2" data-caption="Woman on a slope by the shore">
    <img src="https://source.unsplash.com/RFgO9B_OR4g/240x160" />
  </a>

  <a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="group2" data-caption="Mountain hiking sunset">
    <img src="https://source.unsplash.com/7bwQXzbF6KE/240x160" />
  </a>

  <a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="group2" data-caption="Sunset Picnic">
    <img src="https://source.unsplash.com/NhU0nUR7920/240x160" />
  </a>

  <a href="https://source.unsplash.com/B2LYYV9-y0s/1500x1000" data-fancybox="group2" data-caption="On them Indiana Nights">
    <img src="https://source.unsplash.com/B2LYYV9-y0s/240x160" />
  </a>
</p>
4
Penny Liu

Fancybox 3でも同じ問題が発生しました-_rel="gallery"_と_data-fancybox-group="gallery"_の使用は機能しませんでした。

.attr('data-fancybox', 'gallery');を追加することにより、それを機能させるこのcodepen/fiddleを見つけました

https://codepen.io/anon/pen/EwpOxE?editors=101

1
Morten Elmholt Bak

Fancybox 3は、data-fancybox属性を使用してギャラリーをグループ化します。どうやらrelはもう認識されていません。したがって、ギャラリーでグループ化するすべての要素に同じ識別子を使用するだけです。

0
David Hirtz