title: Showing carousel in modal window and ajax request
body: <p>I'm not even sure if I'm on right way with this and I'm very new in ajax/jquery stuff. </p>
  
  <p>What I trying is to load on one page 20 thumbnails from category. When user click on the thumb it is showed in full size on modal. Then I want user to be able to see next image from that category. </p>
  
  <p>Now when I click on image it just showing empty popup and no errors in console.</p>
  
  <p>So this is where I show images from the category</p>
  
  <pre><code>        // some other code here
  $result = $pdo-&gt;prepare("SELECT * FROM images WHERE image_album = ? ORDER BY image_id ASC LIMIT 24");
  $result -&gt; bindParam(1, $album_id, PDO::PARAM_INT);
  $result-&gt;execute();
  echo '
     &lt;div id="gallery" class="section-scroll main-section"&gt;
        &lt;section id="gallery-wrapper" class=""&gt;       
           &lt;div class="gallery-content three-columns"&gt;';
      for($i=0; $row = $result-&gt;fetch(); $i++)
      {
          echo '            
              &lt;a class="mix category-2 open-overlay" href="ajax-gallery.php" &gt;
              &lt;img width="1000" height="600" src="images/gallery/'.$row['image_name'].'" data-src="images/gallery/'.$row['image_name'].'"/&gt;
                  &lt;div class="hidden-xs"&gt;
                      &lt;div&gt;
                          &lt;span&gt;&lt;h3&gt;Full size&lt;/h3&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/a&gt;';
      }
          // some more code
  </code></pre>
  
  <p>Then in <code>ajax-gallery.php</code> I have</p>
  
  <pre><code>if(!empty($_POST["album_id"]) &amp;&amp; !empty($_POST["image_id"])) {
  
  $album_id = $_POST['album_id'];            
  $image = $_POST['image_id'];
  
      $value = $pdo-&gt;prepare('SELECT * FROM images WHERE image_album = ? ORDER BY image_id = ? ASC');
      $value-&gt;bindParam(1, $album_id, PDO::PARAM_INT);
      $value-&gt;bindParam(2, $image_id, PDO::PARAM_INT);
      $value-&gt;execute();
      $result = $value-&gt;fetch();    
  
      foreach ($result as $row)
      {
          echo '
          &lt;section id="gallery"&gt;
              &lt;div class="gallery-content fullscreen"&gt;&lt;a class="close-button"&gt;&lt;i class="icon-close"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;div class="gallery"&gt;
                      &lt;div class="loading-spinner"&gt;&lt;/div&gt;
                      &lt;div id="images" class="owl-carousel"&gt;
                          &lt;div class="item"&gt;&lt;figure&gt;&lt;img src="images/gallery/'.$row['image_name'].'" /&gt;&lt;/figure&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="controls"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;      
          ';
      }
  </code></pre>
  
  <p>HTML in the echo in <code>ajax-gallery.php</code> is the carousel when user click on thumbnail.</p>
  
  <p>This is js part and I'm sure it is wrong.</p>
  
  <pre><code>$(document).ready(function(){
  $('#gallery, #a').click(function() {
     $.post('ajax-gallery.php',
          {
              "album_id": $(this).attr('album_id'),
              "image_id": $(this).attr('image_id')
          },
          function (response) {
  
          });
   });
  });
  </code></pre>
  
  <p>Update:</p>
  
  <p>This is when you point on the thumb
  <a href="https://i.stack.imgur.com/YI5dM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YI5dM.jpg" alt="enter image description here"></a></p>