PDA

View Full Version : jquery jcarousel question



sluis
10-29-2009, 12:20 AM
This is my first post, so i'm going to be as clear as possible.
i'm working with the jcarousel.js and making a simple program to test what i'm going to implement later.
My question is, how can i make the carousel works fine when i remove an item from the list of photos i have, because when i remove one of them (the first one in this case) a white box apears and i looks really bad. i also tried with .hide() but the whole style is lost because the item remains on the list and instead of appearing 3 visible item, i can see 3 and a part of the 4th.
Hope you can help me.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>try1</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="skin/skin.css" />

<script type="text/javascript">

jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: true,
visible:3,
scroll: 2
});
jQuery("button").click(function (){startnow();});
});

function startnow(){
jQuery(document).ready(function() {
jQuery("li:first").hide();
});
}

</script>
</head>
<body>
<div id="wrap">
<h1>myweb page</h1>
<p>
vertical carousel try 1
</p>
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<li><img src="photo1.jpg" width="75" height="75" alt="" /></li>
<li><img src="photo2.jpg" width="75" height="75" alt="" /></li>
<li><img src="photo3.jpg" width="75" height="75" alt="" /></li>
<li><img src="photo4.jpg" width="75" height="75" alt="" /></li>
<li><img src="photo5.jpg" width="75" height="75" alt="" /></li>
<li><img src="photo6.jpg" width="75" height="75" alt="" /></li>
<li><img src="photo7.jpg" width="75" height="75" alt="" /></li>
<li><img src="photo8.jpg" width="75" height="75" alt="" /></li>
<li><img src="photo9.jpg" width="75" height="75" alt="" /></li>
<li><img src="photo10" width="75" height="75" alt="" /></li>
</ul>
</div>
<button>change</button>
</body>
</html>