Howto implement Slimbox and Carousel together
CSS declarations:
<link rel="stylesheet" type="text/css" href="/jcarousel/skins/tango/skin.css" />
<link rel="stylesheet" type="text/css" href="/style/slimebox.css"/>
Scripts inclusion:
<script language="javascript" type="text/javascript" src="/js/jquery/jquery-1.4.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/jquery/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
<script type="text/javascript" src="/js/slimebox/mootools_full.js"></script>
<script type="text/javascript" src="/js/slimebox/slimebox.js"></script>
HTML code:
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><a href="/images/screens/image1.png" rel="lightbox[picsbar]" title="Image 1"><img src="/images/screens/thumbs/image1.png" width="170" height="115" alt="Image 1" border="0"/></a></li>
<li><a href="/images/screens/image2.png" rel="lightbox[picsbar]" title="Image 2"><img src="/images/screens/thumbs/image2.png" width="170" height="115" alt="Image 2" border="0"/></a></li>
<li><a href="/images/screens/image3.png" rel="lightbox[picsbar]" title="Image 3"><img src="/images/screens/thumbs/image3.png" width="170" height="115" alt="Image 3" border="0"/></a></li>
<li><a href="/images/screens/image4.png" rel="lightbox[picsbar]" title="Image 4"><img src="/images/screens/thumbs/image4.png" width="170" height="115" alt="Image 4" border="0"/></a></li>
</ul>