Expandable Image Gallery

by bizamajig

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<div class="row">
  <section class="col-xs-4 cd-single-item">
		<div class="cd-slider-wrapper">
			<ul class="cd-slider">
				<li class="selected"><img src="https://codyhouse.co/demo/expandable-image-gallery/img/img-1.jpg" alt="Product Image 1"></li>
				<li><img src="https://codyhouse.co/demo/expandable-image-gallery/img/img-2.jpg" alt="Product Image 1"></li>
				<li><img src="https://codyhouse.co/demo/expandable-image-gallery/img/img-3.jpg" alt="Product Image 2"></li>
			</ul> <!-- cd-slider -->

			<ul class="cd-slider-navigation">
				<li><a href="#0" class="cd-prev inactive">Next</a></li>
				<li><a href="#0" class="cd-next">Prev</a></li>
			</ul> <!-- cd-slider-navigation -->

			<a href="#0" class="cd-close">Close</a>
		</div> <!-- cd-slider-wrapper -->

		<div class="cd-item-info">
		</div> <!-- cd-item-info -->

  </section> <!-- cd-single-item -->
  <section class="col-xs-4 cd-single-item">
		<div class="cd-slider-wrapper">
			<ul class="cd-slider">
				<li class="selected"><img src="https://codyhouse.co/demo/expandable-image-gallery/img/img-1.jpg" alt="Product Image 1"></li>
				<li><img src="https://codyhouse.co/demo/expandable-image-gallery/img/img-2.jpg" alt="Product Image 1"></li>
				<li><img src="https://codyhouse.co/demo/expandable-image-gallery/img/img-3.jpg" alt="Product Image 2"></li>
			</ul> <!-- cd-slider -->

			<ul class="cd-slider-navigation">
				<li><a href="#0" class="cd-prev inactive">Next</a></li>
				<li><a href="#0" class="cd-next">Prev</a></li>
			</ul> <!-- cd-slider-navigation -->

			<a href="#0" class="cd-close">Close</a>
		</div> <!-- cd-slider-wrapper -->

		<div class="cd-item-info">
		</div> <!-- cd-item-info -->

  </section> <!-- cd-single-item -->
  <section class="col-xs-4 cd-single-item">
		<div class="cd-slider-wrapper">
			<ul class="cd-slider">
				<li class="selected"><img...

CSS

/* -------------------------------- 

Main Components 

-------------------------------- */
header {
  position: relative;
  height: 170px;
  line-height: 170px;
  text-align: center;
  background: #513e5d;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
header h1 {
  font-size: 2rem;
  color: #ffffff;
}
@media only screen and (min-width: 768px) {
  header {
    height: 200px;
    line-height: 200px;
  }
  header h1 {
    font-size: 2.6rem;
  }
}

.cd-single-item {
  position: relative;
  background: #ffffff;
}

.cd-slider-wrapper {
  position: relative;
  z-index: 1;
  -webkit-transition: width 0.4s;
  -moz-transition: width 0.4s;
  transition: width 0.4s;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: width;
}
/*
@media only screen and (min-width: 1024px) {
*/
  .cd-slider-wrapper {
    width: 50%;
  }
  .cd-slider-active .cd-slider-wrapper {
    width: 100%;
  }
/*
}
*/

.cd-slider {
  position: relative;
  z-index: 1;
  overflow: hidden;
  list-style: none;
}
.cd-slider::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'xxx-mobile';
  display: none;
}
.cd-slider li {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-slider li img {
  display: block;
  width: 100%;
}
.cd-slider li.selected {
  position: relative;
  z-index: 2;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform:...

JavaScript

$('.cd-single-item').each( function( i ) { // we simply want to use .each() for $(this) convenience
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//				Validate Input
//
/*
var $element = $('.cd-single-item'),
		slides = $('.cd-slider li'),
		slidesWrapper = $('.cd-slider'),
		// create slider pagination
		sliderPagination = createSliderPagination(slides);
*/
		var $element														= $(this),
				slides 															= $element.find('.cd-slider li'),
				slidesWrapper 											= $element.find('.cd-slider'),
				// create slider pagination
				sliderPagination 										= createSliderPagination(slides);
console.log('Slides object =', slides)

	slidesWrapper.on('click', function(event){
		//enlarge slider images 
		if( !$element.hasClass('cd-slider-active') && $(event.target).is('.cd-slider')) {
			$element.addClass('cd-slider-active').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
				$('body,html').animate({'scrollTop':slidesWrapper.offset().top}, 200);
			});
		}
	});

  $element.find('.cd-slider-wrapper .cd-close').on('click', function(){
		//shrink slider images 
		$element.removeClass('cd-slider-active');
	});

	//update visible slide
	$element.find('.cd-next').on('click', function(){
		nextSlide();
	});

	$element.find('.cd-prev').on('click', function(){
		prevSlide();
	});

	$(document).keyup(function(event){
		if(event.which=='37' && $element.hasClass('cd-slider-active') && !$('.cd-slider .selected').is(':first-child')) {
			prevSlide();
		} else if( event.which=='39' && $element.hasClass('cd-slider-active') && !$('.cd-slider .selected').is(':last-child')) {
			nextSlide();
		} else if(event.which=='27') {
			$element.removeClass('cd-slider-active');
		}
	});

	slidesWrapper.on('swipeleft', function(){
		var bool = enableSwipe();
		if(!$('.cd-slider .selected').is(':last-child') && bool)...