vishnu vishnu - 3 months ago 20
HTML Question

Is it possible to make Pretty Photo Js to show sequence of images on opening a single image?

I want to make my portfolio web page to display my graphic design works. Each work will have a cover image and more than two project images to display.

So, is that a way to customize PrettyPhoto Js to show all project images in a slide after clicking the cover image?

I've attached Image for reference.

enter image description here

Thanks in advance

Answer

You should group them using relation attribute. Look at the example below how I grouped first two items with rel="prettyPhoto[1] and next three with rel="prettyPhoto[2]"

<li class="col-sm-4"  data-filter=".photos">
<a rel="prettyPhoto[1]" href="...">
<img class="img-responsive" src="..." alt="" title=""/>
</a>
</li>
<li class="col-sm-4"  data-filter=".photos">
  <a rel="prettyPhoto[1]" href="...">
  <img class="img-responsive" src="..." alt="" title=""/>
  </a>
</li>
<li class="col-sm-4"  data-filter=".photos">
  <a rel="prettyPhoto[2]" href="...">
  <img class="img-responsive" src="..." alt="" title=""/>
  </a>
</li>
<li class="col-sm-4"  data-filter=".photos">
  <a rel="prettyPhoto[2]" href="...">
  <img class="img-responsive" src="..." alt="" title=""/>
  </a>
</li>
<li class="col-sm-4"  data-filter=".photos">
  <a rel="prettyPhoto[2]" href="...">
  <img class="img-responsive" src="..." alt="" title=""/>
  </a>
</li>