Photoswipe + Justified.js mashup

Download

Introduction

This is a quick and dirty mashup of a nice photoswipe javascript gallery (which supports touch input) with Justified.js (which provides layout of the images in the gallery) with images sourced from Flickr albums (which conveniently provides images of various sizes). You can use this demo page as an example how to implement this quick'n'dirty mashup.

Because the original justified.js is not responsive, I added a hack which recalculates the width of the picture album element every time the size of browser window changes. This adds a bit of unnecessary work I guess, but saves me from really digging into the code and keeps it nicely cargo-culty.

Example

Example no 2

How to implement this mashup

Steps:

  1. Include jQuery
  2. Include Justified.js and css
  3. Include photoswipe js and css
  4. Include photoswipe HTML
  5. Include last bits of js after that
  6. Specify where to put albums

1. Include jQuery

Somewhere in the header

            
<script src="https://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

2. Include Justified.js and css

This also goes to the header...

            
<link rel="stylesheet" src="css/jquery.justified.images.css">
<script src="js/jquery.justified.images.js" type="text/javascript"></script>

3. Include Photoswipe js and css

...and this one as well.

            
<link rel="stylesheet" href="css/photoswipe.css">
<link rel="stylesheet" href="css/photoswipe.skin.css">
<script src="js/photoswipe.js" type="text/javascript"></script>
<script src="js/photoswipe.ui.js" type="text/javascript"></script>

4. Include Photoswipe HTML

This needs to be included at the end of the page.

            
<!-- photoswipe elements -->

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>
<!-- end of photoswipe elements -->

5. Include last bits of photoswipe and Flick js code

(I promise, this is the last one).

            
<script src="js/flickr.fetch.js" type="text/javascript"></script>
<script src="js/photoswipe.after.html.js" type="text/javascript"></script>

6. Specify where to put the album

The elements inside the div will be created automatically. Just call the prepareFlickrAlbum function and specify the ID of the flickr album, div id and number of pictures to get from the album.

            
<div class="image-container" id="images1" itemscope="" itemtype="http://schema.org/ImageGallery" data-pswp-uid="1"></div>
<div class="image-container" id="images2" itemscope="" itemtype="http://schema.org/ImageGallery" data-pswp-uid="2"></div>
<script type="text/javascript">
    $(document).ready(function(){
          prepareFlickrAlbum("72157657489437146", "images1", 20);
          prepareFlickrAlbum("72157641414241043", "images2", 20);
    });
</script>

Known bugs

Unknown bugs