Posted 2 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.
Posted 2 years ago #
You know the jQuery bundled with WordPress uses jQuery. rather than $. right? That had me stumped for ages...
Posted 2 years ago #
I am so confused now... whaaaaaaaaa?
Posted 2 years ago #
Could you post the Javascript you're trying to use?
Posted 2 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...
Posted 2 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.
Posted 2 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.
Posted 2 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.
Posted 2 years ago #
and these instructions:
http://silomjournal.com/leisure/how-to-integrate-jcarousel-into-wordpress-theme/
Posted 2 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:
Posted 2 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.
Posted 2 years ago #
sorry about backticks... I see now! DUH!
Posted 2 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...
Posted 2 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.
Posted 2 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' );
Posted 2 years ago #
Hi
Thank you
It is still making a buletted list. Could it be the style sheet?
Posted 2 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?
Posted 2 years ago #
Still local. Can I let you know when I am ready to put it up? Thank you so much.
Posted 2 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 :)
Posted 2 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
Posted 2 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!
Posted 2 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('«', 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...
Posted 2 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...
Posted 2 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
This topic has been closed to new replies.
