THELIA Forum

<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="tango/skin.css" />
<script type="text/javascript" src="lib/js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="lib/js/chili-1.7.pack.js"></script>
<script type="text/javascript" src="lib/js/jquery.jcarousel.pack.js"></script>	
<script type="text/javascript" src="lib/js/jquery.easing.js"></script>
<script type="text/javascript" src="lib/js/jquery.dimensions.js"></script>
<script type="text/javascript" src="lib/js/jquery.accordion.js"></script>
 <script language="javascript">

// permet le positionnement du jcarroussel sur la diapo cliquer
<?php 
if ($_GET["start"]!=""){
 echo "var start2 =". $_GET["start"].";";
}else{
  echo "var start2 = 1;";
}
?>
// initialisation paramétrage du script
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        scroll: 1,
        start: start2,
    visible:4,

    initCallback: mycarousel_initCallback
    });
});
</script>

.jcarousel-container {
    position: relative;
}

.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-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 112px;
    height: 112px;
}

/**
 * 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 {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	margin: 0;
	padding: 0;
	background-color: #000000;

}
#header {
	height: 30px;
}
#conteneur {
	position: relative;
	width: 1280px;
	margin: 0 auto;
	height: 663px;
	background-image: url(image/fond_home.jpg);
	background-repeat: no-repeat;
}
#centre {
	margin-left: 400px;
	margin-right: 720px;
	height: 573px;
	background-image: url(image/fond_menu.jpg);
	background-repeat: no-repeat;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-right: 15px;
	color: #FFFFFF;
}
#gauche {
	position: absolute;
	left:0;
	height: 588px;
	padding-left: 80px;
	width: 310px;
	padding-right: 10px;
	padding-bottom: 15px;
}
#droite {
	position: absolute;
	right:3px;
	overflow:hidden;
	zoom:1;
	width: 535px;
	height: 573px;
	background-image: url(image/fond_carre.jpg);
	background-repeat: no-repeat;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-right: 170px;
}
#droite_haut {
	width: 535px;
	height: 130px;
	border-bottom-color: #CCCCCC;
	border-bottom-style: solid;
	border-bottom-width: thin;
}

<div id="droite">
<div id="droite_haut" align="center">
            <ul id="mycarousel" class="jcarousel-skin-tango">
            <THELIA_PROD type="PRODUIT" rubrique="#RUBRIQUE_ID" caracteristique="#CARACTERISTIQUE_ID" caracdisp="#CARACTERISTIQUE_DISP">
            <?php $nb=#COMPT?>
            <THELIA_IMAGE type="IMAGE" produit="#ID" num="1" largeur="112">
                <li><a href="produit.php?id_rubrique=#RUBRIQUE&id_produit=#PRODUIT&p=collections&start=<?php echo $nb?>"><img src="#IMAGE"  alt="#PRODTITRE Ref:#PRODREF" title="#PRODTITRE Ref:#PRODREF" border="0" width="112" height="112"/></a></li>
            </THELIA_IMAGE>
            </THELIA_PROD>
              </ul>
</div>
</div>