Jcarousel and lightbox HELP PLEASE!!!!!
Hi All
Im not that clued up on jquery and working around problems iv been trying but no like, What im wanting to do is combine jcarousel and fancy or any other one of the lightboxes.
I keep on getting my images opening to a new window instead of having the cool lightbox effect.PLease if any1 knows how to fix this please let me know.
Here is the scripts in my head.
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<!--
jQuery library
-->
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="/pngfix.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<script type="text/javascript">
$(document).ready(function(){
$(".hover").append("<em></em>");
$(".hover").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-95"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-55"}, "fast");
});
});
//window.onLoad=navigate("navigate", "0");
/**
* We use the initCallback callback
* to assign functionality to the controls
*/
function WindowResize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
var val = new Number();
val = (myWidth - 1680)/2;
document.getElementById("mycarousel").style.marginLeft = val+"px";
return val;
}
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: 1,
initCallback: mycarousel_initCallback,
// This tells jCarousel NOT to autobuild prev/next buttons
buttonNextHTML: null,
buttonPrevHTML: null,
easing: 'backEaseIn',
animation: 1000
});
});
jQuery.easing['backEaseIn'] = function(p, n, firstNum, diff) {
var c=firstNum+diff;
var s = 0; // default overshoot value, can be adjusted to suit
return c*(p/=1)*p*((s+1)*p - s) + firstNum;
}
$(function() {
$('a[rel=lightbox]').lightBox();
});
</script>