Gallery

Images

Most gallery images in gallery page are inside a .d-style element for Dynamic Styling
For example:

html
<div class="pos-rel d-style overflow-hidden">
  <img src="image.jpg" class="w-100 d-zoom-2" />
</div>

Because of .d-style and .d-zoom-2 classes, when you hover the image, it will be zoomed in, a little bit.


Or in this example:

html
<div class="pos-rel d-style overflow-hidden">
 <img ... />
 <div class="mt-hover position-tl w-100">
   Some Buttons or Text
 </div>
</div>

Because of .d-style and .mt-hover classes, when you hover the image, the .mt-hover element will appear from top

Photoswipe plugin

Please refer to its documentation or for an example see views/pages/gallery/@page-script.js
You should also include:

  • photoswipe/dist/photoswipe.css
  • photoswipe/dist/default-skin/default-skin.css