Does anyone know if it's possible for jQuery content slider to be compatible with lightbox? I've searched everywhere, and every single result on google talks about either content slider
or lightbox, nowhere does it mention any website or tutorial that has both...
My website consists of a few pages that scrolls left/right, and some pages have pictures that I want to have lightbox functionality (click the thumbnail and the larger image pops up on the same screen in a stylish way). Right now the slider is working, but not the lightbox.
This is the code: (thanks to venegal for providing the script for the slider)
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Festival2011</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type="text/javascript">
// Wait for all the HTML to be loaded, before doing anything
$(function () {
// Fetch the pages for later use
var $pages = $('#pages .page');
// Define a click handler for the navigation links
$('#navigation a').click(function (e) {
// Prevent the default click behavior, which would be an instant scroll to the requested page
e.preventDefault();
// Fetch the scroll target from the href attribute of the clicked link,
// get its distance from the left document border, and scroll there
$('html, body').animate({scrollLeft: $($(this).attr('href')).position().left});
});
// On window resize, recalculate the widths of the pages and their container
$(window).resize(function () {
$pages.width($(window).width() - $('#navigation').width());
$('#pages').width($pages.outerWidth() * $pages.length);
})
// Trigger resize immediately to set initial widths
.resize();
});
</script>
<link href="LSAYfestivalStyles.css" rel="stylesheet" type="text/css">
<link href="LSAYfestivalFonts.css" rel="stylesheet" type="text/css">
</head>
<body>
...
...
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Red part is the call for lightbox scripts, purple part is the slider script.
In the above I put the lightbox scripts before the jquery content slider scripts, and lightbox won't activate at all. If I put lightbox scripts after slider scripts, then slider won't work at all but lightbox will work...
Before you post, read our: 
