prettyPhoto displaying single image on click instead of gallery

Question

Hello stackoverflowers,

I am using prettyPhoto to display images from a folder using PHP, Jquery.

When I am using the below typed code the then prettyPhoto is working very well.

<div class="row page-row">
    <a class="prettyphoto col-md-3 col-sm-3 col-xs-6" rel="prettyPhoto[gallery]" href="gallery/Garba 2017/IMG_8237.JPG"><img class="img-responsive img-thumbnail" src="gallery/Garba 2017/IMG_8237.JPG" alt="" /></a>
    <a class="prettyphoto col-md-3 col-sm-3 col-xs-6" rel="prettyPhoto[gallery]" href="gallery/Garba 2017/IMG_8238.JPG"><img class="img-responsive img-thumbnail" src="gallery/Garba 2017/IMG_8238.JPG" alt="" /></a>
    <a class="prettyphoto col-md-3 col-sm-3 col-xs-6" rel="prettyPhoto[gallery]" href="gallery/Garba 2017/IMG_8239.JPG"><img class="img-responsive img-thumbnail" src="gallery/Garba 2017/IMG_8239.JPG" alt="" /></a> 
    <a class="prettyphoto col-md-3 col-sm-3 col-xs-6" rel="prettyPhoto[gallery]" href="gallery/Garba 2017/IMG_8241.JPG"><img class="img-responsive img-thumbnail" src="gallery/Garba 2017/IMG_8241.JPG" alt="" /></a>
</div>

BUT, when i am trying to load the same images using JQuery and PHP dynamically from a Folder the i can see the loaded images but the prettyPhoto effects are not working instead when i click on the image it is getting opened independently.

Here is the PHP and JQuery code that i am using to load image from a folder.

<div class="row page-row" id="libImages">
    <div id='loaderImage'><img src="img/loader.gif" alt="Site Logo" class="img-responsive" /></div>
</div> 

<script type="text/javascript">
    $(document).ready(function() {
    $("a[rel^='prettyPhoto']").prettyPhoto();

        showImages();

        function showImages(){
            setTimeout("$('#libImages').load('gallery/Garba2017.php', function(){ $('#loaderImage').hide(); });", 1000);
        }
    });
    //onready ends here
</script>

Garba2017.php

$filenameArray = [];

$handle = opendir(dirname(realpath(__FILE__)).'/Garba 2017/');
    while($file = readdir($handle)){
        if($file !== '.' && $file !== '..'){
            array_push($filenameArray, "gallery/Garba 2017/$file");
        }
    }

shuffle($filenameArray);

$count = count($filenameArray);
$num = 1;
for ($i = 0; $i < $count; $i++) {
echo '<a class="prettyphoto col-md-3 col-sm-3 col-xs-6" rel="prettyPhoto[gallery]" href="'.$filenameArray[$i].'"><img class="img-responsive img-thumbnail" src="'.$filenameArray[$i].'" alt="GARBA IMAGE '.$num.'" /></a>';
$num++;
}

Here is the link of Page WITHOUT using JQuery and PHP --> prettyPhoto Working http://navjivancollege.ac.in/Garba%202017.php

Here is the link of Page using JQuery and PHP --> prettyPhoto NOT Working http://navjivancollege.ac.in/Garba%202017%202.php

Please guide me where i am making mistake...

Answer 1

I got the solution of my above question. I am posting reply for others :)

This is my div where I wanted my dynamic images to be displayed

<div class="row page-row" id="libImages"> 

</div>

This is the script that will display the dynamic images in the above div

    function showImages(){
            $.ajax({
               url: 'gallery/Freshers2017.php',
               success: function(html) {
                  $("#libImages").append(html);
                  $("a[rel^='prettyPhoto']").prettyPhoto();
               }
            });
        } 

Now this is my php file which is fetching the images from the folder

$filenameArray = [];

$handle = opendir(dirname(realpath(__FILE__)).'/Freshers 2017/');
    while($file = readdir($handle)){
        if($file !== '.' && $file !== '..'){
            array_push($filenameArray, "gallery/Freshers 2017/$file");
        }
    }

shuffle($filenameArray);

$count = count($filenameArray);
$num = 1;
for ($i = 0; $i < $count; $i++) {
    echo '<a class="prettyphoto col-md-3 col-sm-3 col-xs-6" rel="prettyPhoto[gallery]" href="'.$filenameArray[$i].'"><img class="img-responsive img-thumbnail" src="'.$filenameArray[$i].'" alt="FRESHERS 2017 IMAGE '.$num.'" /></a>';
$num++;
}

Hope it will be helpful for others...

PS : Here is the working link http://navjivancollege.ac.in/Freshers%202017.php