2017-04-20 102 views
0

我有需要呈現一些像從一個數組來畫廊jQuery的網格圖像畫廊

$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 
}); 
}); 

我該如何達到這個結果?

+0

'{src:$ immagini [0],...'? – Draco18s

回答

0

有人遇到類似問題。我剛剛通過混合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>