2012-01-20 2 views
3

я использую Galleria, который позволяет добавлять изображения на лету с помощью this.push ({изображение: «image.jpg»})this.push() работает с данными PHP, но не с данными яваскрипта

странно, что когда я готовлю свой код с 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. Я попробовал $ .get, выполнив тот же фрагмент PHP, что и выше, и добавьте эти данные в this.push().

Когда я пытаюсь это я всегда получаю эту ошибку: Uncaught TypeError: Не удается использовать «в» оператора для поиска «эмпирическое»

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 

Если я прямо копировать/вставить данные обратного вызова он также работает, но загрузка с помощью Java-я получить эту ошибку снова.

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

Фактический сайт: http://www.vanderkamfashion.nl/

Пожалуйста, проверьте галерею, прокручивая вниз. Он должен - загружать новые изображения при ударе 25-й фотографии или нажатии последнего эскиза (31-е). У меня есть несколько console.logs для отслеживания проблемы.

Спасибо.

+2

Чего вы ожидаете, что 'this' будет связан с вашим обратным вызовом' .getJSON() '? Это не будет объект галереи. – Pointy

+0

Я знаю, я раздели код, чтобы сделать его более читаемым. GetJSON является частью $ ('# galleria'). Galleria ({extend: function (options) {}}); – domaind1

+0

ну, независимо от того, где код, 'this' будет установлен браузером, и это будет не то, что' this' находится во внешнем контексте. – Pointy

ответ

0

Это должно заставить вас идти в правильном направлении. Per @Pointy вам нужно получить ссылку на экземпляр галереи, если вы намереваетесь вызвать метод, например, нажать на него. Это всего лишь один из многих способов сделать это. В основном вы храните экземпляр galleria в переменной, которая затем передается вашему обработчику событий. Поскольку вы не показывали обработчик событий, в котором вы хотите запустить ajax-вызов/обновление DOM w/new images, я просто помещаю mock в демонстрацию.

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