i have an edited Supersized...i've added a code for loop about photos on wp....
so i've this on original:
slides : [
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}
],
and i have edited for loop gallery from wp:
slides : [
<?php query_posts('cat=46'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$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() ) { ?>
{image : '<?php echo $thumb; ?>'},
<?php } ?>
<?php endwhile; else: ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
],
and it work on Chrome, Firefox etc...
but i've a problem with this alert on IE 8 - 7 and Firefox old:
Message: ‘slides[...].url’ is null or not an object
Line: 23
Char: 3
Code: 0
URI: supersized.3.0.js
i've heard that the true problem is a last comma (you can see at the first code on this post, there isn't...and it work perfectly.
so i want to resolve for remove the last comma at the edited slides...'cause it repeat comme at one by one images and it cause this problem on ie... how can i remove this last comma?
it is valid to have a trailing comma in an array of JS objects, so the comma is not your issue. This error is thrown because you have not set the URL property for your slide objects. this is your JSON string that you currently output:
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg'}
but you need the complete object for slides like this:
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title: 'YOUR TITLE HERE', thumb: 'SOME IMAGE PATH GOES HERE', url: 'SOME URL PATH GOES HERE'}
UPDATE:
People seem to think there is some sort of problem wit the comma. I do not think this is the main issue. It might cause problems (i dont think it will) but besides that, this guys code WILL NEVER WORK WITHOUT THROWING THE ERROR THAT HE NOTED IN HIS QUESTION. I went directly to the supersize source to show you people what the problem is.
var imageLink = (options.slides[options.slides.length - 1].url) ? "href='" + options.slides[options.slides.length - 1].url + "'" : "";
there it is. on line 23, just as HIS ERROR MESSAGE SAYS. The script is trying to access the URL property of each slide object. BUT HE HASN'T SET A URL PROPERTY. so it will ALWAYS throw the error that THE USER SAID HE IS GETTING.
Why are you constantly dropping in and out of PHP? That's terribly inefficient...
slides : [
<?php
query_posts('cat=46');
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);
}
wp_reset_query();
?>
],
Are you sure the problem is about the last coma? If yes you need to save all the images in a variable, get rid of the last coma at the end of the loop and the print the result:
<?php $string = ''; ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$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() ) { ?>
<?php $string.= '{image : '.$thumb.'},';
<?php } ?>
<?php endwhile; ?>
<?php echo substr($string, -1); ?>
3 solutions:
one:
<?php if ( have_posts() ) : $i=0; while ( have_posts() ) : the_post(); ?>
<?php
$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() ) { ?>
<?=($i>0?',':'')?>{image : '<?php echo $thumb; ?>'}
<?php } $i++;?>
two:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$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() ) { ?>
$string[]="{image : '<?php echo $thumb; ?>'}";
<?php } if (!empty($string)) implode(",",$string);
tree:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$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() ) { ?>
$string.="{image : '<?php echo $thumb; ?>'}";
<?php } $lenght=strlen($string)-2;
echo substr($string,0,$lenght);
For my point of view the second solution is the most clean.
Why not use json to form the slides array
<?php
$slide_arr = array ();
query_posts('cat=46');
if ( have_posts() ) :
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() ) {
$slideObj = new stdClass;
$slideObj->image = $thumb;
$slide_arr[] = $slideObj;
}
endwhile;
else:
endif;
wp_reset_query();
$slide_json = json_encode($slide_arr);
?>
var slide_json = '<?php echo $slide_json; ?>';
var slide_arr = eval('(' + slide_json + ')');
// js code ...
slides : slide_arr,