Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need Help To Set Selected JCarousel

    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

  • #2
    New Coder
    Join Date
    May 2012
    Posts
    25
    Thanks
    0
    Thanked 1 Time in 1 Post
    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


  •  

    Tags for this Thread

    Posting Permissions

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