Question

我真的需要一些帮助！我有一个包含1,2或3组图像的页面。我点击一个图像，然后该类被发送到一些jquery ajax的东西来获取id（mysql）然后这被发送到一个php文件来构建html用于在我的页面中的div上显示的图像。这一点工作正常，但我试图使用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上调用galleria的方式

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

任何人都可以帮助我吗？

由于

Answer 1

尝试这个

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

我认为，你需要在从php

收到数据后调用Galleria.run

编辑：丑陋的方式 - 如果在将新图像插入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();

编辑2：使用Galleria的.load api加载新数据

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

在ajax请求成功完成后尝试加载galleria。通过这样做，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移动到父页面并且它有效。这是一个非常简单的解决方案！

Galleria可以与ajax数据一起使用吗？

4 个答案: