title: Displaying multiple images in PrettyPhoto
body: <p>I am building a website, and on one of the pages is a section to show off some images. I thought that prettyPhoto looked good, and decided to use it. </p>
  
  <p>Right now I have a square 'box' in bootstrap with 2 col-md-4 rows (6 total). Each image has a hover state that changes on hover, showing a icon to click on, and from there prettyPhoto opens. </p>
  
  <p>I am not sure how to add multiple images to prettyPhoto given the documentation, but there are examples of it on their documentation, I just haven't had any luck implementing them. </p>
  
  <p>Here is my code</p>
  
  <p><strong>html</strong></p>
  
  <pre><code> &lt;div class="row centered"&gt;
            &lt;div class="col-md-4 portfolio-item web-design"&gt;
              &lt;div class="he-wrap tpl6"&gt;
                 &lt;img src="images/portfolio-2/crate-of-california.jpg" height="450px" width="600px" class="img-responsive" alt=""&gt;
                    &lt;div class="he-view"&gt;
                      &lt;div class="bg a0" data-animate="fadeIn"&gt;
                          &lt;h3 class="a1" data-animate="fadeInDown"&gt;Crate of California&lt;/h3&gt;
                           &lt;a data-rel="prettyPhoto[gallery1]" href="images/portfolio-2/crate-of-california.jpg" width="600" height="486" class="dmbutton a2" data-animate="fadeInUp"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/a&gt;
                       &lt;/div&gt;&lt;!-- he bg --&gt;
                  &lt;/div&gt;&lt;!-- he view --&gt;    
              &lt;/div&gt;&lt;!-- he wrap --&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>(function($) {
  // prettyPhoto
      jQuery(document).ready(function(){
          jQuery('a[data-gal]').each(function() {
              jQuery(this).attr('rel', jQuery(this).data('gal'));
          });     
          jQuery("a[data-rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_square',slideshow:false,overlay_gallery: false,social_tools:false,deeplinking:false,allow_resize:true});
      });     
  })(jQuery);
  </code></pre>
  
  <p>I can post the css if needed, but most of it has nothing to do with the problem. </p>
  
  <p>Does anyone know how I could display multiple images (galleries) per image with prettyPhoto? Any help would be appreciated. </p>