[英]Supersized.js how do you call JSON Encoded Data into the settings script
好吧,我是一個新手,但是去了:
我在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格式。 echo的輸出如下所示:
{"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文件中。...到處都在搜索,但是沒有找到可以用我的小腦袋來解釋它的內容。 任何幫助將非常感激。
好東西! 此外,如果要從陣列中排除縮略圖圖像,請執行以下操作:
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) );
否則,如果您不將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代碼。
解決了這個問題,我很笨拙-我只是將腳本放入函數文件中,並將其命名為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這樣的轉義斜杠的URL。 接下來,我不得不將腳本嵌入到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和設置腳本。 中提琴! 如果有人有進步,他們可以建議將其張貼在這里。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.