[英]Get imgs from post to supersized with output php/wordpress
我有WordPress,并且需要包含Supersized,但有关图像有问题。
我需要通过PHP将多个字符串(基于帖子的数字图像)制成jQuery代码:
{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');
从具有此字符串的帖子中获取图像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>
谢谢弗兰克
基本上,您需要创建一个数组,该数组将包含带有图像路径值的对象键“ image”:
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
});
基本上在您看来:
<script>
$(document).ready(function(){
var imagesArray = [
<?php
foreach($myimages as $img){
echo "\{image : '" . $img . "'\},";
}
?>
];
api.options.slides = imagesArray;
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.