WordPress.org

Forums

[resolved] JCarousel -Please Help (24 posts)

  1. tinkerdomino
    Member
    Posted 5 years ago #

    Please help. I am trying to use JCarousel in a site, and I just cannot get it to work. The best I can get is all the images displayed in a bulletted list. I am tearing my hair out! I am developing the site locally - could this be a problem?

    Please help me.

  2. Adam Harley (Kawauso)
    Member
    Posted 5 years ago #

    You know the jQuery bundled with WordPress uses jQuery. rather than $. right? That had me stumped for ages...

  3. tinkerdomino
    Member
    Posted 5 years ago #

    I am so confused now... whaaaaaaaaa?

  4. Adam Harley (Kawauso)
    Member
    Posted 5 years ago #

    Could you post the Javascript you're trying to use?

  5. tinkerdomino
    Member
    Posted 5 years ago #

    '<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jcarousellite.js"></script>
    <script>
    $(document).ready(function() {
    $(".widget_style").jCarouselLite({
    btnPrev: ".previous",
    btnNext: ".next",
    /*this makes it a true carousel rather than a slideshow*/
    circular: true
    });
    });'

    I hope is have put the code in correctly...

  6. Adam Harley (Kawauso)
    Member
    Posted 5 years ago #

    Could you post the HTML you're using as well? I think I might know what's up, possibly. By the way, if you were trying to use backticks before, they're not the same as quote marks.

  7. tinkerdomino
    Member
    Posted 5 years ago #

    I have no idea what a back tick is... Sorry - we have different names for punctuation here...

    I have tried alsorts, but at the moment I ma trying these instructions:
    http://www.shahin.co.nr/how-to-install-and-style-jcarousel-lite/

    I did follow all the instructions, and they did not work. To test, I an now trying to call jc.php like this: but it has the same result.

  8. tinkerdomino
    Member
    Posted 5 years ago #

    I have no idea what a back tick is... Sorry - we have different names for punctuation here...

    I have tried alsorts, but at the moment I ma trying these instructions:
    http://www.shahin.co.nr/how-to-install-and-style-jcarousel-lite/

    I did follow all the instructions, and they did not work. To test, I an now trying to call jc.php like this: <?php include (TEMPLATEPATH . '/jc.php'); ?>
    but it has the same result.

  9. tinkerdomino
    Member
    Posted 5 years ago #

  10. Adam Harley (Kawauso)
    Member
    Posted 5 years ago #

    A backtick is shown at the bottom of the post form :P

    I think those last instructions were written for a relatively old version of WordPress. As far as I know, there isn't such thing as TEMPLATEPATH anymore, that's been replaced. For the sake of simplicity, let's try this. Put all the files for jCarousel under /wp-content/plugins/jcarousel and take out everything else, you start from the beginning.

    In your theme's functions.php (if you don't have one, make one and put <?php and ?> around the following), put:

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jcarousel', '/wp-content/plugins/jcarousel/lib/jcarousel.js', array('jquery'), 0.2.3 );
    wp_enqueue_style( 'jcarousel', '/wp-content/plugins/jcarousel/lib/jquery.jcarousel.css', null, 0.2.3 );
    wp_enqueue_style( 'jcarousel-ie7', '/wp-content/plugins/jcarousel/skins/ie7/skin.css', array('jcarousel'), 0.2.3 );

    then use the example javascript to load it in whichever page. Instead of using TEMPLATEPATH though, use get_theme_root().

    I think that should work. You can't use <?php tags inside a WordPress page though without a special plugin, only templates, so it might be easier to just use the code instead.

    ....argh these tutorials are all horrible D:

  11. tinkerdomino
    Member
    Posted 5 years ago #

    Thank you so much... super star

    I am ftping site, and will give it a bash tomorrow (its late here...) will let you know.

    Thank you so much again.

  12. tinkerdomino
    Member
    Posted 5 years ago #

    sorry about backticks... I see now! DUH!

  13. tinkerdomino
    Member
    Posted 5 years ago #

    Hi again

    I tried all, but am now getting a parse error (still local - ftping in this country is a silly joke!)

    The parse error is as follows:
    Parse error: parse error in C:\wamp\www\Thean\wp-content\themes\Thean\functions.php on line 10

    the code for fucntions is as follows:

    <?php
     if ( function_exists('register_sidebars') )
     register_sidebars(2,array(
            'before_widget' => '',
        'after_widget' => '',
     'before_title' => '<h5>',
            'after_title' => '</h5>',
        ));
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jcarousel', '/wp-content/plugins/jcarousel/lib/jcarousel.js', array('jquery'), 0.2.3 );
    wp_enqueue_style( 'jcarousel', '/wp-content/plugins/jcarousel/lib/jquery.jcarousel.css', null, 0.2.3 );
    wp_enqueue_style( 'jcarousel-ie7', '/wp-content/plugins/jcarousel/skins/ie7/skin.css', array('jcarousel'), 0.2.3 );
    ?>

    And the page header template:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    
    <title><?php wp_title(''); if (function_exists('is_tag') and is_tag()) { ?>Tag Archive for <?php echo $tag; } if (is_archive()) { ?> archive<?php } elseif (is_search()) { ?> Search for <?php echo $s; } if ( !(is_404()) && (is_search()) or (is_single()) or (is_page()) or (function_exists('is_tag') and is_tag()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?></title>
    	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
    	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_head(); ?>
    <script type="text/javascript">
    
    jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel();
    });
    
    </script>
    </head>
    <body>
    
    <div id="wrap">
    <div id="head" onclick="location.href='http://randaclay.com/themes';" title="return to main page"; style="cursor: pointer;">
    	<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    		<div class="description"><h2><?php bloginfo('description'); ?></h2></div>
    
    <ul id="mycarousel" class="jcarousel-skin-tango">
        <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    
        <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
      </ul>
    
    </div>

    This is geeting really sad!

    Thank you for all help so far...

  14. tinkerdomino
    Member
    Posted 5 years ago #

    Oh... and I get the same error if I try to log in. If I remove the script in functions.php, I can get into the site, but the images appear as an bullet list.

  15. Adam Harley (Kawauso)
    Member
    Posted 5 years ago #

    Whoops. Apparently PHP doesn't like having numbers with double decimals outside of quote marks.

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jcarousel', '/wp-content/plugins/jcarousel/lib/jcarousel.js', array('jquery'), '0.2.3' );
    wp_enqueue_style( 'jcarousel', '/wp-content/plugins/jcarousel/lib/jquery.jcarousel.css', null, '0.2.3' );
    wp_enqueue_style( 'jcarousel-ie7', '/wp-content/plugins/jcarousel/skins/ie7/skin.css', array('jcarousel'), '0.2.3' );
  16. tinkerdomino
    Member
    Posted 5 years ago #

    Hi

    Thank you
    It is still making a buletted list. Could it be the style sheet?

  17. Adam Harley (Kawauso)
    Member
    Posted 5 years ago #

    More likely it's the javascript not loading properly. Could you give me a link to the page you're trying to do it on?

  18. tinkerdomino
    Member
    Posted 5 years ago #

    Still local. Can I let you know when I am ready to put it up? Thank you so much.

  19. Adam Harley (Kawauso)
    Member
    Posted 5 years ago #

    Entirely up to you, it's just easier to try and fix if I can see the live code, but if it works fine there's no need :)

  20. tinkerdomino
    Member
    Posted 5 years ago #

    Hello

    I'm back

    I have uploaded to here:
    http://theantoerien.co.za/thean/

    Please see if you can spot the problem?

    Thank you

  21. tinkerdomino
    Member
    Posted 5 years ago #

    Fixed! Or rather, fixed by my friend Simon, who removed the code from functions.php.

    Thank you so much for all your help and patience Kawauso... I think I anyway have a better understanding of jScript now!

    for interest, this is my header.php now:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    
    <title><?php wp_title(''); if (function_exists('is_tag') and is_tag()) { ?>Tag Archive for <?php echo $tag; } if (is_archive()) { ?> archive<?php } elseif (is_search()) { ?> Search for <?php echo $s; } if ( !(is_404()) && (is_search()) or (is_single()) or (is_page()) or (function_exists('is_tag') and is_tag()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?></title>
    	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
    	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <link rel="stylesheet" href="./wp-content/themes/Thean/jcarousel/lib/jquery.jcarousel.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="./wp-content/themes/Thean/jcarousel/skins/tango/skin.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="./wp-content/themes/Thean/jcarousel/skins/ie7/skin.css" type="text/css" media="screen" />
    
    <?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
    
    <script type="text/javascript" src="./wp-content/themes/Thean/jcarousel/lib/jquery.jcarousel.pack.js"></script>
    <script type="text/javascript">
    
    jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel();
    });
    
    </script>
    
    </head>
    <body>
    
    <div id="wrap">
    <div class="menucontainer">
    <div class="menu"><?php displayMenu(1); ?></div><div class="shareblock">
                        <ul>
    <li><a href="http://www.facebook.com/home.php#/yourfcaebook?ref=nf" target="_blank"><img alt="" src="<?php bloginfo('stylesheet_directory'); ?>/images/facebook.gif"></a></li>
                                  <li><a href="yourtwitterpage" target="_blank"><img alt="" src="<?php bloginfo('stylesheet_directory'); ?>/images/twitter.gif"></a></li>
                        </ul>
              </div></div>
    <div id="head">
    	<h1><a href="<?php echo get_option('home'); ?>/"></a></h1>
    		<div class="description"></div>
    <ul id="mycarousel" class="jcarousel-skin-tango">
        <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
      </ul>
    
    </div>

    Thank you everyone for your patience!

  22. meggsp
    Member
    Posted 5 years ago #

    I'm having the same problem, but your "finished" code unfortunately doesn't work. Would someone mind taking a look please?

    Header

    <?php
    /**
     * @package WordPress
     * @subpackage Default_Theme
     */
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    
    <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
    
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> 
    
    <script type="text/javascript" src="http://www.enrapturedrecords.com/Enraptured_Records/wp-content/jquery/jquery.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function() {	
    
    	//Show Banner
    	$(".main_image .desc").show(); //Show Banner
    	$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
    
    	//Click and Hover events for thumbnail list
    	$(".image_thumb ul li:first").addClass('active');
    	$(".image_thumb ul li").click(function(){
    		//Set Variables
    		var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
    		var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
    		var imgDesc = $(this).find('.block').html(); 	//Get HTML of block
    		var imgDescHeight = $(".main_image").find('.block').height();	//Calculate height of block	
    
    		if ($(this).is(".active")) {  //If it's already active, then...
    			return false; // Don't click through
    		} else {
    			//Animate the Teaser
    			$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
    				$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
    				$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
    			});
    		}
    
    		$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
    		$(this).addClass('active');  //add class of 'active' on this list only
    		return false;
    
    	}) .hover(function(){
    		$(this).addClass('hover');
    		}, function() {
    		$(this).removeClass('hover');
    	});
    
    	//Toggle Teaser
    	$("a.collapse").click(function(){
    		$(".main_image .block").slideToggle();
    		$("a.collapse").toggleClass("show");
    	});
    
    });//Close Function
    </script> 
    
    <link rel="stylesheet" href="http://www.enrapturedrecords.com/Enraptured_Records/wp-content/jquery/jcarousel/lib/jquery.jcarousel.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://www.enrapturedrecords.com/Enraptured_Records/wp-content/jquery/jcarousel/skins/tango/skin.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://www.enrapturedrecords.com/Enraptured_Records/wp-content/jquery/jcarousel/skins/ie7/skin.css" type="text/css" media="screen" />
    
    <script type="text/javascript" src="http://www.enrapturedrecords.com/Enraptured_Records/wp-content/jquery/jcarousel/lib/jquery.jcarousel.pack.js"></script>
    
    <script type="text/javascript"> 
    
    jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel();
    });
    
    </script> 
    
    <style type="text/css" media="screen">
    
    <?php
    // Checks to see whether it needs a sidebar or not
    if ( empty($withcomments) && !is_single() ) {
    ?>
    	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
    <?php } else { // No sidebar ?>
    	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
    <?php } ?>
    
    </style>
    
    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    
    <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
    <div id="container">
    <div id="logoNav"><center>
    <img src="http://www.enrapturedrecords.com/Enraptured_Records/wp-content/themes/enrapturedV2/images/logo.png"></center>
    <hr color="#000000" width="100%">
    <?php get_search_form(); ?>
    <center>Site | Social | Shop</center>
    </div>

    Page Code

    <div id="old_releases">
    
    <ul id="mycarousel" class="jcarousel-skin-tango">
        <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
      </ul>
    </div>

    Any ideas? It's always bulleted. Thing is, even when it wasn't bulleted but working correctly, the arrows aren't showing up, plus the widget itself doesn't work...

  23. meggsp
    Member
    Posted 5 years ago #

    Also, if you browse the page in IE, you'll notive a problem pops up. I've no idea how to rectify that, but it's the '#' character in the JQuery...

  24. suresh.kalyani@gmail.com
    Member
    Posted 5 years ago #

    Hi,

    I want to integrate jcarousel with SHOPP database either with a standalone code or with a plug-in...can you help? I've been tearing my hair out scouring the internet for solutions...no one seems to know how to do this!!

    Regards,

    Kalyani

Topic Closed

This topic has been closed to new replies.

About this Topic