Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks
Reload this Page jQuery Help w/jCarouselLite Auto Scroll

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-21-2009, 04:06 AM   PM User | #1
kingworks
New Coder

 
Join Date: Nov 2009
Posts: 17
Thanks: 2
Thanked 0 Times in 0 Posts
kingworks is an unknown quantity at this point
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.
kingworks is offline   Reply With Quote
Old 11-25-2009, 02:39 AM   PM User | #2
kingworks
New Coder

 
Join Date: Nov 2009
Posts: 17
Thanks: 2
Thanked 0 Times in 0 Posts
kingworks is an unknown quantity at this point
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
kingworks is offline   Reply With Quote
Old 11-25-2009, 11:13 AM   PM User | #3
Spudhead
Senior Coder

 
Spudhead's Avatar
 
Join Date: Jun 2002
Location: London, UK
Posts: 1,856
Thanks: 8
Thanked 110 Times in 109 Posts
Spudhead is on a distinguished road
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({
Spudhead is offline   Reply With Quote
Old 11-25-2009, 06:41 PM   PM User | #4
kingworks
New Coder

 
Join Date: Nov 2009
Posts: 17
Thanks: 2
Thanked 0 Times in 0 Posts
kingworks is an unknown quantity at this point
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;
            }
kingworks is offline   Reply With Quote
Old 11-26-2009, 10:10 AM   PM User | #5
Spudhead
Senior Coder

 
Spudhead's Avatar
 
Join Date: Jun 2002
Location: London, UK
Posts: 1,856
Thanks: 8
Thanked 110 Times in 109 Posts
Spudhead is on a distinguished road
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.
Spudhead is offline   Reply With Quote
Old 12-01-2009, 01:45 AM   PM User | #6
kingworks
New Coder

 
Join Date: Nov 2009
Posts: 17
Thanks: 2
Thanked 0 Times in 0 Posts
kingworks is an unknown quantity at this point
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
Quote:
<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)
kingworks is offline   Reply With Quote
Old 12-06-2009, 07:41 PM   PM User | #7
kingworks
New Coder

 
Join Date: Nov 2009
Posts: 17
Thanks: 2
Thanked 0 Times in 0 Posts
kingworks is an unknown quantity at this point
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>
kingworks is offline   Reply With Quote
Old 12-09-2009, 02:43 AM   PM User | #8
kingworks
New Coder

 
Join Date: Nov 2009
Posts: 17
Thanks: 2
Thanked 0 Times in 0 Posts
kingworks is an unknown quantity at this point
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:
kingworks is offline   Reply With Quote
Old 12-15-2009, 12:18 PM   PM User | #9
codingman
New to the CF scene

 
Join Date: Dec 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
codingman is an unknown quantity at this point
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.
codingman is offline   Reply With Quote
Old 12-28-2009, 03:32 AM   PM User | #10
knowlton
New to the CF scene

 
Join Date: Dec 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
knowlton is an unknown quantity at this point
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?
knowlton is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 02:58 PM.
Advertisement
Log in to turn off these ads.