好的,我在这方面相当新手,但这里有:
我在wordpress网站上使用supersized.js为首页创建完整尺寸的背景图片幻灯片,足以说明脚本已设置好,现在我的工作是下一个问题是让脚本使用{{1 }}
在我的functions.php文件中,我创建了这个:
wp_attachment
所以无论如何(我把// 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);
}
)放进去是因为我想看到它正在生成正确的JSON格式。 echo上的输出如下所示:
echo
我认为这是正确的。 Supersized有一个如下所示的设置文件:
{"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/'}
]
});
});
,然后将图像引用传递给幻灯片。现在我已经检查过,幻灯片显示功能完美,没有URL和TITLE信息,这意味着我只需要给它slides
对象,这里是文件URI,这意味着我的JSON应该逐字工作。现在我知道我正在对PHP数组进行正确编码,我如何将它放到上面的supersettings.js文件中...一直在搜索,但没有找到解释它的东西,我可以让我的小脑袋。任何帮助将非常感激。
答案 0 :(得分:1)
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) );
答案 1 :(得分:0)
解决它我是一个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));
}
好的,这样得到了图像,创建了数组,并且还正确地格式化了剥离转义斜杠的URL,这些斜杠看起来像这个http:\ / \ / www。 接下来我必须在脚本标记之前将脚本嵌入到body标记中,所以在这里:
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和settings脚本。中提琴!如果有人有改进,他们可以建议所有人在这里发布。
答案 2 :(得分:0)
否则,如果你不将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完全加载,超级化将启动。多数民众赞成在Javascript中没有脏PHP代码。