Hi all,
I tried to use the vertical specification of the JCarousel but for
some reason it doesnt work in Mozilla or Safari.
In IE7 it asks you whether you want to allow active content and as
soon as you allow it, it seems to work fine, most of the time.
Did anyone encounter a problem with the vertical display? and does
anyone know how to solve it?
here is my css files as well as the html file:
[css name="jquery.jcarousel.css"]
/**
* This <div> element is wrapped by jCarousel around the list
* and has the classname "jcarousel-container".
*/
/*#mycarousel{ display : none; }*/
.jcarousel-container{ position : relative; }
.jcarousel-clip
{
z-index : 2;
padding : 0;
margin : 0px 0px 10px 7px;
#margin : 0;
overflow : hidden;
position : relative;
float : left;
#float : none;
width : 365px;
}
.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 : 144px;
height : 132px;
cursor : pointer;
/*margin-right : 10px;
#margin-right : 0px;*/
margin-bottom : 5px;
}
/**
* 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 : 27px;*/
z-index : 3;
/*display : none;*/
width : 34px;
height : 34px;
cursor : pointer;
background : transparent url(../skins/tango/next-vertical.png) no-
repeat 0 0;
}
.jcarousel-prev
{
/*position : relative;
float : left;
margin-top : 27px;*/
z-index : 3;
/*display : none;*/
width : 34px;
height : 34px;
cursor : pointer;
background : transparent url(../skins/tango/prev-vertical.png) no-
repeat 0 0;
}
[/css]
[css name="skin.css"] (tango)
.jcarousel-skin-tango.jcarousel-container-horizontal
{
width : 450px;
padding : 0px;
}
.jcarousel-skin-tango.jcarousel-container-vertical
{
width : 147px;
height : 580px;
padding : 40px 0px 40px 0px;
}
.jcarousel-skin-tango.jcarousel-clip-horizontal
{
width : 365px;
height : 115px;
}
.jcarousel-skin-tango.jcarousel-clip-vertical
{
width : 147px;
height : 580px;
}
.jcarousel-skin-tango.jcarousel-item
{
width : 144px;
height : 132px;
}
.jcarousel-skin-tango.jcarousel-item-horizontal{ margin-right :
10px; }
.jcarousel-skin-tango.jcarousel-item-vertical{ margin-bottom : 5px; }
.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 : 53px;
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 : 53px;
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>itintranet - 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({
vertical: true,
scroll: 4,
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">
<ul>
<li><img src="images/mug_shots/anthony.jpg"
alt="Anthony" title="Anthony"></li>
<li><img src="images/mug_shots/dion.jpg"
alt="Dion" title="Dion"></li>
<li><img src="images/mug_shots/ed.jpg" alt="Ed"
title="Ed"></li>
<li><img src="images/mug_shots/francois.jpg"
alt="Francois" title="Francois"></li>
<li><img src="images/mug_shots/julia.jpg"
alt="Julia" title="Julia"></li>
<li><img src="images/mug_shots/lisa.jpg"
alt="Lisa" title="Lisa"></li>
<li><img src="images/mug_shots/mark.jpg"
alt="Mark" title="Mark"></li>
<li><img src="images/mug_shots/tal.jpg" alt="Tal"
title="Tal"></li>
<li><img src="images/mug_shots/v.jpg" alt="Tal"
title="Tal"></li>
</ul>
</div>
</div>
</body>
</html>
[/html]
Please if you can help that will be great.
Tal.
P.S. i assume i dont need to post all the files since you guys will
probably have the rest.
