<html>
  <head></head>
  <body>
    <h4>Responsive gallery</h4>
    <p>Simple proof of concept for responsive image gallery that works regardless of the image size.</p>
    <div class="imageGallery">
      <ul>
        <li class="prev"><img src="http://kbrabrand.no/assets/codepen/responsiveGallery/raster-prev.png"/></li>
        <li class="next"><img src="http://kbrabrand.no/assets/codepen/responsiveGallery/raster-next.png"/></li>
        <li class="image">
          <img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg"/>
        </li>
        <li class="image active">
          <img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg"/>
        </li>
        <li class="image">
          <img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg"/>
        </li>
        <li class="image">
          <img src="http://farm3.staticflickr.com/2856/9207329420_7f2a668b06_o.jpg"/>  
        </li>
      </ul>
    </div>
  </body>
</html>
@import "compass/css3";

.clearfix {
    zoom: 1;
    &:before, &:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    &:after {
        clear: both;
    }
}

.imageGallery {
  ::selection { background: transparent; }
  ::-moz-selection { background: transparent; }
  
  ul {
    @extend .clearfix;
    
    position: relative;
    max-width: 750px;
    margin: 0 auto;
    padding: 0;
    
    list-style-type: none;
    
    li {
      display: none;
      text-align: center;
      background: #e7e7e7;
      
      &.prev, &.next {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        
        display: block;
        width: 22%;
        max-width: 200px;
        
        background: #fff;
        opacity: 0.5;
        z-index: 1000;
        cursor: pointer;
        
        img {
          width: 100%;
          margin-top: 80%;
        }
      }
      
      &.next {
        left: auto;
        right: 0;
      }
      
      &.active {
        display: block;
      }
      
      &.image img {
        max-width: 100%;
        max-height: 640px;
      }
    }
  }
}
View Compiled
$('li.next, li.prev').click(function(e) {
  var element = $(e.target).closest('li')
    , direction = (element.hasClass('prev') ? 'prev' : 'next')
    , activeImage = element.siblings('.active')
    , goTo;
  
  if (direction === 'prev') {
    goTo = activeImage.prev('.image');
  } else {
    goTo = activeImage.next('.image');
  }
  
  if (!goTo.length && direction === 'prev') {
    goTo = activeImage.siblings('.image').last();
  } else if (!goTo.length) {
    goTo = activeImage.siblings('.image').first();
  }
  
  goTo.addClass('active');
  activeImage.removeClass('active');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js