Skip to content

Instantly share code, notes, and snippets.

@ttomdewit
Created November 23, 2016 11:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ttomdewit/dca66c20ca1e79710ba293bd7a19c8b0 to your computer and use it in GitHub Desktop.
Save ttomdewit/dca66c20ca1e79710ba293bd7a19c8b0 to your computer and use it in GitHub Desktop.
function photoswipe(gallerySelector) {
function parseElements(el) {
var elements = $(el).children('.gallery__item'),
numberOfElements = elements.length,
items = [],
slideElement,
linkElement,
size,
item;
for (var i = 0; i < numberOfElements; i++) {
var slideElement = elements[i];
var image = $(slideElement).data('source');
var size = $(slideElement).data('size').split('x');
item = {
src: image,
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
}
items.push(item);
}
return items;
};
function openPhotoSwipe() {
var pswpElement = $('.pswp')[0],
gallery,
options,
items = parseElements(gallerySelector);
options = {};
gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}
$('.gallery__item').click(function (e) {
e.preventDefault();
var index = $(this).data('index');
openPhotoSwipe();
});
}
@ttomdewit
Copy link
Author

ttomdewit commented Nov 23, 2016

// PhotoSwipe
photoswipe('.js-gallery');

// Slick
$('.js-gallery').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    draggable: false,
    fade: true,
    asNavFor: '.js-gallery-nav'
});

$('.js-gallery-nav').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    centerMode: true,
    arrows: false,
    asNavFor: '.js-gallery',
    focusOnSelect: true
});

@ttomdewit
Copy link
Author

<div class="container">
    <div class="row">
        <div class="col-full col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="gallery | js-gallery">
                <div class="gallery__item | js-gallery-item" data-size="1200x800" data-source="http://lorempixel.com/1200/800/sports/1" data-index="1" style="background-image: url('http://lorempixel.com/1200/800/sports/1');"></div><!-- /.gallery__item -->
                <div class="gallery__item | js-gallery-item" data-size="1200x800" data-source="http://lorempixel.com/1200/800/sports/2" data-index="2" style="background-image: url('http://lorempixel.com/1200/800/sports/2');"></div><!-- /.gallery__item -->
                <div class="gallery__item | js-gallery-item" data-size="1200x800" data-source="http://lorempixel.com/1200/800/sports/3" data-index="3" style="background-image: url('http://lorempixel.com/1200/800/sports/3');"></div><!-- /.gallery__item -->
                <div class="gallery__item | js-gallery-item" data-size="1200x800" data-source="http://lorempixel.com/1200/800/sports/4" data-index="4" style="background-image: url('http://lorempixel.com/1200/800/sports/4');"></div><!-- /.gallery__item -->
                <div class="gallery__item | js-gallery-item" data-size="1200x800" data-source="http://lorempixel.com/1200/800/sports/5" data-index="5" style="background-image: url('http://lorempixel.com/1200/800/sports/5');"></div><!-- /.gallery__item -->
                <div class="gallery__item | js-gallery-item" data-size="1200x800" data-source="http://lorempixel.com/1200/800/sports/6" data-index="6" style="background-image: url('http://lorempixel.com/1200/800/sports/6');"></div><!-- /.gallery__item -->
                <div class="gallery__item | js-gallery-item" data-size="1200x800" data-source="http://lorempixel.com/1200/800/sports/7" data-index="7" style="background-image: url('http://lorempixel.com/1200/800/sports/7');"></div><!-- /.gallery__item -->
            </div><!-- /.gallery -->

            <div class="gallery gallery--nav | js-gallery-nav">
                <div class="gallery__item gallery__item--nav" style="background-image: url('http://lorempixel.com/300/200/sports/1');"></div><!-- /.gallery__item -->
                <div class="gallery__item gallery__item--nav" style="background-image: url('http://lorempixel.com/300/200/sports/2');"></div><!-- /.gallery__item -->
                <div class="gallery__item gallery__item--nav" style="background-image: url('http://lorempixel.com/300/200/sports/3');"></div><!-- /.gallery__item -->
                <div class="gallery__item gallery__item--nav" style="background-image: url('http://lorempixel.com/300/200/sports/4');"></div><!-- /.gallery__item -->
                <div class="gallery__item gallery__item--nav" style="background-image: url('http://lorempixel.com/300/200/sports/5');"></div><!-- /.gallery__item -->
                <div class="gallery__item gallery__item--nav" style="background-image: url('http://lorempixel.com/300/200/sports/6');"></div><!-- /.gallery__item -->
                <div class="gallery__item gallery__item--nav" style="background-image: url('http://lorempixel.com/300/200/sports/7');"></div><!-- /.gallery__item -->
            </div><!-- /.gallery -->
        </div><!-- /.col-full col-xs-12 col-sm-12 col-md-12 col-lg-12 -->
    </div><!-- /.row -->
