jQuery Grid图库

Question

我有一个需要渲染来自数组的图像的图库

$immagini = array('image01.jpg', 'image02.jpg', 'image03.jpg');

我需要在这个jQuery代码中使用这些图像，但是使用我的动态数据

$('#detail-food-photo').imagesGrid({
        images: [
                { src: 'images/detail-food-photo/01.jpg', alt: 'Second image', title: 'Second image', caption: 'Image Caption One' },
                { src: 'images/detail-food-photo/02.jpg', alt: 'Second image', title: 'Second image', caption: 'Image Caption Two' },
                { src: 'images/detail-food-photo/03.jpg', alt: 'Second image', title: 'Second image', caption: 'Image Caption Three' },
                { src: 'images/detail-food-photo/04.jpg', alt: 'Second image', title: 'Second image', caption: 'Image Caption Fpur' },
                { src: 'images/detail-food-photo/05.jpg', alt: 'Second image', title: 'Second image', caption: 'Image Caption Five' },
                { src: 'images/detail-food-photo/06.jpg', alt: 'Second image', title: 'Second image', caption: 'Image Caption Six' },
                { src: 'images/detail-food-photo/07.jpg', alt: 'Second image', title: 'Second image', caption: 'Image Caption Seven' },
                { src: 'images/detail-food-photo/08.jpg', alt: 'Second image', title: 'Second image', caption: 'Image Caption Eight' },
                { src: 'images/detail-food-photo/09.jpg', alt: 'Second image', title: 'Second image', caption: 'Image Caption Nine' },
                { src: 'images/detail-food-photo/10.jpg', alt: 'Second image', title: 'Second image', caption: 'Image Caption Ten' },
                { src: 'images/detail-food-photo/11.jpg', alt: 'Second image', title: 'Second image', caption: 'Image Caption Eleven' },
                { src: 'images/detail-food-photo/12.jpg', alt: 'Second image', title: 'Second image', caption: 'Image Caption Twelve' },
        ],
        cells: 5,
        align: true
});
});

如何实现这一结果？

Answer 1

遇到类似问题的人。我刚刚通过混合php解决了

<script type="text/javascript">
  jQuery(function($) {

  "use strict";

  /**
   * Image Grid for Photo
   */ 
  var immagini = $('#immagini_div').val();
  var immagine = immagini.split(',');
  $('#detail-food-photo').imagesGrid({
      images: [ <?php foreach($immagini as $immagine): ?>"<?php 
      $data = 'frontend/media/immagini/' . $immagine;
      echo $data ?>",<?php endforeach; ?>
     ],

      cells: 5,
      align: true
  });

});
</script>