Can Galleria be used with ajax data?

Question

I really need some help here! I have a page with images in groups of 1, 2, or 3. I click on an image and the class gets sent to some jquery ajax stuff to get the id(mysql) then this gets sent to a php file to build the html for the images to display on a div in my page. This bit works OK, but I'm trying to use the galleria plugin to show the image that haave been sent, but it just act like galleria is not there! If I hardcode some images in the dive. galleria works as it should!

here is my project.js file

// 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);
});


});

This is my showproducts.php file

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

This is how I'm calling galleria on the div

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

Can anyone help me out?

Thanks

Answer 1

I think, you need to call Galleria.run after recieve data from php

EDIT: ugly way - destroy gallery, if already running before inserting new images into 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');
});

and remove $('#shownews').galleria();

EDIT 2: use Galleria's .load api to load new data

// 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: (Gallery will be empty until you will load data into it)

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

Answer 2

try this one

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

Try loading galleria after the ajax request has successfully completed. By doing this jquery waits until ShowNews has been rendered and then runs 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();
        }
    });

I use this method whenever i gather the image data from a remote source. Hope this helps!

Answer 4

I tried this answer and other answers on the web and nothing worked. Then I moved galleria-1.3.5.min.js to the parent page and it worked. What an amazingly simple solution!