1

我真的需要一些帮助！我有一个页面，其中包含 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();

谁能帮我吗？

谢谢

4

4 回答 4

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');

});
于 2013-05-07T13:52:27.950 回答
0

我认为，您需要Galleria.run在从 php 接收数据后调用

编辑：丑陋的方式 - 销毁画廊，如果在将新图像插入 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');
于 2013-05-07T21:01:39.753 回答
0

我在网上尝试了这个答案和其他答案，但没有任何效果。然后我将 galleria-1.3.5.min.js 移动到父页面，它工作了。多么简单的解决方案啊！

于 2014-03-10T12:09:28.567 回答
0

在 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();
        }
    });

每当我从远程源收集图像数据时，我都会使用此方法。希望这可以帮助！

于 2013-05-08T07:55:32.567 回答