prettyPhoto 在点击时显示单个图像而不是图库

Question

你好Whosebugers，

我正在使用 prettyPhoto 显示来自使用 PHP、Jquery 的文件夹中的图像。

当我使用下面输入的代码时，prettyPhoto 运行良好。

<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>

但是，当我尝试使用 JQuery 和 PHP 从文件夹动态加载相同的图像时，我可以看到加载的图像，但是当我单击时 prettyPhoto 效果不起作用在图像上它正在独立打开。

这是我用来从文件夹加载图像的 PHP 和 JQuery 代码。

<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++;
}

这是未使用 JQuery 和 PHP 的页面 link --> prettyPhoto 工作 http://navjivancollege.ac.in/Garba%202017.php

这是页面的 link 使用 JQuery 和 PHP --> prettyPhoto 不工作 http://navjivancollege.ac.in/Garba%202017%202.php

请指导我哪里出错了...

Answer 1

我找到了上面问题的答案。我正在为其他人发布回复:)

这是我的 div 我希望显示动态图像的地方

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

</div>

这是显示上面动态图片的脚本div

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

现在这是我的 php 文件，它正在从文件夹

中获取图像

$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++;
}

希望对其他人有所帮助...

PS ：这是工作 link http://navjivancollege.ac.in/Freshers%202017.php

prettyPhoto 在点击时显示单个图像而不是图库

prettyPhoto displaying single image on click instead of gallery

php

jquery

gallery

prettyphoto