SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast paul_sideradesig's Avatar
    Join Date
    Jan 2010
    Location
    brazil
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question jcarousel not appearing in Chrome, Safari, Opera

    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/c...-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:
    PHP 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 "\n";
            foreach ( 
    $attachments as $id => $attachment )
                
    $output .= wp_get_attachment_link($id$sizetrue) . "\n";
            return 
    $output;
        }
        


        
    /**
        * Start output
        */
        
    $output "\t
        <!-- Begin Carousel Gallery -->
        <div class='carousel-gallery'>
        "
    ;


        
    /**
        * Add ULs
        */
        
    $output .= "<ul id='mycarousel_".$post->ID."' class='jcarousel-skin-neat'><li></li></ul>\n";


        
    /**
        * Add next/prev
        */
        
    $output .= "<div class='jcarousel-scroll'><a class='cgj_prev' href='#' id='mycarousel_".$post->ID."-prev'>" __('&laquo; Previous''carousel-gallery-jquery') . "</a><a class='cgj_next' href='#' id='mycarousel_".$post->ID."-next'>"__('Next &raquo;''carousel-gallery-jquery') . "</a></div>";






        
    /* hide titles, fixme */

            
    $output .= "<style>h2.cgj_title { display: none; }</style>";



        
    /**
        * Add images
        */
        
    $output .= "<script type='text/javascript'>\n
        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(",\n"$js);
        
    $output .= "];\n";

        
        

        
    /**
        * 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'>\n
        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";
        
    $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$sizetrue);        

            
    $output .= "<a href=\"#\" class=\"item".$n."_".$post->ID."\"><span>".$n."</span>" wp_get_attachment_image$id$thumb_size ) . "</a>\n";
            
    $n++;
            
        }
        
    $output .= '</div></div>';
        
        
        
    /**
        * End
        */
        
    $output .= "
            <br style='clear: both;' />
        </div>
        <!-- End Carousel Gallery -->\n
        "
    ;

    }
        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

  2. #2
    SitePoint Enthusiast paul_sideradesig's Avatar
    Join Date
    Jan 2010
    Location
    brazil
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know the code is quite long, but it's because I have no idea where the problem is
    what information can I give to help resolve this?

  3. #3
    SitePoint Enthusiast paul_sideradesig's Avatar
    Join Date
    Jan 2010
    Location
    brazil
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've completely rebuilt from scratch, so this topic is no longer relevant


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •