Question

我正在使用Galleria，它允许您使用this.push动态添加图像（{image：'image.jpg'}）

奇怪的是，当我用PHP准备我的代码时，它运行正常：

<?php
while {
   $add_images .= '{ 
                      thumb:'".$thumb."', 
                      image:'".$image."'  
                   }';
}
?>

<script type="text/javascript">
    $(document).ready(function(){
        $('#galleria').galleria({
            extend: function(options) {
               this.push(<?=$add_images;?>);
            }
        })
    });
</script>

这很有效。但是，我想使用AJAX加载新图像：

$.getJSON('/ajax/gallery.ajax.php', { command:'load_images' }, function(data){
     this.push(data);
}

回调数据的格式与上一个PHP示例完全相同。我尝试使用与上面相同的PHP片段来回放$ .get并将此数据添加到this.push（）。

当我尝试这个时，我总是会收到此错误： 未捕获的TypeError：无法使用'in'运算符搜索'thumb'

Uncaught TypeError: Cannot use 'in' operator to search for 'thumb' in {
  thumb:'/images/gallerij/1/vanderkam-fvhd5wq1jy-t.jpg', 
  image:'/images/gallerij/1/vanderkam-fvhd5wq1jy.jpg', 
  big:'/images/gallerij/1/vanderkam-fvhd5wq1jy.jpg', 
  title:' image []', description:'null'
},{ 
  thumb:'/images/gallerij/1/vanderkam-oguuob7pyd-t.jpg', 
  image:'/images/gallerij/1/vanderkam-oguuob7pyd.jpg', 
  big:'/images/gallerij/1/vanderkam-oguuob7pyd.jpg', 
  title:' image []', description:'null' 
}

将回调数据传回给对象时也可以。然而，对于这一点，我不知道如何为多个图像做这项工作：

// code shortened to make it better readable
$.getJSON('/ajax/gallery.ajax.php', { command:'load_images' }, function(data){
      var images;
      $.each(data, function(entryIndex, entry){
         images = { thumb:entry.thumb, image:entry.image, big:entry.big, title:entry.title, description:entry.description };
         $galleria.push(images);
     }
}

正如您所看到的，图像现在正在每个循环中被推送，从而导致性能不佳。如何使用AJAX推送图片？数据必须格式如下：

{ image:'image1.jpg' }, { image:'image2.jpg'}, { image:'image3.jpg'}

//Sending data directly to this.push() using json_encode() using PHP 
//will add brackets to the output like this:
[{ image:'image1.jpg' }, { image:'image2.jpg'}, { image:'image3.jpg'}]
//This however will not work

如果我清楚地复制/粘贴回调数据也可以，但是通过javascript加载我会再次收到错误。

http://galleria.io/docs/1.2/api/methods/#push-element1-elementn

实际网站： http://www.vanderkamfashion.nl/

请向下滚动查看图库。它应该 - 在第25张照片被点击或最后一张缩略图被点击时加载新图像（第31张）。我正在运行一些console.log来追踪问题。

感谢。

Answer 1

这应该让你朝着正确的方向前进。如果您打算调用像push这样的方法，则每个@Pointy需要获得对库实例的引用。这只是众多方法中的一种。基本上，您将galleria实例存储在稍后传递给事件处理程序的变量中。由于你没有显示一个事件处理程序，你想要用新的图像激活ajax调用/更新DOM，我只是把一个模拟的用于演示。

<script type="text/javascript">
    function loadImageViaAjax(oEvent) {
        $.getJSON(
            '/ajax/gallery.ajax.php',
            { command:'load_images' },
            function(data) {
                oEvent.data.oGalleria.push(data);
            });
    }

    $(document).ready(function(){
        var oGalleria = null;

        $('#galleria').galleria({
            extend: function(options) {
               oGalleria = this;
               this.push(<?=$add_images;?>);
            }
        });

        $('some selector').click({oGalleria : oGalleria}, loadImageViaAjax);
    });
</script>

this.push（）适用于PHP数据，但不适用于javascript数据

1 个答案: