Adding a lightbox function to scrolling thumbs

Ok now this is pretty basic but I’m still getting my head roung jquery.

I have a basic scroller which I want to add a lightbox function to each of the thumbs contained in the scroller. I have tried but it just messes my scrolling of the thumbs function up.

this is the method I used for my scroller http://jquerytools.org/demos/scrollable/index.htm

and this is my html - I have removed the references to the jquery for the lightbox etc and was hoping someone could point me in the right direction.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="script/jquery.tools.min.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/scrollable.css" />
<link rel="stylesheet" type="text/css" href="css/buttons.css" />
</head>

<body>
<div id="container">
  <div id="header">
    <div class="logo"><img src="images/logo.png" width="279" height="130" alt="WeddingPostboxes Manchester" /></div>


  </div>
  <div id="top-nav"></div>
  <div id="top-slider"></div>
  <div id="main-content">
    <div id="left-content">
      <div class="left-contact-box"></div>






    <!--end left content --></div>
    <div class="right-content">
      <div class="main-headings">The Finest Wedding Post Boxes</div>
      <div class="right-text">Today it is common practice for couples to have been living together before they get married and they usually already have the old style traditional gifts.

        <br />
        <br />
        Our unique Post Boxes will enhance your cake/gift table at any wedding or special occasion, to securely collect your cards, gifts and guests personal messages.

        <br />
        <br />
        These days it is acceptable to request vouchers for a wide range of gifts and even monetary offerings. Guests clutching valuable envelopes and without an obvious place to drop them can often feel uneasy whilst waiting to catch the attention of the Best Man, Ushers or even the Bride and Groom.

        <br />
        <br />
      Why not hire one of our wedding post boxes for your special day and receive a complete personalisation of the front information panel plus an extra complimentary copy as a keepsake.</div>





    <!--end right content --></div>
    <div class="clr"></div>
    <div class="scroll-holder">
<a class="prevPage  left"></a>
<div class="scrollable">	
	<div class="items">
		<!-- 1-4-->
		<img src="images/pbsc.jpg" />
		<img src="images/pbsc.jpg" />
		<img src="images/pbsc.jpg" />	  <img src="images/pbsc.jpg" />
		
		<!-- 5-8 -->
		<img src="images/pbsc.jpg" />
		<img src="images/pbsc.jpg" />
		<img src="images/pbsc.jpg" />
		<img src="images/pbsc.jpg" />
		
		<!-- 9-12 -->
		<img src="images/pbsc.jpg" />
		<img src="images/pbsc.jpg" />
		<img src="images/pbsc.jpg" />
		<img src="images/pbsc.jpg" />
	</div>
</div>
<a class="nextPage right"></a>
<div class="clr"></div>
</div>






<!--end main content --></div>













<!--end container --></div>









<script>
	$(function()  { $("div.scrollable").scrollable({size: 4}); });
</script>
</body>
</html>

Thanks R

(quick note before I forget: You should get in the habit of adding your javascript files near the bottom of the page, not in the head…it’ll make your site appear to load faster).

Other than that:

I recreated the demo in this page: http://jsfiddle.net/WqutY/
I entered in your structure here, but kept the same javascript: http://jsfiddle.net/ZGAhu/1/

You need to put divs around your image groups for one. And as for the size: 4, it doesn’t seem to recognize it, even in the demo…so I’m guessing that’s an invalid parameter.

What would you suggest the best method would be to get the smaller images in the slider to open a larger preview in a lightbox?