title: clicking on an image from a gallery and showing multiple images in the same page
body: <p>I have an image gallery and I want to click on each image to show 4 related image to it. What is the best way to do this without creating a whole new page for each image to show its related images?</p>
  
  <p>I am using this for image gallery:
  <a href="http://codepen.io/dimsemenov/pen/ZYbPJM" rel="nofollow noreferrer">http://codepen.io/dimsemenov/pen/ZYbPJM</a></p>
  
  <p>For now I have used Adobe InDesign to show the four images in one png file (due to space limits) but of course there are more aesthetic and smart ways. Please suggest solutions.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html &gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Imgur Results&lt;/title&gt;
  
  
    &lt;link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css'&gt;
  &lt;link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css'&gt;
  
        &lt;link rel="stylesheet" href="css/style.css"&gt;
  
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h2&gt;Banana:&lt;/h2&gt;
  
    &lt;div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery"&gt;
  
      &lt;figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"&gt;
        &lt;a href="imgur/banana/banana1.png" itemprop="contentUrl" data-size="900x900"&gt;
  
            &lt;img  src="imgur/banana/3NlNsLB.jpg" itemprop="thumbnail" alt="Image description"  /&gt;
  
        &lt;/a&gt;
  
      &lt;/figure&gt;
  
  
  
      &lt;figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"&gt;
        &lt;a href="imgur/banana/banana2.tif" itemprop="contentUrl" data-size="900x900"&gt;
            &lt;img src="imgur/banana/6gqpgDV.jpg" itemprop="thumbnail" alt="Image description" /&gt;
        &lt;/a&gt;
      &lt;/figure&gt;
  </code></pre>
  
  
  
  
  
      
      
  
      
      
  
          
          
          
              
              
              
          
  
          
          
  
              
  
                  
  
                  
  
                  
  
                  
  
                  
  
                  
  
                  
                  
                  
                      
                        
                          
                        
                      
                  
              
  
              
                   
              
  
              
              
  
              
              
  
              
                  
              
  
            
  
          
  
  <p>
    https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js'></p>
  
  
  
  <pre><code>&lt;script src="js/index.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Here's the js:</p>
  
  <pre><code>var initPhotoSwipeFromDOM = function(gallerySelector) {
  
      // parse slide data (url, title, size ...) from DOM elements 
      // (children of gallerySelector)
      var parseThumbnailElements = function(el) {
          var thumbElements = el.childNodes,
              numNodes = thumbElements.length,
              items = [],
              figureEl,
              linkEl,
              size,
              item;
  
          for(var i = 0; i &lt; numNodes; i++) {
  
              figureEl = thumbElements[i]; // &lt;figure&gt; element
  
              // include only element nodes 
              if(figureEl.nodeType !== 1) {
                  continue;
              }
  
              linkEl = figureEl.children[0]; // &lt;a&gt; element
  
              size = linkEl.getAttribute('data-size').split('x');
  
              // create slide object
              item = {
                  src: linkEl.getAttribute('href'),
                  w: parseInt(size[0], 10),
                  h: parseInt(size[1], 10)
              };
  
  
  
              if(figureEl.children.length &gt; 1) {
                  // &lt;figcaption&gt; content
                  item.title = figureEl.children[1].innerHTML; 
              }
  
              if(linkEl.children.length &gt; 0) {
                  // &lt;img&gt; thumbnail element, retrieving thumbnail url
                  item.msrc = linkEl.children[0].getAttribute('src');
              } 
  
              item.el = figureEl; // save link to element for getThumbBoundsFn
              items.push(item);
          }
  
          return items;
      };
  
      // find nearest parent element
      var closest = function closest(el, fn) {
          return el &amp;&amp; ( fn(el) ? el : closest(el.parentNode, fn) );
      };
  
      // triggers when user clicks on thumbnail
      var onThumbnailsClick = function(e) {
          e = e || window.event;
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
  
          var eTarget = e.target || e.srcElement;
  
          // find root element of slide
          var clickedListItem = closest(eTarget, function(el) {
              return (el.tagName &amp;&amp; el.tagName.toUpperCase() === 'FIGURE');
          });
  
          if(!clickedListItem) {
              return;
          }
  
          // find index of clicked item by looping through all child nodes
          // alternatively, you may define index via data- attribute
          var clickedGallery = clickedListItem.parentNode,
              childNodes = clickedListItem.parentNode.childNodes,
              numChildNodes = childNodes.length,
              nodeIndex = 0,
              index;
  
          for (var i = 0; i &lt; numChildNodes; i++) {
              if(childNodes[i].nodeType !== 1) { 
                  continue; 
              }
  
              if(childNodes[i] === clickedListItem) {
                  index = nodeIndex;
                  break;
              }
              nodeIndex++;
          }
  
  
  
          if(index &gt;= 0) {
              // open PhotoSwipe if valid index found
              openPhotoSwipe( index, clickedGallery );
          }
          return false;
      };
  
      // parse picture index and gallery index from URL (#&amp;pid=1&amp;gid=2)
      var photoswipeParseHash = function() {
          var hash = window.location.hash.substring(1),
          params = {};
  
          if(hash.length &lt; 5) {
              return params;
          }
  
          var vars = hash.split('&amp;');
          for (var i = 0; i &lt; vars.length; i++) {
              if(!vars[i]) {
                  continue;
              }
              var pair = vars[i].split('=');  
              if(pair.length &lt; 2) {
                  continue;
              }           
              params[pair[0]] = pair[1];
          }
  
          if(params.gid) {
              params.gid = parseInt(params.gid, 10);
          }
  
          return params;
      };
  
      var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
          var pswpElement = document.querySelectorAll('.pswp')[0],
              gallery,
              options,
              items;
  
          items = parseThumbnailElements(galleryElement);
  
          // define options (if needed)
          options = {
  
              // define gallery index (for URL)
              galleryUID: galleryElement.getAttribute('data-pswp-uid'),
  
              getThumbBoundsFn: function(index) {
                  // See Options -&gt; getThumbBoundsFn section of documentation for more info
                  var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                      pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                      rect = thumbnail.getBoundingClientRect(); 
  
                  return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
              }
  
          };
  
          // PhotoSwipe opened from URL
          if(fromURL) {
              if(options.galleryPIDs) {
                  // parse real index when custom PIDs are used 
                  // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
                  for(var j = 0; j &lt; items.length; j++) {
                      if(items[j].pid == index) {
                          options.index = j;
                          break;
                      }
                  }
              } else {
                  // in URL indexes start from 1
                  options.index = parseInt(index, 10) - 1;
              }
          } else {
              options.index = parseInt(index, 10);
          }
  
          // exit if index not found
          if( isNaN(options.index) ) {
              return;
          }
  
          if(disableAnimation) {
              options.showAnimationDuration = 0;
          }
  
          // Pass data to PhotoSwipe and initialize it
          gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
          gallery.init();
      };
  
      // loop through all gallery elements and bind events
      var galleryElements = document.querySelectorAll( gallerySelector );
  
      for(var i = 0, l = galleryElements.length; i &lt; l; i++) {
          galleryElements[i].setAttribute('data-pswp-uid', i+1);
          galleryElements[i].onclick = onThumbnailsClick;
      }
  
      // Parse URL and open gallery if it contains #&amp;pid=3&amp;gid=1
      var hashData = photoswipeParseHash();
      if(hashData.pid &amp;&amp; hashData.gid) {
          openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
      }
  };
  
  // execute above function
  initPhotoSwipeFromDOM('.my-gallery');
  </code></pre>
  
  <p>here's the CSS:</p>
  
  <pre><code>.my-gallery {
    width: 100%;
    float: left;
  }
  
  .my-gallery img {
    width: 200px;
    height: 200px;
    display: block;
  }
  .my-gallery figure {
    display: block;
    float: left;
    margin: 0px 15px 20px 0;
    border: 3px solid #000;
  
  }
  
  .my-gallery figcaption {
    display: none;
  }
  </code></pre>
  
  <p>Also is there an easier way to have this image gallery without using this library above? </p>
  
  <p>Basically I would like to show something like this when you click on an image:
  <a href="https://i.stack.imgur.com/gPZdS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gPZdS.png" alt="enter image description here"></a>
  ^ the above is made with adobe illustrator though and would be nice to make it with html/css.</p>
  
  <p>This is how the gallery itself shows:
  <a href="https://i.stack.imgur.com/BZP62.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BZP62.png" alt="enter image description here"></a></p>