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