Hello
here is the problematic page:http://sideradesign.com/eco-art/gallery/
The gallery displays in IE8 and Firefox, but not in Chrome, Opera or Safari.
Let me explain : first of all, I’m not an expert in javascript, I have just copied a wordpress plugin code into the functions.php file and hacked away at it until it worked in Firefox.
The original plugin is http://noscope.com/journal/2009/03/carousel-gallery-jquery-for-wordpress
I noticed that in Chrome, there are 2 divs that don’t get assigned the same classes as they do in Firefox, and the UL that contains the images is empty. So apparently the javascript is being executed correctly.
here is the code:
function carousel_gallery_jquery($output, $attr) {
if(is_page('64') || is_child('64')){
/**
* Grab attachments
*/
global $post;
if ( isset( $attr['orderby'] ) ) {
$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
if ( !$attr['orderby'] )
unset( $attr['orderby'] );
}
extract(shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => 'dl',
'icontag' => 'dt',
'captiontag' => 'dd',
'columns' => 3,
'size' => 'full',
), $attr));
$id = intval($id);
$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
if ( empty($attachments) )
return '';
if ( is_feed() ) {
$output = "\
";
foreach ( $attachments as $id => $attachment )
$output .= wp_get_attachment_link($id, $size, true) . "\
";
return $output;
}
/**
* Start output
*/
$output = "\
<!-- Begin Carousel Gallery -->
<div class='carousel-gallery'>
";
/**
* Add ULs
*/
$output .= "<ul id='mycarousel_".$post->ID."' class='jcarousel-skin-neat'><li></li></ul>\
";
/**
* Add next/prev
*/
$output .= "<div class='jcarousel-scroll'><a class='cgj_prev' href='#' id='mycarousel_".$post->ID."-prev'>" . __('« Previous', 'carousel-gallery-jquery') . "</a><a class='cgj_next' href='#' id='mycarousel_".$post->ID."-next'>". __('Next »', 'carousel-gallery-jquery') . "</a></div>";
/* hide titles, fixme */
$output .= "<style>h2.cgj_title { display: none; }</style>";
/**
* Add images
*/
$output .= "<script type='text/javascript'>\
var mycarousel_itemList_".$post->ID." = [
";
$js = array();
foreach ( $attachments as $id => $attachment ) {
$image = wp_get_attachment_image_src($id, "large");
$js[] = "{url: '" . $image[0] . "', title: '".addslashes($attachment->post_title)."', caption: '".addslashes(remove_brs($attachment->post_excerpt))."', description: '".addslashes(remove_brs($attachment->post_content))."'}";
}
$output .= join(",\
", $js);
$output .= "];\
";
/**
* Add scripts
*/
$output .= "
function mycarousel_".$post->ID."_itemVisibleInCallback(carousel, item, i, state, evt)
{
// The index() method calculates the index from a
// given index who is out of the actual item range.
var idx = carousel.index(i, mycarousel_itemList_".$post->ID.".length);
// crappy IE6 crappety crap
//var isMSIE = /*@cc_on!@*/false;
//if (isMSIE && idx == mycarousel_itemList_".$post->ID.".length) {
// idx = 1;
// i = 1;
//}
carousel.add(i, mycarousel_".$post->ID."_getItemHTML(mycarousel_itemList_".$post->ID."[idx - 1]));
};
function mycarousel_".$post->ID."_itemVisibleOutCallback(carousel, item, i, state, evt)
{
carousel.remove(i);
};
/**
* Item html creation helper.
*/
function mycarousel_".$post->ID."_getItemHTML(item)
{
return \\"<h2 class='cgj_title'>\\" + item.title + \\"</h2><div class='cgj_image'><a href='#' rel='nofollow'><img src='\\"+item.url+\\"' alt='\\"+item.title+\\"' /></a></div><p class='caption'>\\" + item.caption + \\"</p><p class='description'>\\" + item.description + \\"</p>\\";
};
/**
* We use the initCallback callback
* to assign functionality to the controls
*/
function mycarousel_".$post->ID."_initCallback(carousel) {
jQuery('.jcarousel-control_".$post->ID." a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
jQuery('.jcarousel-scroll select').bind('change', function() {
carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
return false;
});
jQuery('#mycarousel_".$post->ID."-next').bind('click', function() {
carousel.next();
/*";
if (get_option('cgj_thumbnail_overflow') == "true") {
$output .= "
scrollThumbnails(nextItem);
";
}
$output .= "*/
return false;
});
jQuery('#mycarousel_".$post->ID."-prev').bind('click', function() {
carousel.prev();
/*";
if (get_option('cgj_thumbnail_overflow') == "true") {
$output .= "
scrollThumbnails(nextItem);
";
}
$output .= "*/
return false;
});
jQuery('#mycarousel_".$post->ID."-forward').bind('click', function() {
carousel.next();
return false;
});
};
/**
* This is the callback function which receives notification
* when an item becomes the first one in the visible range.
*/
function mycarousel_".$post->ID."_itemFirstInCallback(carousel, item, idx, state) {
nextItem = idx % mycarousel_itemList_".$post->ID.".length;
nextItem = (nextItem == 0) ? mycarousel_itemList_".$post->ID.".length : nextItem;
jQuery('.jcarousel-control_".$post->ID." a').removeClass('active');
jQuery('.item'+nextItem+'_".$post->ID."').addClass('active');
// add forward btns on each image in its own right
jQuery('#mycarousel_".$post->ID." a').bind('click', function() {
carousel.next();
/*";
if (get_option('cgj_thumbnail_overflow') == "true") {
$output .= "
scrollThumbnails(nextItem);
";
}
$output .= "*/
return false;
});
};
/**
* Scroll thumbnails
*/
/*function scrollThumbnails(idx) {
if (idx == mycarousel_itemList_".$post->ID.".length) {
idx = 0;
}
if (idx < 0) {
idx = mycarousel_itemList_".$post->ID.".length + idx;
}
jQuery('#header').html(idx);
// scroll to active thumb
var thumbWidth = jQuery('.carousel-controls-inner a').outerWidth() + parseInt(jQuery('.carousel-controls-inner a').css('margin-right')); //jQuery('.item'+nextItem+'_".$post->ID."').offset().left;
jQuery('.carousel-controls-inner').animate({
marginLeft: -1 * (thumbWidth * idx)
}, 'fast' );
}*/
</script>
";
/**
* Initialize
*/
$output .= "<script type='text/javascript'>\
jQuery(document).ready(function() {
jQuery('#mycarousel_".$post->ID."').jcarousel({
wrap: 'circular',
itemVisibleInCallback: {onBeforeAnimation: mycarousel_".$post->ID."_itemVisibleInCallback}
,itemVisibleOutCallback: {onAfterAnimation: mycarousel_".$post->ID."_itemVisibleOutCallback}
,scroll: 1
,animation: ".stripslashes(get_option('cgj_animation_speed'))."
,initCallback: mycarousel_".$post->ID."_initCallback
,buttonNextHTML: null
,buttonPrevHTML: null
,itemFirstInCallback: mycarousel_".$post->ID."_itemFirstInCallback
});
});
</script>
";
/**
* Add thumbnail navigation
*/
$output .= "<div class='carousel-controls jcarousel-control_".$post->ID."'><div class='carousel-controls-inner'>\
";
$n = 1;
if (get_option('cgj_thumbnail_size') && get_option('cgj_thumbnail_size') != "") {
$thumb_size = array(get_option('cgj_thumbnail_size'), get_option('cgj_thumbnail_size'));
} else {
$thumb_size = 'thumbnail';
}
foreach ( $attachments as $id => $attachment ) {
$link = wp_get_attachment_link($id, $size, true);
$output .= "<a href=\\"#\\" class=\\"item".$n."_".$post->ID."\\"><span>".$n."</span>" . wp_get_attachment_image( $id, $thumb_size ) . "</a>\
";
$n++;
}
$output .= '</div></div>';
/**
* End
*/
$output .= "
<br style='clear: both;' />
</div>
<!-- End Carousel Gallery -->\
";
}
return $output;
}
these 2 divs have no class in Chrome:
<div class=“jcarousel-container jcarousel-container-horizontal” style=“display: block;”>
<div class=“jcarousel-clip jcarousel-clip-horizontal”>
I hope someone can help
thanks
Paul