宝丽来照片库插件中的jQuery上一个/下一个按钮

Question

我正在使用宝丽来图片库插件。宝丽来图像的工作方式是分散在div中，底部有一些圆形导航按钮，可以单击这些按钮以使选定的图像处于活动状态并将其移到中间。

我没有使用环形导航按钮来选择每个图像，而是想使用上一个/下一个按钮（这样，当图库中有超过20张照片时，它将不显示20个以上的圆形导航图标）。

我能够添加一些上一个/下一个按钮并使它们正常工作，但是有一个小问题我无法弄清楚。画廊加载后，如果选择上一个/下一个按钮，则画廊将按预期工作，单击按钮时将根据需要切换照片。但是，如果用户单击图库中的任意位置（不在按钮上），它将随机播放所有照片（不应随机播放），然后，一旦用户这样做，则上一页/下一页按钮将不再起作用，直到刷新页面为止。

我仍在学习jQuery / js，但我不知道是什么原因造成的。仅当选择上一个/下一个按钮时，我才需要限制照片的拖曳和选择，因为如果用户不小心单击了图库中的任何位置，按钮就会中断。

我创建了一个jsfiddle here。

html非常简单，这是我添加的上一个/下一个按钮的示例：

<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>

用于添加上一个/下一个按钮并删除圆形导航图标的自定义jQuery是：

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(); });

您可以在jsfiddle中查看该插件的所有js。

带有圆圈导航图标的原始图库的屏幕截图示例：

添加自定义上一个/下一个按钮的画廊的屏幕截图示例：

同样，按钮正常工作，我只需要防止有人单击图库中的任何地方时，它会随机播放图像，然后上一个/下一个按钮会损坏，并且在刷新页面之前不再起作用。

谢谢您的帮助！

Answer 1

我阅读了您的代码，发现当您进入photostack-start类时，最大的问题是每次您单击照片堆栈阶段时，都会随机排列两次照片：一次在_photoShow函数中，一次在open功能（每次都会触发打开功能）。要解决您的问题，一种解决方案可能是停止一项混乱的操作。为此，我创建了一个变量并将其放入开放函数中：

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

现在，_open函数仅被触发一次（当您单击按钮“查看图库”时），此后只有_photoShow起作用，因此您的代码最终可以按需要工作。

请小心：在此示例中，我删除了一些图片，因为这里的字符数限制为（30000），但是该代码也可以在更多图片中使用。

带有更多图片的小提琴：https://jsfiddle.net/m46cxkhg/217/（已通过Chrome和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(/([A-Z])/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>