jQuery Need Help To Set Selected JCarousel

elza · 03-17-2012, 01:59 PM

Hi, I'm fairly new to Jquery and I'm having trouble making this JCarousel work the way I would like it to. So far it does what I want in auto-scrolling the images and allowing to go to certain images by using the navigation.
The problem I am having is that I would to have the navigation linked to the Carousel so when one is looking at a particular slide the slide the number for that slide is a different color to the rest. E.G when image 2 is being viewed:
1 2 3 4 5.

this is the index page:

Code:

<html>
<head>
<!--LINK TO CSS HERE-->
<link rel="stylesheet" type="text/css" href="./css/main.css"/>

<!--
  jQuery library
-->
<script type="text/javascript" src="./lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="./lib/jquery.jcarousel.min.js"></script>

<script type="text/javascript">
/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */

function mycarousel_initCallback(carousel) {
    jQuery('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });


    jQuery('#mycarousel-next').bind('click', function() {
        carousel.next();
        return false;
    });

    jQuery('#mycarousel-prev').bind('click', function() {
        carousel.prev();
        return false;
    });


    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};


jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 1,
        wrap: 'last',
		scroll: 1,
        initCallback: mycarousel_initCallback,
    });

});

</script>


</head>
<body>



<div id="topdiv">

  <div id="mycarousel" class="jcarousel-skin-tango">

	<div class="jcarousel-container">
    <ul>
      <li><img width="730" height="350" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li>
      <li><img width="730" height="350" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="" /></li>
      <li><img width="730" height="350" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li>
      <li><img width="730" height="350" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li>
      <li><img width="730" height="350" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li>
	</ul>
	</div>


  
	<div class="jcarousel-control">
      <a href="#" class="jcarousel-link">1</a>
      <a href="#" class="jcarousel-link">2</a>
      <a href="#" class="jcarousel-link">3</a>
      <a href="#" class="jcarousel-link">4</a>
      <a href="#" class="jcarousel-link">5</a>
    </div>
</div>
</div>
</div>



</body>
</html>

This is the css

Code:

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
}

table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style: round; }
q:before, q:after { content:''; }
/* end reset */

html, body
{
background-color: #464646;
margin:0;
padding:0;
color: #ffffff;
font-family: Helvetica, Times New Roman;
}

a
{
color: #ffffff;
text-decoration:none
}


img
{
border: none;
}

/*Container*/

.jcarousel-skin-tango
{
background: #000000;
margin: 50px 0px 0px 0px;
width: 730px;
height: 350px;
padding: 20px 40px;
}

.jcarousel-container
{
width: 730px;
height: 350px;
margin: 0 auto;
float: left;
}


/*Hides Overflow*/
.jcarousel-clip {
    overflow: hidden;
}

/*Nav Style*/
.jcarousel-control {
	text-align: center;
	background-color: #464646;
	width: 150px;
	position: absolute;
	margin-left: 560px;
	margin-top: 300px;
	height: 35px;
	}

/*Link Style*/
.jcarousel-control a {
    font-size: 30px;
    text-decoration: none;
	font-family: Arial;
    color: #;
	padding: 2px;
	line-height: 39px;
}

.active
{
color: green;
}

The 'jquery.jcarousel.min.js' is too long to fit in the post, but you can get it here http://elzawebdesign.com/JCarousel/l...arousel.min.js

The 'jquery-1.4.2.min.js' is also too long to fit in the post, but you can get it here:
http://elzawebdesign.com/JCarousel/l...y-1.4.2.min.js

The JCarousel is hosted here: http://elzawebdesign.com/JCarousel/

Thanks in advance,
Elza

sayannayas · 05-26-2012, 09:53 PM

You can use two call back methods like

itemVisibleInCallback: highlight,
itemVisibleOutCallback: removehighlight

And add css like
//activate
document.getElementById(liindex).className="selected";
//deactivate
document.getElementById(liindex).className="unselected";

Check out my blog post for more details:

http://fundapass.blogspot.in/2012_05_25_archive.html