Supersized.js你怎麼稱呼JSON編碼數據放入設置腳本

Question

好吧，我在這個相當新手，但這裏有雲：

我使用WordPress站點supersized.js創建完整尺寸的背景圖片爲頭版幻燈片足以說劇本的設置及其工作現在我的下一個問題是使腳本使用wp_attachment

在我functions.php文件拉動圖片我創造了這個：

// Get all of the images attached to the current post 
// These images will be used in the Supersized homepage gallery 
function supersized_get_images($size = 'full') { 
    global $post; 

    $photos = get_children(array('post_parent' => $post->ID, 'post_status' =>  'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID')); 

    $results = array(); 

    if ($photos) { 
     foreach ($photos as $photo) { 
     // get the correct URL for the selected size 
     $results['image'] = wp_get_attachment_url($photo->ID); 
    } 
} 
// encode into JSON format and pass to javascript supersettings.js 
echo json_encode($results); 
} 

無論如何（我把echo）因爲我想看到它正在生成正確的JSON格式。回聲上的輸出如下所示：

{"image":"http:\/\/pilarcorrias.secondvariety.org\/wp-content\/uploads\/0bcf5aa159739b260a77758c7d33699b.jpg"} 

這我假設是正確的。超大型有類似如下的設置文件：

jQuery(function($){ 
      $.supersized({ 

       //Functionality 
       slideshow    : 1,  //Slideshow on/off 
       autoplay    : 1,  //Slideshow starts playing automatically 
       start_slide    : 1,  //Start slide (0 is random) 
       random     : 0,  //Randomize slide order (Ignores start slide) 
       slide_interval   : 3000, //Length between transitions 
       transition    : 1,  //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left 
       transition_speed  : 500, //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 
       image_path    : '/../../../slideshow/', //Default image path 

       //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_portrait   : 1,  //Portrait images will not exceed browser height 
       fit_landscape   : 0,  //Landscape images will not exceed browser width 

       //Components 
       navigation    : 1,  //Slideshow controls on/off 
       thumbnail_navigation : 1,  //Thumbnail navigation 
       slide_counter   : 1,  //Display slide numbers 
       slide_captions   : 1,  //Slide caption (Pull from "title" in slides array) 
       slides     : [  //Slideshow Images 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg', title : 'Quiet Chaos by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wanderers-kitty.jpg', title : 'Wanderers by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/apple-kitty.jpg', title : 'Applewood by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'} 
              ] 


      }); 
     }); 

在這個文件中的最後一行聲明參數slides，然後通過圖像引用到幻燈片。現在我已經檢查了幻燈片功能，並且沒有URL和TITLE信息，這意味着我只需要給它image對象，這裏是文件URI，這意味着我的JSON位應該逐字運行。現在我知道我正確編碼了PHP數組，我怎樣才能將它放到上面的supersettings.js文件中......一直到處搜索，但沒有找到解釋它的東西，我可以用我的小腦袋來解釋它。任何幫助將非常感激。

Answer 1

解決了它我是一個numpty - 我只是把腳本放在函數文件中，並將其稱爲wp-footer鉤子，它允許我在腳本本身中回顯json變量。只是任何人試圖使用這裏的WordPress的附件系統超大型被我全部用代碼：

呼叫附件和創建JSON數組：

// Get all of the images attached to the current post 
// These images will be used in the Supersized homepage gallery 

function supersized_get_images($size = 'full') { 
global $post; 

$photos = get_children(array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID')); 

$results = array(); 

if ($photos) { 
    foreach ($photos as $photo) { 
    $keys [] = $photo->ID; 
    $captions [] = $photo->post_excerpt; 
    $descriptions [] = $photo->post_content; 
     // get the correct URL for the selected size 
     $results[] = array('image' => wp_get_attachment_url($photo->ID, 'full'), 'title' => '', 'url' => get_attachment_link($photo->ID)); 
    } 
} 
return str_replace('\/', '/', json_encode($results)); 
} 

好，這樣得到的圖像，創建該數組並正確地格式化了網址，並剝離了出現在http：\/\/www中的轉義斜槓。 接下來我有身體標記，以便在此之前，嵌入在頁腳中的腳本：

function super_settings() { ?> 
<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) 
       random     : 0,  //Randomize slide order (Ignores start slide) 
       slide_interval   : 3000, //Length between transitions 
       transition    : 1,  //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left 
       transition_speed  : 500, //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 
       image_path    : '/../../../slideshow/', //Default image path 

       //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_portrait   : 1,  //Portrait images will not exceed browser height 
       fit_landscape   : 0,  //Landscape images will not exceed browser width 

       //Components 
       navigation    : 0,  //Slideshow controls on/off 
       thumbnail_navigation : 1,  //Thumbnail navigation 
       slide_counter   : 1,  //Display slide numbers 
       slide_captions   : 1,  //Slide caption (Pull from "title" in slides array) 
       slides     : <?php echo supersized_get_images(); ?> 


      }); 
     }); 

</script> 
<?php } 
add_action('wp_footer', 'super_settings'); 

這增加了一個行動wp_footer它調用super_settings功能在頁腳中嵌入腳本，你可以看到最後一行該腳本回應supersized_get_images()函數並將鍵和值數組直接輸出到JavaScript中。

我很高興我可以自己回答這個問題，因爲我覺得這個問題很尷尬，但我希望這可以幫助那些想要使用超級化的人，而不必在wordpress中使用自定義上傳路徑或者使用FTP搞亂 - 只需使用你的標準WordPress的後期畫廊。 ] 您只需在頁面上包含supersized.js和設置腳本，以在其中顯示背景。中提琴！如果有人有改善，他們可以建議所有的意思是在這裏發佈。

Answer 2

不錯！另外，如果你想從你的陣列排除縮略圖：

function supersized_get_images($size = 'full') { 
global $post; 
$thumb_id = get_post_thumbnail_id(get_the_ID()); // gets the post thumbnail ID 
$photos = get_children(array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID', 'exclude' => $thumb_id)); 

Answer 3

否則，如果你不會混淆PHP的JSON到PHP以JSON等;如果你想要一個清晰的方式來解析json文件，那麼使用getJson來完成。

  jQuery(function($){ 


      var urltojson = 'getjson.json'; 




      $.getJSON(urltojson, function(photos){ 


      $.supersized({ 



       // Functionality 

       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 



       // Components       

       slide_links    : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank') 

       slides     : photos 



      }); 
      }); 

     }); 

如果Json完全加載，超大化將開始。這是所有沒有骯髒的PHP代碼在Javascript中。