prettyPhoto отображает одно изображение по клику вместо галереи

Question

prettyPhoto отображает одно изображение по клику вместо галереи

Здравствуйте, stackoverflowers,

Я использую prettyPhoto для отображения изображений из папки, используя PHP, Jquery.

Когда я использую приведенный ниже код, то prettyPhoto работает очень хорошо.

<div class="row page-row">
<a class="prettyphoto col-md-3 col-sm-3 col-xs-6" rel="prettyPhoto" 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" 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" 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" 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" 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

Пожалуйста, ведите меня, где я делаю ошибку …

1

gallery jquery php prettyphoto

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я получил решение моего вопроса выше.
Я публикую ответ для других 🙂

Это мой 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" 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

1