</div><!-- /.container -->

@ttomdewit
Copy link
Author

<div class="container">
            <div class="row">
                <div class="col-full col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="gallery | js-gallery">
                        <figure class="gallery__item | js-gallery-item"><a href="http://lorempixel.com/1200/800/sports/1" data-size="1200x800"><img src="http://lorempixel.com/1200/800/sports/1" /></a></figure>
                        <figure class="gallery__item | js-gallery-item"><a href="http://lorempixel.com/1200/800/sports/2" data-size="1200x800"><img src="http://lorempixel.com/1200/800/sports/2" /></a></figure>
                        <figure class="gallery__item | js-gallery-item"><a href="http://lorempixel.com/1200/800/sports/3" data-size="1200x800"><img src="http://lorempixel.com/1200/800/sports/3" /></a></figure>
                        <figure class="gallery__item | js-gallery-item"><a href="http://lorempixel.com/1200/800/sports/4" data-size="1200x800"><img src="http://lorempixel.com/1200/800/sports/4" /></a></figure>
                        <figure class="gallery__item | js-gallery-item"><a href="http://lorempixel.com/1200/800/sports/5" data-size="1200x800"><img src="http://lorempixel.com/1200/800/sports/5" /></a></figure>
                        <figure class="gallery__item | js-gallery-item"><a href="http://lorempixel.com/1200/800/sports/6" data-size="1200x800"><img src="http://lorempixel.com/1200/800/sports/6" /></a></figure>
                        <figure class="gallery__item | js-gallery-item"><a href="http://lorempixel.com/1200/800/sports/7" data-size="1200x800"><img src="http://lorempixel.com/1200/800/sports/7" /></a></figure>
                    </div><!-- /.gallery -->

                    <div class="gallery gallery--nav | js-gallery-nav">
                        <div class="gallery__item gallery__item--nav" style="background-image: url('http://lorempixel.com/300/200/sports/1');"></div><!-- /.gallery__item -->
                        <div class="gallery__item gallery__item--nav" style="background-image: url('http://lorempixel.com/300/200/sports/2');"></div><!-- /.gallery__item -->
                        <div class="gallery__item gallery__item--nav" style="background-image: url('http://lorempixel.com/300/200/sports/3');"></div><!-- /.gallery__item -->
                        <div class="gallery__item gallery__item--nav" style="background-image: url('http://lorempixel.com/300/200/sports/4');"></div><!-- /.gallery__item -->
                        <div class="gallery__item gallery__item--nav" style="background-image: url('http://lorempixel.com/300/200/sports/5');"></div><!-- /.gallery__item -->
                        <div class="gallery__item gallery__item--nav" style="background-image: url('http://lorempixel.com/300/200/sports/6');"></div><!-- /.gallery__item -->
                        <div class="gallery__item gallery__item--nav" style="background-image: url('http://lorempixel.com/300/200/sports/7');"></div><!-- /.gallery__item -->
                    </div><!-- /.gallery -->
                </div><!-- /.col-full col-xs-12 col-sm-12 col-md-12 col-lg-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment