Menu icon Foundation
Reveal With Ajax Content

so i have an image gallery with thumbnails which when clicked fire up a reveal with ajax content, basically an image slider on another page (same domain... still working on a local dev machine), the first time the reveal loads up, everything works perfectly...
however, if exit the reveal and click another thumbnail to launch the reveal again, the modal shows up and loads... but no images show...

below is the code that creates the gallery page

<div class="gallery">
	<ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-6">
	    <li>
            <a data-reveal-id="galleryModal" data-reveal-ajax="http://localhost:8000/gallery_pictures/1" href="#">
                <img src="http://localhost:8000/img/gallery/thumbs/ZbIJdMC5N3fLYbwKbmgM.jpg" alt="">
            </a>
        </li>
	</ul>
  <div id="galleryModal" class="reveal-modal" data-reveal>
  </div>
</div>
            

         

below is the ajax content being loaded

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://localhost:8000/builds/gallery_reveal-10276d7799b10f6cd1ee9d836bc0d376.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost:8000/builds/style-83764a6726c7d4520d672162106e054d.css" />
    <script src="http://localhost:8000/builds/galleria-296737fc3db4233d5c535cc1f4231d78.js"></script>
    <style>
	    .galleria{ width: 100%; height: 600px; background: #000 }
	</style>
	<script type="text/javascript" charset="utf-8">
		Galleria.loadTheme('http://localhost:8000/js/galleria/themes/classic/galleria.classic.js');
		Galleria.run('.galleria');
	</script>
</head>
<body>
	<div class="galleria">
		<a href="http://localhost:8000/img/gallery/originals/ZbIJdMC5N3fLYbwKbmgM.jpg">
			<img src="http://localhost:8000/img/gallery/thumbs/ZbIJdMC5N3fLYbwKbmgM.jpg" data-title="My title" data-description="bla bla bla bla bla" alt="">
    	</a>
		<a href="http://localhost:8000/img/gallery/originals/cgFGZEx73B3ceBeMvo5G.jpg">
			<img src="http://localhost:8000/img/gallery/thumbs/cgFGZEx73B3ceBeMvo5G.jpg" data-title="My title" data-description="bla bla bla bla bla" alt="">
        </a>
	</div>
	<!-- <a class="close-reveal-modal">&#215;</a> -->
	<script src="http://localhost:8000/builds/gallery_reveal-9c02bed8baa665f913231d43cb98edac.js"></script></body>
</html>
            

         

can someone help me figure out what am doing wrong, or what i have missed, thanks

revealmodalAJAX

so i have an image gallery with thumbnails which when clicked fire up a reveal with ajax content, basically an image slider on another page (same domain... still working on a local dev machine), the first time the reveal loads up, everything works perfectly...
however, if exit the reveal and click another thumbnail to launch the reveal again, the modal shows up and loads... but no images show...

below is the code that creates the gallery page

<div class="gallery">
	<ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-6">
	    <li>
            <a data-reveal-id="galleryModal" data-reveal-ajax="http://localhost:8000/gallery_pictures/1" href="#">
                <img src="http://localhost:8000/img/gallery/thumbs/ZbIJdMC5N3fLYbwKbmgM.jpg" alt="">
            </a>
        </li>
	</ul>
  <div id="galleryModal" class="reveal-modal" data-reveal>
  </div>
</div>
            

         

below is the ajax content being loaded

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://localhost:8000/builds/gallery_reveal-10276d7799b10f6cd1ee9d836bc0d376.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost:8000/builds/style-83764a6726c7d4520d672162106e054d.css" />
    <script src="http://localhost:8000/builds/galleria-296737fc3db4233d5c535cc1f4231d78.js"></script>
    <style>
	    .galleria{ width: 100%; height: 600px; background: #000 }
	</style>
	<script type="text/javascript" charset="utf-8">
		Galleria.loadTheme('http://localhost:8000/js/galleria/themes/classic/galleria.classic.js');
		Galleria.run('.galleria');
	</script>
</head>
<body>
	<div class="galleria">
		<a href="http://localhost:8000/img/gallery/originals/ZbIJdMC5N3fLYbwKbmgM.jpg">
			<img src="http://localhost:8000/img/gallery/thumbs/ZbIJdMC5N3fLYbwKbmgM.jpg" data-title="My title" data-description="bla bla bla bla bla" alt="">
    	</a>
		<a href="http://localhost:8000/img/gallery/originals/cgFGZEx73B3ceBeMvo5G.jpg">
			<img src="http://localhost:8000/img/gallery/thumbs/cgFGZEx73B3ceBeMvo5G.jpg" data-title="My title" data-description="bla bla bla bla bla" alt="">
        </a>
	</div>
	<!-- <a class="close-reveal-modal">&#215;</a> -->
	<script src="http://localhost:8000/builds/gallery_reveal-9c02bed8baa665f913231d43cb98edac.js"></script></body>
</html>
            

         

can someone help me figure out what am doing wrong, or what i have missed, thanks