宝丽来照片库插件中的jQuery prev / next按钮

Question

I am using a polaroid image gallery plugin. The way it works, the polaroid images are scattered in a div and it has some circle nav buttons at the bottom that can be clicked to make the selected image active and moves it to the middle.

Instead of having circle nav buttons for selecting each image, I wanted to use prev/next buttons (this way it won't show 20+ circle nav icons when the gallery has more than 20 photos).

I was able to add some prev/next buttons and get them working, but there is one slight issue I cannot figure out. When the gallery loads, if you select the prev/next buttons, the gallery works as intended, it will switch the photos as necessary when the buttons are clicked. However, if the user clicks anywhere in the gallery (not on the buttons) it will shuffle all of the photos (it should not shuffle), then once a user does this, the prev/next buttons no longer work until the page is refreshed.

I am still learning jQuery/js and I cannot figure out what is causing this. I need to restrict the shuffling and selecting of the photos only when the prev/next buttons are selected because if a user accidentally clicks anywhere in the gallery, the buttons break.

I created a jsfiddle here .

The html is pretty straight forward, here is an example with the prev/next buttons I added:

<section id="photostack-1" class="photostack photostack-start">
  <div>
        <figure>
            <a href="" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/5.jpg" alt="img05"/></a>
            <figcaption>
               <h2 class="photostack-title">Speed Racer</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/2.jpg" alt="img02"/></a>
            <figcaption>
                <h2 class="photostack-title">Happy Days</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/3.jpg" alt="img03"/></a>
            <figcaption>
                <h2 class="photostack-title">Beautywood</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/1.jpg" alt="img01"/></a>
            <figcaption>
                <h2 class="photostack-title">Serenity Beach</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/4.jpg" alt="img04"/></a>
            <figcaption>
                <h2 class="photostack-title">Heaven of time</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/6.jpg" alt="img06"/></a>
            <figcaption>
                <h2 class="photostack-title">Forever this</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/7.jpg" alt="img07"/></a>
            <figcaption>
                <h2 class="photostack-title">Lovely Green</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/8.jpg" alt="img08"/></a>
            <figcaption>
                <h2 class="photostack-title">Wonderful</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/9.jpg" alt="img09"/></a>
            <figcaption>
                <h2 class="photostack-title">Love Addict</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/10.jpg" alt="img10"/></a>
            <figcaption>
                <h2 class="photostack-title">Friendship</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/11.jpg" alt="img11"/></a>
            <figcaption>
                <h2 class="photostack-title">White Nights</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/12.jpg" alt="img12"/></a>
            <figcaption>
                <h2 class="photostack-title">Serendipity</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/13.jpg" alt="img13"/></a>
            <figcaption>
                <h2 class="photostack-title">Pure Soul</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/14.jpg" alt="img14"/></a>
            <figcaption>
                <h2 class="photostack-title">Winds of Peace</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/15.jpg" alt="img15"/></a>
            <figcaption>
                <h2 class="photostack-title">Shades of blue</h2>
            </figcaption>
        </figure>
        <figure>
            <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/16.jpg" alt="img16"/></a>
            <figcaption>
                <h2 class="photostack-title">Lightness</h2>
            </figcaption>
        </figure>
    </div>
    <!-- Next and Previous controls -->
    <div id="imageControls">
        <button id="leftArrowGallery" class="btnGallery"><i class="fa fa-chevron-left"></i></button>
        <button id="rightArrowGallery" class="btnGallery"><i class="fa fa-chevron-right"></i></button>
    </div>
</section>

The custom jQuery used to add the prev/next buttons and remove the circle nav icons is:

var ps = new Photostack( document.getElementById( 'photostack-1' ), {});
        $("#leftArrowGallery").prependTo($(".photostack > nav"));
        $("#rightArrowGallery").appendTo($(".photostack > nav"));

        $("#leftArrowGallery").on("click", function () {
            ps.navigate('prev');
        });

        $("#rightArrowGallery").on("click", function () {
            ps.navigate('next');
        });

        $(".photostack > nav > span").each(function(){ $(this).remove(); });

You can view all of the js for the plugin in the jsfiddle.

Screenshot example of original gallery with circle nav icons:

Screenshot example of gallery with custom prev/next buttons added:

Again, the buttons are working correctly, I just need to prevent when someone clicks anywhere in the gallery, it shuffles the images then the prev/next buttons break and no longer work until the page is refreshed.

Thank you for your help!

Answer 1

I read your code and I found out that the biggest problem when you put photostack-start class is that every time you click on photostack stage you schuffle your photos twice: once in _photoShow function and once in open function (open function is triggered every time). To resolve your problem, a solution could be to stop one schuffled action. To do this I created a variable and I put it in open function:

if( this.open ) {
    return false;
}
this.open = true;

Now, _open function is triggered only once (when you click on button "view gallery") and after that only _photoShow works so your code works finally as you want.

BE CAREFUL : In this example I removed some pics 'cause I have a character limit here (30000), but the code will work anyway also with more pics.

A fiddle with more pics: https://jsfiddle.net/m46cxkhg/217/ (tested with Chrome and Firefox)

 ;( function( window ) { 'use strict'; Modernizr.addTest('csstransformspreserve3d', function () { var prop = Modernizr.prefixed('transformStyle'); var val = 'preserve-3d'; var computedStyle; if(!prop) return false; prop = prop.replace(/([AZ])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-'); Modernizr.testStyles('#modernizr{' + prop + ':' + val + ';}', function (el, rule) { computedStyle = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : ''; }); return (computedStyle === val); }); var support = { transitions : Modernizr.csstransitions, preserve3d : Modernizr.csstransformspreserve3d }, transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ]; function extend( a, b ) { for( var key in b ) { if( b.hasOwnProperty( key ) ) { a[key] = b[key]; } } return a; } function shuffleMArray( marray ) { var arr = [], marrlen = marray.length, inArrLen = marray[0].length; for(var i = 0; i < marrlen; i++) { arr = arr.concat( marray[i] ); } arr = shuffleArr( arr ); var newmarr = [], pos = 0; for( var j = 0; j < marrlen; j++ ) { var tmparr = []; for( var k = 0; k < inArrLen; k++ ) { tmparr.push( arr[ pos ] ); pos++; } newmarr.push( tmparr ); } return newmarr; } function shuffleArr( array ) { var m = array.length, t, i; while (m) { i = Math.floor(Math.random() * m--); t = array[m]; array[m] = array[i]; array[i] = t; } return array; } function Photostack( el, options ) { this.el = el; this.inner = this.el.querySelector( 'div' ); this.allItems = [].slice.call( this.inner.children ); this.allItemsCount = this.allItems.length; if( !this.allItemsCount ) return; this.items = [].slice.call( this.inner.querySelectorAll( 'figure:not([data-dummy])' ) ); this.itemsCount = this.items.length; this.options = extend( {}, this.options ); extend( this.options, options ); this.current = this.options.start; this._init(); var ps = this; return { showPhoto: function(idx) { ps._showPhoto.call(ps, idx); }, open: function() { ps._open.call(ps, true); }, navigate: function(dir) { ps._navigate.call(ps, dir); }, } } Photostack.prototype.options = { start: 0, showNavigation: true, afterInit: null, afterShowPhoto: null, afterNavigate: null }; Photostack.prototype._init = function() { this.currentItem = this.items[ this.current ]; if(this.options.showNavigation) { this._addNavigation(); } this._getSizes(); this._initEvents(); if(this.options.afterInit) { this.options.afterInit(this); } } Photostack.prototype._addNavigation = function() { // add nav dots this.nav = document.createElement( 'nav' ) var inner = ''; for( var i = 0; i < this.itemsCount; ++i ) { inner += '<span></span>'; } this.nav.innerHTML = inner; this.el.appendChild( this.nav ); this.navDots = [].slice.call( this.nav.children ); } Photostack.prototype._open = function( beforeStep ) { /* I added this */ if( this.open ) { return false; } this.open = true; /* End of change */ var self = this, el = this.el; var setTransition = function() { if( support.transitions ) { classie.addClass( el, 'photostack-transition' ); } } if( beforeStep ) { el.removeEventListener( 'click', open ); classie.removeClass( el, 'photostack-start' ); setTransition(); } else { self.openDefault = true; setTimeout( setTransition, 25 ); } self.started = true; self._showPhoto( self.current ); }; Photostack.prototype._initEvents = function() { if(this.options.clickToFlip == 'true') { this.items.forEach(function(img, idx){ img.addEventListener('click', function(event){ event.preventDefault(); if( idx === self.current ) { self._rotateItem(); } }) }); } var self = this, beforeStep = classie.hasClass( this.el, 'photostack-start' ); if( beforeStep ) { this._shuffle(); this.el.addEventListener( 'click', function() { self._open(beforeStep); }); } else { this._open(beforeStep); } if(this.options.showNavigation) { this.navDots.forEach( function( dot, idx ) { dot.addEventListener( 'click', function() { if( idx === self.current ) { self._rotateItem(); } else { // if the photo is flipped then rotate it back before shuffling again var callback = function() { self._showPhoto( idx ); } if( self.flipped ) { self._rotateItem( callback ); } else { callback(); } } } ); } ); } window.addEventListener( 'resize', function() { self._resizeHandler(); } ); } Photostack.prototype._resizeHandler = function() { var self = this; function delayed() { self._resize(); self._resizeTimeout = null; } if ( this._resizeTimeout ) { clearTimeout( this._resizeTimeout ); } this._resizeTimeout = setTimeout( delayed, 100 ); } Photostack.prototype._resize = function() { var self = this, callback = function() { self._shuffle( true ); } this._getSizes(); if( this.started && this.flipped ) { this._rotateItem( callback ); } else { callback(); } } Photostack.prototype._showPhoto = function( pos ) { if( this.isShuffling ) { return false; } this.isShuffling = true; // if there is something behind.. if( classie.hasClass( this.currentItem, 'photostack-flip' ) ) { this._removeItemPerspective(); if(this.options.showNavigation) { classie.removeClass( this.navDots[ this.current ], 'flippable' ); } } if(this.options.showNavigation) { classie.removeClass( this.navDots[ this.current ], 'current' ); } classie.removeClass( this.currentItem, 'photostack-current' ); // change current this.current = pos; this.currentItem = this.items[ this.current ]; if(this.options.showNavigation) { classie.addClass( this.navDots[ this.current ], 'current' ); } // if there is something behind.. if( this.options.showNavigation && this.currentItem.querySelector( '.photostack-back' ) ) { // nav dot gets class flippable classie.addClass( this.navDots[ pos ], 'flippable' ); } // shuffle a bit this._shuffle(); if(this.options.afterShowPhoto) { this.options.afterShowPhoto(this); } } // display items (randomly) Photostack.prototype._shuffle = function( resize ) { var iter = resize ? 1 : this.currentItem.getAttribute( 'data-shuffle-iteration' ) || 1; if( iter <= 0 || !this.started || this.openDefault ) { iter = 1; } // first item is open by default if( this.openDefault ) { // change transform-origin classie.addClass( this.currentItem, 'photostack-flip' ); this.openDefault = false; this.isShuffling = false; } var overlapFactor = .5, // lines & columns lines = Math.ceil(this.sizes.inner.width / (this.sizes.item.width * overlapFactor) ), columns = Math.ceil(this.sizes.inner.height / (this.sizes.item.height * overlapFactor) ), // since we are rounding up the previous calcs we need to know how much more we are adding to the calcs for both x and y axis addX = lines * this.sizes.item.width * overlapFactor + this.sizes.item.width/2 - this.sizes.inner.width, addY = columns * this.sizes.item.height * overlapFactor + this.sizes.item.height/2 - this.sizes.inner.height, // we will want to center the grid extraX = addX / 2, extraY = addY / 2, // max and min rotation angles maxrot = 35, minrot = -35, self = this, // translate/rotate items moveItems = function() { --iter; // create a "grid" of possible positions var grid = []; // populate the positions grid for( var i = 0; i < columns; ++i ) { var col = grid[ i ] = []; for( var j = 0; j < lines; ++j ) { var xVal = j * (self.sizes.item.width * overlapFactor) - extraX, yVal = i * (self.sizes.item.height * overlapFactor) - extraY, olx = 0, oly = 0; if( self.started && iter === 0 ) { var ol = self._isOverlapping( { x : xVal, y : yVal } ); if( ol.overlapping ) { olx = ol.noOverlap.x; oly = ol.noOverlap.y; var r = Math.floor( Math.random() * 3 ); switch(r) { case 0 : olx = 0; break; case 1 : oly = 0; break; } } } col[ j ] = { x : xVal + olx, y : yVal + oly }; } } // shuffle grid = shuffleMArray(grid); var l = 0, c = 0, cntItemsAnim = 0; self.allItems.forEach( function( item, i ) { // pick a random item from the grid if( l === lines - 1 ) { c = c === columns - 1 ? 0 : c + 1; l = 1; } else { ++l } var randXPos = Math.floor( Math.random() * lines ), randYPos = Math.floor( Math.random() * columns ), gridVal = grid[c][l-1], translation = { x : gridVal.x, y : gridVal.y }, onEndTransitionFn = function() { ++cntItemsAnim; if( support.transitions ) { this.removeEventListener( transEndEventName, onEndTransitionFn ); } if( cntItemsAnim === self.allItemsCount ) { if( iter > 0 ) { moveItems.call(); } else { // change transform-origin classie.addClass( self.currentItem, 'photostack-flip' ); // all done.. self.isShuffling = false; if( typeof self.options.callback === 'function' ) { self.options.callback( self.currentItem ); } } } }; if(self.items.indexOf(item) === self.current && self.started && iter === 0) { self.currentItem.style.WebkitTransform = 'translate(' + self.centerItem.x + 'px,' + self.centerItem.y + 'px) rotate(0deg)'; self.currentItem.style.msTransform = 'translate(' + self.centerItem.x + 'px,' + self.centerItem.y + 'px) rotate(0deg)'; self.currentItem.style.transform = 'translate(' + self.centerItem.x + 'px,' + self.centerItem.y + 'px) rotate(0deg)'; // if there is something behind.. if( self.currentItem.querySelector( '.photostack-back' ) ) { self._addItemPerspective(); } classie.addClass( self.currentItem, 'photostack-current' ); } else { item.style.WebkitTransform = 'translate(' + translation.x + 'px,' + translation.y + 'px) rotate(' + Math.floor( Math.random() * (maxrot - minrot + 1) + minrot ) + 'deg)'; item.style.msTransform = 'translate(' + translation.x + 'px,' + translation.y + 'px) rotate(' + Math.floor( Math.random() * (maxrot - minrot + 1) + minrot ) + 'deg)'; item.style.transform = 'translate(' + translation.x + 'px,' + translation.y + 'px) rotate(' + Math.floor( Math.random() * (maxrot - minrot + 1) + minrot ) + 'deg)'; } if( self.started ) { if( support.transitions ) { item.addEventListener( transEndEventName, onEndTransitionFn ); } else { onEndTransitionFn(); } } } ); }; moveItems.call(); } Photostack.prototype._navigate = function(dir) { var current = this.current, itemsCount = this.itemsCount, lastItem = itemsCount - 1, idx = 0; if(dir == 'next') { idx = current < lastItem ? current + 1 : 0 } else if(dir == 'prev') { idx = current > 0 ? current - 1 : lastItem; } this._showPhoto(idx); if(this.options.afterNavigate) { this.options.afterNavigate(this); } } Photostack.prototype._getSizes = function() { this.sizes = { inner : { width : this.inner.offsetWidth, height : this.inner.offsetHeight }, item : { width : this.currentItem.offsetWidth, height : this.currentItem.offsetHeight } }; // translation values to center an item this.centerItem = { x : this.sizes.inner.width / 2 - this.sizes.item.width / 2, y : this.sizes.inner.height / 2 - this.sizes.item.height / 2 }; } Photostack.prototype._isOverlapping = function( itemVal ) { var dxArea = this.sizes.item.width + this.sizes.item.width / 3, // adding some extra avoids any rotated item to touch the central area dyArea = this.sizes.item.height + this.sizes.item.height / 3, areaVal = { x : this.sizes.inner.width / 2 - dxArea / 2, y : this.sizes.inner.height / 2 - dyArea / 2 }, dxItem = this.sizes.item.width, dyItem = this.sizes.item.height; if( !(( itemVal.x + dxItem ) < areaVal.x || itemVal.x > ( areaVal.x + dxArea ) || ( itemVal.y + dyItem ) < areaVal.y || itemVal.y > ( areaVal.y + dyArea )) ) { // how much to move so it does not overlap? // move left / or move right var left = Math.random() < 0.5, randExtraX = Math.floor( Math.random() * (dxItem/4 + 1) ), randExtraY = Math.floor( Math.random() * (dyItem/4 + 1) ), noOverlapX = left ? (itemVal.x - areaVal.x + dxItem) * -1 - randExtraX : (areaVal.x + dxArea) - (itemVal.x + dxItem) + dxItem + randExtraX, noOverlapY = left ? (itemVal.y - areaVal.y + dyItem) * -1 - randExtraY : (areaVal.y + dyArea) - (itemVal.y + dyItem) + dyItem + randExtraY; return { overlapping : true, noOverlap : { x : noOverlapX, y : noOverlapY } } } return { overlapping : false } } Photostack.prototype._addItemPerspective = function() { classie.addClass( this.el, 'photostack-perspective' ); } Photostack.prototype._removeItemPerspective = function() { classie.removeClass( this.el, 'photostack-perspective' ); classie.removeClass( this.currentItem, 'photostack-flip' ); } Photostack.prototype._rotateItem = function( callback ) { if( classie.hasClass( this.el, 'photostack-perspective' ) && !this.isRotating && !this.isShuffling ) { this.isRotating = true; var self = this, onEndTransitionFn = function() { if( support.transitions && support.preserve3d ) { this.removeEventListener( transEndEventName, onEndTransitionFn ); } self.isRotating = false; if( typeof callback === 'function' ) { callback(); } }; if( this.flipped ) { if(this.options.showNavigation) { classie.removeClass( this.navDots[ this.current ], 'flip' ); } if( support.preserve3d ) { this.currentItem.style.WebkitTransform = 'translate(' + this.centerItem.x + 'px,' + this.centerItem.y + 'px) rotateY(0deg)'; this.currentItem.style.transform = 'translate(' + this.centerItem.x + 'px,' + this.centerItem.y + 'px) rotateY(0deg)'; } else { classie.removeClass( this.currentItem, 'photostack-showback' ); } } else { if(this.options.showNavigation) { classie.addClass( this.navDots[ this.current ], 'flip' ); } if( support.preserve3d ) { this.currentItem.style.WebkitTransform = 'translate(' + this.centerItem.x + 'px,' + this.centerItem.y + 'px) translate(' + this.sizes.item.width + 'px) rotateY(-179.9deg)'; this.currentItem.style.transform = 'translate(' + this.centerItem.x + 'px,' + this.centerItem.y + 'px) translate(' + this.sizes.item.width + 'px) rotateY(-179.9deg)'; } else { classie.addClass( this.currentItem, 'photostack-showback' ); } } this.flipped = !this.flipped; if( support.transitions && support.preserve3d ) { this.currentItem.addEventListener( transEndEventName, onEndTransitionFn ); } else { onEndTransitionFn(); } } } // add to global namespace window.Photostack = Photostack; })( window ); var ps = new Photostack( document.getElementById( 'photostack-1' ), {}); $("#leftArrowGallery").prependTo($(".photostack > nav")); $("#rightArrowGallery").appendTo($(".photostack > nav")); $("#leftArrowGallery").on("click", function () { ps.navigate('prev'); }); $("#rightArrowGallery").on("click", function () { ps.navigate('next'); }); $(".photostack > nav > span").each(function(){ $(this).remove(); }); 

 .photostack { background: #ddd; position: relative; text-align: center; overflow: hidden; } .js .photostack { height: 580px; } .photostack-start { cursor: pointer; } .photostack > div { width: 100%; height: 100%; margin: 0 auto; } .photostack figure { width: 320px; height: 360px; position: relative; display: inline-block; background: #fff; padding: 40px; text-align: center; margin: 5px; } .js .photostack figure { position: absolute; display: block; margin: 0; } .photostack figcaption h2 { margin: 20px 0 0 0; color: #a7a0a2; font-size: 16px; } .photostack-img { outline: none; width: 240px; height: 240px; background: #f9f9f9; } .photostack-back { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #fff; font-family: "Give You Glory", cursive; color: #a7a0a2; padding: 50px 40px; text-align: left; font-size: 22px; line-height: 1.25; z-index: 1; } .photostack-back p { margin: 0; } .photostack-back p span { text-decoration: line-through; } .photostack nav { position: absolute; width: 100%; bottom: 30px; z-index: 90; text-align: center; left: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .photostack-start nav { opacity: 0; } .photostack nav span { position: relative; display: inline-block; margin: 0 5px; width: 30px; height: 30px; cursor: pointer; background: #aaa; border-radius: 50%; text-align: center; -webkit-transition: -webkit-transform 0.6s ease-in-out, background 0.3s; transition: transform 0.6s ease-in-out, background 0.3s; -webkit-transform: scale(0.48); transform: scale(0.48); } .photostack nav span:last-child { margin-right: 0; } .photostack nav span::after { content: "\\e600"; font-family: 'icons'; font-size: 80%; speak: none; display: inline-block; vertical-align: top; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 30px; color: #fff; opacity: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .photostack nav span.current { background: #888; -webkit-transform: scale(1); transform: scale(1); } .photostack nav span.current.flip { -webkit-transform: scale(1) rotateY(-180deg) translateZ(-1px); transform: scale(1) rotateY(-180deg) translateZ(-1px); background: #555; } .photostack nav span.flippable::after { opacity: 1; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .js .photostack::before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.5); top: 0; left: 0; z-index: 100; -webkit-transition: opacity 0.3s, visibility 0s 0.3s; transition: opacity 0.3s, visibility 0s 0.3s; } .js .photostack-start::before { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .js .photostack::after { content: 'View Gallery'; font-weight: 400; position: absolute; border: 3px solid #fff; text-align: center; white-space: nowrap; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); padding: 10px 20px; color: #fff; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; z-index: 101; } .js .photostack::before, .js .photostack::after { opacity: 0; visibility: hidden; } .js .photostack-start::before, .js .photostack-start:hover::after, .touch .photostack-start::after { opacity: 1; visibility: visible; } .photostack figure::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; visibility: visible; opacity: 1; background: rgba(0,0,0,0.05); -webkit-transition: opacity 0.6s; transition: opacity 0.6s; } figure.photostack-current::after { -webkit-transition: opacity 0.6s, visibility 0s 0.6s; transition: opacity 0.6s, visibility 0s 0.6s; opacity: 0; visibility: hidden; } .photostack-transition figure { -webkit-transition: -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; } .photostack-perspective { -webkit-perspective: 1800px; perspective: 1800px; } .photostack-perspective > div, .photostack-perspective figure { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .photostack-perspective figure, .photostack-perspective figure div { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .photostack-perspective figure.photostack-flip { -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } .csstransformspreserve3d figure.photostack-flip .photostack-back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); display: block; } .no-csstransformspreserve3d figure.photostack-showback .photostack-back { display: block; } .no-js .photostack figure { box-shadow: -2px 2px 0 rgba(0,0,0,0.05); } .no-js .photostack figure::after { display: none; } .no-js .photostack figure:nth-child(3n) { -webkit-transform: translateX(-10%) rotate(5deg); transform: translateX(-10%) rotate(5deg); } .no-js .photostack figure:nth-child(3n-2) { -webkit-transform: translateY(10%) rotate(-3deg); transform: translateY(10%) rotate(-3deg); } #photostack-1 nav span.current { background: #888; -webkit-transform: scale(0.61); transform: scale(0.61); } #leftArrowGallery { margin-right: 10px; } #rightArrowGallery { margin-left: 10px; } #rightArrowGallery i { padding-left: 5px; } #leftArrowGallery i { padding-right: 5px; } .btnGallery { background-color: #da2c33; border: medium none; color: #FFFFFF; cursor: pointer; display: inline-block; font: 12px; padding: 3px 6px; text-decoration: none; white-space: nowrap; border-radius: 5px; } .btnGallery:hover { background-color: #b20a11; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" type="text/css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section id="photostack-1" class="photostack photostack-start"> <div> <figure> <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/5.jpg" alt="img05"/></a> <figcaption> <h2 class="photostack-title">Speed Racer</h2> </figcaption> </figure> <figure> <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/2.jpg" alt="img02"/></a> <figcaption> <h2 class="photostack-title">Happy Days</h2> </figcaption> </figure> <figure> <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/3.jpg" alt="img03"/></a> <figcaption> <h2 class="photostack-title">Beautywood</h2> </figcaption> </figure> <figure> <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/1.jpg" alt="img01"/></a> <figcaption> <h2 class="photostack-title">Serenity Beach</h2> </figcaption> </figure> <figure> <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/4.jpg" alt="img04"/></a> <figcaption> <h2 class="photostack-title">Heaven of time</h2> </figcaption> </figure> <figure> <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/6.jpg" alt="img06"/></a> <figcaption> <h2 class="photostack-title">Forever this</h2> </figcaption> </figure> <figure> <a href="#" class="photostack-img"><img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/7.jpg" alt="img07"/></a> <figcaption> <h2 class="photostack-title">Lovely Green</h2> </figcaption> </figure> </div> <div id="imageControls"> <button id="leftArrowGallery" class="btnGallery"><i class="fa fa-chevron-left"></i></button> <button id="rightArrowGallery" class="btnGallery"><i class="fa fa-chevron-right"></i></button> </div> </section>