Hi all,
I mannaged to get the JCarousel working perfectly in IE but in Firefox
Mozilla the previous and next arrow buttons dont show.
Im using the static_controls.html model from the examples and the
tango skin.
here is my CSS followed by the HTML
jquery.jcarousel.css
[css]
/**
* This <div> element is wrapped by jCarousel around the list
* and has the classname "jcarousel-container".
*/
/*#mycarousel{ display : none; }*/
.jcarousel-container{ position : relative; border:1px solid #000000; }
.jcarousel-clip
{
z-index : 2;
padding : 0;
margin : 0;
overflow : hidden;
position : relative;
}
.jcarousel-list
{
z-index : 1;
overflow : hidden;
position : relative;
top : 0;
left : 0;
margin : 0;
padding : 0;
}
.jcarousel-item
{
float : left;
list-style : none;
/* We set the width/height explicitly. No width/height causes
infinite loops. */
width : 115px;
height : 115px;
cursor : pointer;
margin-right : 10px;
#margin-right : 0px;
}
/**
* The buttons are added dynamically by jCarousel before
* the <ul> list (inside the <div> described above) and
* have the classnames "jcarousel-next" and "jcarousel-prev".
*/
.jcarousel-next
{
position:relative;
float:right;
margin-top : 25px;
z-index : 3;
display : none;
border:1px solid #000000;
width: 34px;
height:34px;
}
.jcarousel-prev
{
position:relative;
float:left;
margin-top : 25px;
margin-right:-30px;
padding-right:0px;
z-index : 3;
display : none;
border:1px solid #000000;
width: 34px;
height:34px;
}
[/css]
skin.css
[css]
.jcarousel-skin-tango.jcarousel-container-horizontal
{
width : 365px;
padding : 0px 40px 0px 40px;
}
.jcarousel-skin-tango.jcarousel-container-vertical
{
width : 115px;
height : 365px;
padding : 40px 0px 40px 0px;
}
.jcarousel-skin-tango.jcarousel-clip-horizontal
{
width : 365px;
height : 115px;
}
.jcarousel-skin-tango.jcarousel-clip-vertical
{
width : 115px;
height : 365px;
}
.jcarousel-skin-tango.jcarousel-item
{
width : 115px;
height : 115px;
}
.jcarousel-skin-tango.jcarousel-item-horizontal{ margin-right :
10px; }
.jcarousel-skin-tango.jcarousel-item-vertical{ margin-bottom : 10px; }
.jcarousel-skin-tango.jcarousel-item-placeholder
{
background : #FFFFFF;
color : #000000;
}
/* Horizontal Buttons */
.jcarousel-skin-tango.jcarousel-next-horizontal
{
position : absolute;
top : 43px;
right : 5px;
width : 32px;
height : 32px;
cursor : pointer;
background : transparent url(next-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango.jcarousel-next-horizontal:hover{ background-
position : -32px 0; }
.jcarousel-skin-tango.jcarousel-next-horizontal:active{ background-
position : -64px 0; }
.jcarousel-skin-tango.jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango.jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango.jcarousel-next-disabled-horizontal:active
{
cursor : default;
background-position : -96px 0;
}
.jcarousel-skin-tango.jcarousel-prev-horizontal
{
position : absolute;
top : 43px;
left : 5px;
width : 32px;
height : 32px;
cursor : pointer;
background : transparent url(prev-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango.jcarousel-prev-horizontal:hover{ background-
position : -32px 0; }
.jcarousel-skin-tango.jcarousel-prev-horizontal:active{ background-
position : -64px 0; }
.jcarousel-skin-tango.jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango.jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango.jcarousel-prev-disabled-horizontal:active
{
cursor : default;
background-position : -96px 0;
}
/* Vertical Buttons */
.jcarousel-skin-tango.jcarousel-next-vertical
{
position : absolute;
bottom : 5px;
left : 43px;
width : 32px;
height : 32px;
cursor : pointer;
background : transparent url(next-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-tango.jcarousel-next-vertical:hover{ background-
position : 0 -32px; }
.jcarousel-skin-tango.jcarousel-next-vertical:active{ background-
position : 0 -64px; }
.jcarousel-skin-tango.jcarousel-next-disabled-vertical,
.jcarousel-skin-tango.jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango.jcarousel-next-disabled-vertical:active
{
cursor : default;
background-position : 0 -96px;
}
.jcarousel-skin-tango.jcarousel-prev-vertical
{
position : absolute;
top : 5px;
left : 43px;
width : 32px;
height : 32px;
cursor : pointer;
background : transparent url(prev-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-tango.jcarousel-prev-vertical:hover{ background-
position : 0 -32px; }
.jcarousel-skin-tango.jcarousel-prev-vertical:active{ background-
position : 0 -64px; }
.jcarousel-skin-tango.jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango.jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango.jcarousel-prev-disabled-vertical:active
{
cursor : default;
background-position : 0 -96px;
}
[/css]
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>libellus - home</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<!-- jCarousel core stylesheet -->
<link rel="stylesheet" type="text/css" href="js/jcarousel/lib/
jquery.jcarousel.css" />
<!-- jCarousel skin stylesheet -->
<link rel="stylesheet" type="text/css" href="js/jcarousel/
skins/tango/skin.css" />
<style type="text/css">
<!--
/* Additional styles for the controls. */
.jcarousel-control
{
width : 365px;
margin-bottom : 10px;
text-align : center;
}
.jcarousel-control a
{
font-size : 75%;
text-decoration : none;
padding : 0 5px;
margin : 0 0 5px 0;
border : 1px solid #FFFFFF;
color : #EEEEEE;
background-color : #05AAE8;
font-weight : bold;
}
.jcarousel-control a:focus, .jcarousel-control
a:active, .jcarousel-control a:hover
{
color : #FC4FF0;
font-size : 75%;
font-weight : bold;
outline : none;
}
.jcarousel-scroll
{
width : 365px;
margin-top : 10px;
text-align : center;
}
.jcarousel-scroll form
{
margin : 0;
padding : 0;
}
.jcarousel-scroll select{ font-size : 75%; }
a#mycarousel-next ,a#mycarousel-prev
{
color : #333333;
font-family : Arial, "Trebuchet ms", sans-serif;
text-decoration : underline;
font-size : 11px;
font-weight : normal;
text-decoration : underline;
cursor : pointer;
margin-top : 5px;
}
a:visited#mycarousel-next, a:visited#mycarousel-prev{ color :
#666666; }
a:active#mycarousel-next, a:active#mycarousel-prev{ color :
#FC4FFE; }
a:hover#mycarousel-next, a:hover#mycarousel-prev{ color :
#00ABEC; }
-->
</style>
<!-- IMAGE SCROLLER
----------------------------------------------------------------------------------------
>
<!-- jQuery library -->
<script type="text/javascript" src="js/jcarousel/lib/
jquery-1.2.1.pack.js"></script>
<!-- jCarousel library -->
<script type="text/javascript" src="js/jcarousel/lib/
jquery.jcarousel.pack.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('.jcarousel-scroll select').bind('change',
function()
{
carousel.options.scroll =
jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
return false;
});
jQuery('#mycarousel-next').bind('click', function()
{
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function()
{
carousel.prev();
return false;
});
};
// Ride the carousel...
jQuery(document).ready(function()
{
jQuery("#mycarousel").jcarousel({
scroll: 3,
initCallback: mycarousel_initCallback,
// This tells jCarousel NOT to autobuild prev/next
buttons
buttonNextHTML: null,
buttonPrevHTML: null,
wrap:"both"
});
});
// -->
</script>
<!----------------------------------------------------------------------------------------------------------
>
</head>
<body>
<div align="center">
<div id="mycarousel" class="jcarousel-skin-tango jcarousel-
container">
<div class="jcarousel-control">
<a href="#">1</a>
<a href="#">4</a>
<a href="#">7</a>
</div>
<ul>
<li><img width="115" height="115" src="http://
static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li>
<li><img width="115" height="115" src="http://static.flickr.com/
75/199481072_b4a0d09597_s.jpg" alt="" /></li>
<li><img width="115" height="115" src="http://static.flickr.com/
57/199481087_33ae73a8de_s.jpg" alt="" /></li>
<li><img width="115" height="115" src="http://static.flickr.com/
77/199481108_4359e6b971_s.jpg" alt="" /></li>
<li><img width="115" height="115" src="http://static.flickr.com/
58/199481143_3c148d9dd3_s.jpg" alt="" /></li>
<li><img width="115" height="115" src="http://static.flickr.com/
72/199481203_ad4cdcf109_s.jpg" alt="" /></li>
<li><img width="115" height="115" src="http://static.flickr.com/
58/199481218_264ce20da0_s.jpg" alt="" /></li>
<li><img width="115" height="115" src="http://static.flickr.com/
69/199481255_fdfe885f87_s.jpg" alt="" /></li>
<li><img width="115" height="115" src="http://static.flickr.com/
60/199480111_87d4cb3e38_s.jpg" alt="" /></li>
<li><img width="115" height="115" src="http://static.flickr.com/
70/229228324_08223b70fa_s.jpg" alt="" /></li>
</ul>
<div class="jcarousel-scroll">
<form action="">
<a href="#" id="mycarousel-prev">« Prev</
a>
<select>
<option value="1">Scroll 1 item per click</
option>
<option value="2">Scroll 2 items per
click</option>
<option value="3">Scroll 3 items per
click</option>
<option value="4">Scroll 4 items per
click</option>
<option value="5">Scroll 5 items per
click</option>
</select>
<a href="#" id="mycarousel-next">Next »</
a>
</form>
</div>
</div>
</div>
</body>
</html>
[/html]
thank you in advance,
Tal.
