JCarousel -Please Help

  • Resolved tinkerdomino

    (@tinkerdomino)


    16 years, 9 months 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.

Viewing 8 replies - 16 through 23 (of 23 total)
1 2
  • Adam Harley (Kawauso)

    (@kawauso)

    16 years, 9 months 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?

    Thread Starter tinkerdomino

    (@tinkerdomino)

    16 years, 9 months ago

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

    Adam Harley (Kawauso)

    (@kawauso)

    16 years, 9 months 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 🙂

    Thread Starter tinkerdomino

    (@tinkerdomino)

    16 years, 9 months 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

    Thread Starter tinkerdomino

    (@tinkerdomino)

    16 years, 9 months 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!

    mdm

    (@meggsp)

    16 years, 2 months 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…

    mdm

    (@meggsp)

    16 years, 2 months 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…

    sureshkalyanigmailcom

    (@sureshkalyanigmailcom)

    16 years, 1 month 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

Viewing 8 replies - 16 through 23 (of 23 total)
1 2

The topic ‘JCarousel -Please Help’ is closed to new replies.