...

View Full Version : jQuery Help w/jCarouselLite Auto Scroll



kingworks
11-21-2009, 04:06 AM
I implemented a basic version of jCarouselLite using this tutorial (http://www.shahin.co.nr/how-to-install-and-style-jcarousel-lite/).

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:


<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 (http://www.gmarwaha.com/jquery/jcarousellite/#install) - 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:


$(".auto .jCarouselLite").jCarouselLite({
auto: 800,
speed: 1000
});


Any help or advice is greatly appreciated.

kingworks
11-25-2009, 02:39 AM
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 (http://www.kingworkscreative.com/test/jCarousel/)

Which incorporates the following files and styling lifted directly from that site:
http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_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.

Spudhead
11-25-2009, 11:13 AM
step 1: Get the default configuration working

change this:


$(".default .jCarouselLite").jCarouselLite({

to this:


$(".anyClass").jCarouselLite({

kingworks
11-25-2009, 06:41 PM
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 (http://www.kingworkscreative.com/test/jCarousel/)) as it now stands:

<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:

#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;
}

Spudhead
11-26-2009, 10:10 AM
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.

kingworks
12-01-2009, 01:45 AM
Got the default configuration (http://kingworkscreative.com/test/jCarousel/) working using the HTML, script and file calls from the original website (http://www.gmarwaha.com/jquery/jcarousellite/index.php).

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 (http://www.gmarwaha.com/jquery/jcarousellite/index.php#demo), 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)

kingworks
12-06-2009, 07:41 PM
Got it working in the test site (http://www.kingworkscreative.com/test/jCarousel/).

Here is the HTML & in-line script, for easy reference (It's a huge pain to find on the actual site (http://www.gmarwaha.com/jquery/jcarousellite/#demo))


<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
12-09-2009, 02:43 AM
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.

(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWh eel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,be foreStart: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);fu nction 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.circ ular){$(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:
http://img.photobucket.com/albums/v241/BrotherCaptainRace/screenshot.jpg

codingman
12-15-2009, 12:18 PM
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.



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 (http://www.kingworkscreative.com/test/jCarousel/)

Which incorporates the following files and styling lifted directly from that site:
http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_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.

knowlton
12-28-2009, 03:32 AM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum