prettyPhoto在点击而不是画廊上显示单个图像

时间:2017-12-01 06:30:36

标签: php jquery gallery prettyphoto

Hello 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效果不起作用。 / p>

以下是我用来从文件夹加载图片的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的页面的链接 - &gt; prettyPhoto工作 http://navjivancollege.ac.in/Garba%202017.php

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

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

1 个答案:

答案 0 :(得分:1)

我得到了上述问题的解决方案。 我发布了其他人的回复:)

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

from collections import defaultdict


class Graph(object):
    def __init__(self):
        self.nodes = set()
        self.edges = defaultdict(list)
        self.distances = {}

    def add_node(self, value):
        self.nodes.add(value)

    def add_edge(self, from_node, to_node, distance):
        self.edges[from_node].append(to_node)
        self.distances[(from_node, to_node)] = distance

def are_these_nodes_adjacents(from_node, to_node):
    return to_node in graph.edges[from_node]

def count_distance(graph, u, v, k, max_distance):
    if(k <= 0): 
        return 0

    count = 0

    if(k > 0 and u == v and k != max_distance): 
        count += 1

    for i in ['A', 'B', 'C', 'D', 'E']:
        if(are_these_nodes_adjacents(u, i)):
                count += count_distance(graph, i, v, k-graph.distances[(u, i)], max_distance)
    return count

if __name__ == '__main__':
    graph = Graph()

    for node in ['A', 'B', 'C', 'D', 'E']:
        graph.add_node(node)

    graph.add_edge('A', 'B', 5)
    graph.add_edge('B', 'C', 4)
    graph.add_edge('C', 'D', 8)
    graph.add_edge('D', 'C', 8)
    graph.add_edge('D', 'E', 6)
    graph.add_edge('A', 'D', 5)
    graph.add_edge('C', 'E', 2)
    graph.add_edge('E', 'B', 3)
    graph.add_edge('A', 'E', 7)

    u = 'C'
    v = 'C'
    k = 30
    print(count_distance(graph, u, v, k, k))

这是将在上面的div中显示动态图像的脚本

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

</div>

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

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

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

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