獲取圖片從後到超大輸出php/wordpress

Question

我有WordPress，我需要包括Supersized，但我有一個關於圖像的問題。

我需要多串（基於數字後的圖像）到jQuery代碼，通過PHP：

{image : 'http://....jpg'}, 

例如，這是後，圖像的容器：

<div id="container_post"> 
<img src="http:....jpg" /> 
<img src="http:....jpg" /> 
</div> 

，並通過PHP，我需要多串到標籤slides:[]：

<script> 
[...] 

Slides :[ 
    {image : 'http:....jpg'}, 
    {image : 'http:....jpg'}, 
] 

[...] 
</script> 

---

我已將此代碼轉換爲頁面php。

我需要使用此字符串通過php query_posts('page_id=170');從此帖子中獲取圖片。

<script type="text/javascript"> 

       jQuery(function($){ 

        $.supersized({ 

         // Functionality 
         slideshow    : 1,   // Slideshow on/off 
         autoplay    : 1,   // Slideshow starts playing automatically 
         start_slide    : 1,   // Start slide (0 is random) 
         stop_loop    : 0,   // Pauses slideshow on last slide 
         random     : 0,   // Randomize slide order (Ignores start slide) 
         slide_interval   : 3000,  // Length between transitions 
         transition    : 5,   // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left 
         transition_speed  : 1000,  // Speed of transition 
         new_window    : 1,   // Image links open in new window/tab 
         pause_hover    : 0,   // Pause slideshow on hover 
         keyboard_nav   : 1,   // Keyboard navigation on/off 
         performance    : 1,   // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit) 
         image_protect   : 1,   // Disables image dragging and right click with Javascript 

         // Size & Position       
         min_width    : 0,   // Min width allowed (in pixels) 
         min_height    : 0,   // Min height allowed (in pixels) 
         vertical_center   : 1,   // Vertically center background 
         horizontal_center  : 1,   // Horizontally center background 
         fit_always    : 0,   // Image will never exceed browser width or height (Ignores min. dimensions) 
         fit_portrait   : 1,   // Portrait images will not exceed browser height 
         fit_landscape   : 0,   // Landscape images will not exceed browser width 

         // Components       
         slide_links    : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank') 
         thumb_links    : 0,   // Individual thumb links for each slide 
         thumbnail_navigation : 0,   // Thumbnail navigation 
         slides : [ 
             {image : 'http://....jpg'}, 
             {image : 'http://....jpg'}, 
             etc 

] , 

         // Theme Options    
         progress_bar   : 1,   // Timer for each slide       
         mouse_scrub    : 0 

        }); 
       }); 

      </script> 

，我想生成相同的字符串{image : 'http://....jpg'},分別由圖片，成線slides: []

---

我看到這個舊的代碼...但它得到的只是縮略圖...我需要的圖像和多字符串。

slides : [ <?php 
     if (have_posts()) { 
      $post_array = Array(); 
      while (have_posts()) { 
       the_post(); 
       $thumb = get_post_meta($post->ID,'_thumbnail_id',false); 
       $thumb = wp_get_attachment_image_src($thumb[0], false); 
       $thumb = $thumb[0]; 
       if (has_post_thumbnail()) { 
        $post_array[] = "{image : '".$thumb."'}"; 
       } 
      } 
      echo implode(",",$post_array); 
     } 
    ?> }, 

所有到字符串：slides : []

---

我有一個問題。

我需要插入IMGS的標題：

例如：

{image : 'http://***.jpg', title : 'title_img'} 

你能幫我怎麼樣？

PS：我有這個改裝成代碼：

<script type="text/javascript"> 

      jQuery(function($){ 
       var imagesArray = [ 
       <?php 
       function foo($anArray){ 
       foreach($myimages as $img){ 
        echo "\{image : '".$img."'\},"; 
       } 
       }?> 
       ]; 
       $('#container_post img').each(function(){ 
        var obj = {}; 
        obj.image = this.src ; 
        imagesArray.push(obj); 
       }); 
       $.supersized({ 

        // Functionality 
        slideshow    : 1,   // Slideshow on/off 
        autoplay    : 1,   // Slideshow starts playing automatically 
        start_slide    : 1,   // Start slide (0 is random) 
        stop_loop    : 0,   // Pauses slideshow on last slide 
        random     : 0,   // Randomize slide order (Ignores start slide) 
        slide_interval   : 5000,  // Length between transitions 
        transition    : 6,   // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left 
        transition_speed  : 1000,  // Speed of transition 
        new_window    : 1,   // Image links open in new window/tab 
        pause_hover    : 0,   // Pause slideshow on hover 
        keyboard_nav   : 1,   // Keyboard navigation on/off 
        performance    : 1,   // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit) 
        image_protect   : 1,   // Disables image dragging and right click with Javascript 

        // Size & Position       
        min_width    : 0,   // Min width allowed (in pixels) 
        min_height    : 0,   // Min height allowed (in pixels) 
        vertical_center   : 1,   // Vertically center background 
        horizontal_center  : 1,   // Horizontally center background 
        fit_always    : 0,   // Image will never exceed browser width or height (Ignores min. dimensions) 
        fit_portrait   : 1,   // Portrait images will not exceed browser height 
        fit_landscape   : 0,   // Landscape images will not exceed browser width 

        // Components       
        slide_links    : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank') 
        thumb_links    : 0,   // Individual thumb links for each slide 
        thumbnail_navigation : 0,   // Thumbnail navigation 
         slides : imagesArray 
, 

        // Theme Options    
        progress_bar   : 1,   // Timer for each slide       
        mouse_scrub    : 0 

       }); 
      }); 

     </script> 

謝謝 弗蘭克

Answer 1

基本上在你看來：

<script> 
$(document).ready(function(){ 
var imagesArray = [ 
<?php 
    foreach($myimages as $img){ 
    echo "\{image : '" . $img . "'\},"; 
    } 
?> 
]; 
    api.options.slides = imagesArray; 
}); 
</script> 

Answer 2

基本上你需要創建一個數組，將與圖像路徑值的對象鍵「形象」：

var imagesArray = []; 

$('#container_post img').each(function(){ 
    var obj = {}; 
    obj.image = this.src ; 
    imagesArray.push(obj); 
}); 

// console.log(JSON.stringify(imagesArray)); // UNCOMMENT TO TEST IN CONSOLE 

// USE LIKE: 
$.supersized({ 
    slides : imagesArray 
});