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 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help w/jCarouselLite Auto Scroll

    I implemented a basic version of jCarouselLite using this tutorial.

    I would now like to 'upgrade' the carousel with auto scrolling functionality, but I'm having some difficulty with it. I have two javascript files () linked in my header, as well as some code:

    Code:
    <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
    	});
    	$(".auto .jCarouselLite").jCarouselLite({
        	auto: 800,
        	speed: 1000
    	});
    });
    </script>
    Here is a link to the original jCarouselLite instructions - the auto scroll functionality is listed in the right column, but I can't seem to link to it directly.

    All it shows on the auto scroll page, besides a demo, is this snippet of code:

    Code:
    $(".auto .jCarouselLite").jCarouselLite({
        auto: 800,
        speed: 1000
    });
    Any help or advice is greatly appreciated.

  • #2
    New Coder
    Join Date
    Nov 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Okay, starting over . . .

    I have made a blank page to play around with, following the instructions on http://www.gmarwaha.com/jquery/jcarousellite/#install

    View my demo page here

    Which incorporates the following files and styling lifted directly from that site:
    http://www.gmarwaha.com/jquery/jcaro...llite_1.0.1.js
    http://code.jquery.com/jquery-latest.pack.js
    and the section for the carousel styling lifted from:
    http://www.gmarwaha.com/css/style.css

    Unfortunately, it does not work.

    So, step 1: Get the default configuration working; step 2: Get the auto scroll working

    As before, any help or advice is greatly appreciated.
    Last edited by kingworks; 11-25-2009 at 02:41 AM. Reason: clarification

  • #3
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Quote Originally Posted by kingworks View Post
    step 1: Get the default configuration working
    change this:

    Code:
    $(".default .jCarouselLite").jCarouselLite({
    to this:

    Code:
    $(".anyClass").jCarouselLite({

  • #4
    New Coder
    Join Date
    Nov 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the suggestion! Unfortunately, I could not get it to work. I must be missing something . . .

    Here is the HTML (from the test page) as it now stands:
    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Gallery</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script>
    <script>
    $(".anyClass").jCarouselLite({
        btnNext: ".default .next",
        btnPrev: ".default .prev"
    });
    </script>
    <link href="templates/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="jCarouselLiteDemo" class="cEnd">
            <button class="prev"><<</button>
            <button class="next">>></button>
                <div class="anyClass">
                   <ul>
                        <li><img src="images/inverse_blank_120x80.jpg" alt="first" /></li>
                        <li><img src="images/blank_120x80.jpg" /></li>
                        <li><img src="images/blank_120x80.jpg" /></li>
                        <li><img src="images/blank_120x80.jpg" /></li>
                        <li><img src="images/blank_120x80.jpg" /></li>
                        <li><img src="images/blank_120x80.jpg" /></li>
                        <li><img src="images/blank_120x80.jpg" /></li>
                        <li><img src="images/blank_120x80.jpg" /></li>
                        <li><img src="images/blank_120x80.jpg" /></li>
                        <li><img src="images/blank_120x80.jpg" /></li>
                        <li><img src="images/blank_120x80.jpg" /></li>
                    </ul>
                </div>
        </div>
    </body>
    </html>
    And the CSS:
    Code:
    #jCarouselLiteDemo .carousel  {
        padding: 10px 0 0 0;
        margin: 0 0 20px 10px;
        position: relative;     
    }
        #jCarouselLiteDemo .digg {
            position: absolute;
            left: 610px;
            top: 110px;
        }
        #jCarouselLiteDemo .main {
            margin-left: 40px;
        }
    
        #jCarouselLiteDemo .demo em {
            color: #FF3300;
            font-weight: bold;
            font-size: 60%;        
            font-style: normal;
        }
        #jCarouselLiteDemo .carousel button { /*Don't remove this. we still use this for individual demos. only the front pages use images as of now*/
            float: left;
        }              
        #jCarouselLiteDemo .carousel a.prev, #jCarouselLiteDemo .carousel a.next {
            display: block;
            float: left;
            width: 30px;
            height: 143px;
            text-decoration: none;
            background: url("/image/imageNavLeft.gif") left 60px no-repeat;
        }
            #jCarouselLiteDemo .carousel a.next {
                background: url("/image/imageNavRight.gif") right 60px no-repeat;
            }
                #jCarouselLiteDemo .carousel a.next:hover {
                    background-image: url("/image/imageNavRightHover.gif");
                }
                #jCarouselLiteDemo .carousel a.prev:hover {
                    background-image: url("/image/imageNavLeftHover.gif");
                }    
                #jCarouselLiteDemo .carousel a:hover, #jCarouselLiteDemo .carousel a:active {
                    border: none;
                    outline: none;
                }                 
        #jCarouselLiteDemo .carousel .jCarouselLite {
            border: 1px solid black;
            float: left;
            background-color: #dfdfdf;
            
            /* Needed for rendering without flicker */
            position: relative;
            visibility: hidden;
            left: -5000px;
        }
            #jCarouselLiteDemo .carousel ul {
                margin: 0;
            }
            #jCarouselLiteDemo .carousel li img, 
            #jCarouselLiteDemo .carousel li p {
                background-color: #fff;
                width: 150px;
                height: 118px;
                margin: 10px;
            }
            
            #jCarouselLiteDemo .widget img {
                cursor: pointer;
            }
                #jCarouselLiteDemo .mid {
                    margin-left: 80px;
                    width: 400px;
                    height: 300px;
                }
                #jCarouselLiteDemo .vertical {
                    margin-left: 170px;
                }
                    #jCarouselLiteDemo .vertical .jCarouselLite {   /* so that in IE 6, the carousel div doesnt expand to fill the space */
                        width: 170px;
                    }
                #jCarouselLiteDemo .imageSlider li img, 
                #jCarouselLiteDemo .imageSlider li p, 
                #jCarouselLiteDemo .imageSliderExt li img , 
                #jCarouselLiteDemo .imageSliderExt li p {
                    width: 400px;
                    height: 300px;
                }

  • #5
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Ok. First, you've taken the $(document).ready() bit out. That means your code is trying to run on HTML that hasn't loaded yet. Second, you've wrapped the jcarousel stuff in a container element, and all the styles that should be applied to the carousel are being applied to the container.

    My advice: copy the files from the jcarousel page. Copy the code from the jcarousel page. Do not change *anything*. Get the default install working as it does on their site. Then start tweaking the layout.

  • #6
    New Coder
    Join Date
    Nov 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Got the default configuration working using the HTML, script and file calls from the original website.

    After taking a good look at the site's navigation, I realized that half the pages are anchored off of index.php. The code I was looking at was not the Default Configuration, but taken from another example.

    So, heading into Step 2: Applying the Auto Scroll, this is what the code looks like:
    index.html
    <head>
    <link rel="stylesheet" href="templates/style.css" type="text/css" media="screen">
    <script type="text/javascript" src="js/lib.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/jquery.jcarousellite.min.js"></script>
    <script type="text/javascript" src="js/script_jcarousellite.js"></script>
    </head>
    <body>
    <div id="demo" class="cEnd tabs-container">
    <h2>Default Configuration</h2>
    <div class="carousel default">
    <button class="prev"><<</button>
    <div class="jCarouselLite">
    <ul>
    <li><img src="images/inverse_blank_120x80.jpg" alt="first" /></li>
    <li><img src="images/blank_120x80.jpg" /></li>
    <li><img src="images/blank_120x80.jpg" /></li>
    <li><img src="images/blank_120x80.jpg" /></li>
    <li><img src="images/blank_120x80.jpg" /></li>
    <li><img src="images/blank_120x80.jpg" /></li>
    <li><img src="images/blank_120x80.jpg" /></li>
    <li><img src="images/blank_120x80.jpg" /></li>
    <li><img src="images/blank_120x80.jpg" /></li>
    <li><img src="images/blank_120x80.jpg" /></li>
    <li><img src="images/blank_120x80.jpg" /></li>
    </ul>
    </div>
    <button class="next">>></button>
    <div class="clear"></div>
    </div>
    <script type="text/javascript">
    $(".default .jCarouselLite").jCarouselLite({
    btnNext: ".default .next",
    btnPrev: ".default .prev"
    });
    </script>
    </body>
    (style.css didn't change)

  • #7
    New Coder
    Join Date
    Nov 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Got it working in the test site.

    Here is the HTML & in-line script, for easy reference (It's a huge pain to find on the actual site)

    Code:
    <div id="demo" class="cEnd tabs-container" style="visibility: visible;">
    <h2>Auto-Scroll</h2>
    <div class="carousel auto">
    <div class="jCarouselLite" style="overflow: hidden; visibility: visible; position: relative; z-index: 2; left: 0px; width: 510px;">
    <ul style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 2890px; left: -850px;">
     <li><img src="images/inverse_blank_120x80.jpg" alt="first" /></li>
                <li><img src="images/blank_120x80.jpg" /></li>
    			<li><img src="images/blank_120x80.jpg" /></li>
               <li><img src="images/blank_120x80.jpg" /></li>
               <li><img src="images/blank_120x80.jpg" /></li>
               <li><img src="images/blank_120x80.jpg" /></li>
               <li><img src="images/blank_120x80.jpg" /></li>
               <li><img src="images/blank_120x80.jpg" /></li>
               <li><img src="images/blank_120x80.jpg" /></li>
               <li><img src="images/blank_120x80.jpg" /></li>
               <li><img src="images/blank_120x80.jpg" /></li>
    </ul>
    </div>
    <div class="clear"/>
    </div>
    <script type="text/javascript">
    $(".auto .jCarouselLite").jCarouselLite({
        auto: 800,
        speed: 1000
    });
    </script>

  • #8
    New Coder
    Join Date
    Nov 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Okay, one final hurdle.

    I've got Auto Scroll working on the page, but I can't style it the way I'd like to because the styling is being set in jquery.jcarousellite.min.js and not a .css file.

    I can edit the left property in the c.css portion of the code (highlighted in the code block below), but I have no clue how to edit the width property.
    Code:
    (function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var b=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var c=$(this),ul=$("ul",c),tLi=$("li",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var f=$("li",ul),itemLength=f.size(),curr=o.start;c.css("visibility","visible");f.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"});c.css({overflow:"hidden",position:"relative","z-index":"2",left:"500px"});var g=o.vertical?height(f):width(f);var h=g*itemLength;var j=g*v;f.css({width:f.width(),height:f.height()});ul.css(sizeCss,h+"px").css(animCss,-(curr*g));c.css(sizeCss,j+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,a){$(a).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&c.mousewheel)c.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return f.slice(curr).slice(0,v)};function go(a){if(!b){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(a<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*g)+"px");curr=a==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(a>=itemLength-v+1){ul.css(animCss,-((v)*g)+"px");curr=a==itemLength-v+1?v+1:v+o.scroll}else curr=a}else{if(a<0||a>itemLength-v)return;else curr=a}b=true;ul.animate(animCss=="left"?{left:-(curr*g)}:{top:-(curr*g)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());b=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(a,b){return parseInt($.css(a[0],b))||0};function width(a){return a[0].offsetWidth+css(a,'marginLeft')+css(a,'marginRight')};function height(a){return a[0].offsetHeight+css(a,'marginTop')+css(a,'marginBottom')}})(jQuery);
    Here's how the properties show up in Firebug/Firefox:

  • #9
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    mouseover scroll for jCarouselLite

    How can mouseover scroll for jCarouselLite be implemnted without clicking the next and prev arrrows?
    I want Next and Previous items be shown when mouse is over next or prev buttons and stopped when mouse is moved outside.


    Quote Originally Posted by kingworks View Post
    Okay, starting over . . .

    I have made a blank page to play around with, following the instructions on http://www.gmarwaha.com/jquery/jcarousellite/#install

    View my demo page here

    Which incorporates the following files and styling lifted directly from that site:
    http://www.gmarwaha.com/jquery/jcaro...llite_1.0.1.js
    http://code.jquery.com/jquery-latest.pack.js
    and the section for the carousel styling lifted from:
    http://www.gmarwaha.com/css/style.css

    Unfortunately, it does not work.

    So, step 1: Get the default configuration working; step 2: Get the auto scroll working

    As before, any help or advice is greatly appreciated.

  • #10
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, this was VERY helpful...reading this post enabled me to get the JCarousel working!

    <div class="carousel auto">
    <div class="jCarouselLite" style="overflow: hidden; visibility: visible; position: relative; z-index: 2; left: 0px; width: 510px;">


    WHERE is this information posted on the site that hosts the jCarousel stuff?


  •  

    Posting Permissions

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