Может ли Galleria использоваться с данными ajax?

Question

Мне действительно нужна помощь здесь! У меня есть страница с изображениями в группах по 1, 2 или 3. Я нажимаю на изображение, и класс отправляется в некоторый jquery-файл ajax для получения id (mysql), после чего он отправляется в php-файл для создания html для изображений, отображаемых на div на моей странице. Этот бит работает нормально, но я пытаюсь использовать плагин galleria, чтобы показать изображение, которое было отправлено, но он просто действует, как galleria, нет! Если я жестко задаю некоторые изображения в погружении. galleria работает так, как должно!

вот мой project.js файл

// whenever a link with category class is clicked 
$('a.project').click(function(e) { 
// first stop the link to go anywhere 
e.preventDefault(); 
// you can get the text of the link by converting the clicked object to string 
// you something like 'http://mysite/categories/1' 
// there might be other methods to read the link value 
var linkText = new String(this); 
// the value after the last/is the category ID 
var projectvalue = linkText.substring(linkText.lastIndexOf('/') + 1); 
// send the category ID to the showprojects.php script using jquery ajax post method 
// send along a category ID 
// on success insert the returned text into the shownews div 
$.post('../inc/showprojects.php', {project: projectvalue}, function(data) { 
$('#shownews').html(data); 
}); 


}); 

Это мой showproducts.php файл

<?php 
include 'connect.php'; 
// if no project was sent, display some error message 
if(!isset($_POST['project'])) { 
die('No project has been chosen'); 
} 
// cast the project to integer (just a little bit of basic security) 
$project = (int) $_POST['project']; 
// this will be the string that you will return into the shownews div 
$returnHtml = ''; 
$q = "SELECT * FROM projects WHERE id='$project'"; 
if($r = mysql_query($q)) { 
// construct the html to return 
while($row = mysql_fetch_array($r)) { 
    $returnHtml .= "<img src='{$row['filename']}' />"; 
    $returnHtml .= "<img src='{$row['filename1']}' />"; 
    $returnHtml .= "<img src='{$row['filename2']}' />"; 
} 
} 
// display the html (you actually return it this way) 
echo $returnHtml; 
?> 

Это, как я звоню Галериа на DIV

// Load the classic theme 
Galleria.loadTheme('../galleria/themes/classic/galleria.classic.min.js'); 
// Initialize Galleria 
$('#shownews').galleria(); 

Может кто-нибудь мне помочь?

Благодаря

Answer 1

Я думаю, вам нужно позвонить Galleria.run после ПРИИХ данных PHP

EDIT: уродливый путь - уничтожить галереи, если уже запущены перед установкой нового изображения в div

if($('#shownews').data('galleria')){$('#shownews').data('galleria').destroy()} //destroy, if allready running 
$.post('../inc/showprojects.php', {project: projectvalue}, function(data) { 
    $('#shownews').html(data); 
    Galleria.run('#shownews'); 
}); 

и удалите $('#shownews').galleria();

EDIT 2: использовать .load апи Galleria, чтобы загрузить новые данные

// whenever a link with category class is clicked 
$('a.project').click(function(e) { 
    // first stop the link to go anywhere 
    e.preventDefault(); 
    // you can get the text of the link by converting the clicked object to string 
    // you something like 'http://mysite/categories/1' 
    // there might be other methods to read the link value 
    var linkText = new String(this); 
    // the value after the last/is the category ID 
    var projectvalue = linkText.substring(linkText.lastIndexOf('/') + 1); 
    // send the category ID to the showprojects.php script using jquery ajax post method 
    // send along a category ID 
    // on success insert the returned text into the shownews div 
    $.post('../inc/showprojects.php', {project: projectvalue}, 
     function(data) { 
      $('#shownews').data('galleria').load(data); 
     },"json" 
    ); 
}); 

PHP

<?php 
include 'connect.php'; 
// if no project was sent, display some error message 
if(!isset($_POST['project'])) { 
    die('No project has been chosen'); 
} 
// cast the project to integer (just a little bit of basic security) 
$project = (int) $_POST['project']; 
// this will be data array that you will return into galleria 
$returnData = array(); 
$q = "SELECT * FROM projects WHERE id='$project'"; 
if($r = mysql_query($q)) { 
    // construct datat object to return 
    while($row = mysql_fetch_array($r)) { 
     $returnData[] = array('image'=>$row['filename']); 
     $returnData[] = array('image'=>$row['filename1']); 
     $returnData[] = array('image'=>$row['filename2']); 
    } 
} 
// return JSON 
echo json_encode($returnData); 
?> 

Galleria INIT: (галерея будет пустым, пока не будет загружать в него данные)

// Load the classic theme 
Galleria.loadTheme('../galleria/themes/classic/galleria.classic.min.js'); 
// Initialize Galleria 
Galleria.run('#shownews'); 

Answer 2

попробовать это один

// whenever a link with category class is clicked 
    $('a.project').click(function(e) { 
    // first stop the link to go anywhere 
    e.preventDefault(); 
    // you can get the text of the link by converting the clicked object to string 
    // you something like 'http://mysite/categories/1' 
    // there might be other methods to read the link value 
    var linkText = new String(this); 
    // the value after the last/is the category ID 
    var projectvalue = linkText.substring(linkText.lastIndexOf('/') + 1); 
    // send the category ID to the showprojects.php script using jquery ajax post method 
    // send along a category ID 
    // on success insert the returned text into the shownews div 
    $.ajax({url:'../inc/showprojects.php', 
      type:'POST' , 
      method,async:false , 
      data:{project: projectvalue}, 
      success:function(data) { 
       $('#shownews').html(data); 
     }}); 
Galleria.run('#shownews'); 

}); 

Answer 3

Попробуйте загрузить галерею после успешного запроса ajax завершено. Делая это, jquery ждет, пока не будет отображено ShowNews, а затем будет запущено galleria.

$.ajax(
    { 
     type: "POST", 
     url:'../inc/showprojects.php', 
     data:{project: projectvalue}, 
     success: function(data) 
     { 
      $('#shownews').html(data); 
     }, 
     complete: function() 
     { 
      Galleria.loadTheme('../galleria/themes/classic/galleria.classic.min.js'); 

      $('#shownews').galleria(); 
     } 
    }); 

Этот метод используется при сборе данных изображения из удаленного источника. Надеюсь это поможет!

Answer 4

Я пробовал этот ответ и другие ответы в Интернете и ничего не работал. Затем я переместил galleria-1.3.5.min.js на родительскую страницу, и это сработало. Какое удивительно простое решение!