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

【问题标题】：prettyPhoto displaying single image on click instead of galleryprettyPhoto 在点击时显示单个图像而不是图库
【发布时间】：2018-05-15 05:31:35
【问题描述】：

你好 stackoverflowers，

我正在使用 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 的页面链接 --> prettyPhoto Working http://navjivancollege.ac.in/Garba%202017.php

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

请指导我在哪里犯错...

【问题讨论】：

标签： php jquery gallery prettyphoto

【解决方案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：这是工作链接 http://navjivancollege.ac.in/Freshers%202017.php

【讨论】：