Light box help

[alexmark]

Hi All

 

I am trying to set a light box up on a caresel which I have working with fixed images. I would like to call this information from a 2 db like this.

 

db table listing has tables id,make(is id from make table), model (is id from model table)  and featured.

db listimages has tables id, imagepath, imagethumbpath and listing id.

 

I would like to select only vehicles that are selected as featured from the listings table and some how echo them all out with a link to the page that displays more information about the vehicle from the "herf"

 

How do i go about adding the code to pull this info and get it to select all the information?

 

This is the code I have for teh light box and as I stated it works fine with static images.

 

   <div id="gap"></div>


<table width="1000" border="0" cellspacing="0" cellpadding="0" align="center">
      <TR>
        <TD width="1000"><table width="1000" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td class="blocktl" height="29" width="29"></td>
    <td bgcolor="#000000" class="bodyfont"><h1>Featured Cars</h1></td>
    <td class="blocktr" height="29" width="29">
  <tr>
    <td bgcolor="#000000"></td>
    <td bgcolor="#000000" valign="top" class="bodyfont" align="center" style="padding-top:10px;">

<!--Make sure page contains valid doctype at the very top!-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="/js/stepcarousel.js"></script>


<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
border: 0px solid black;
overflow: scroll; /*leave this value alone*/
width: 825px; /*Width of Carousel Viewer itself*/
height: 215px; /*Height should enough to fit largest content's height*/
margin-left: 0px;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 230px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

</style>



<script type="text/javascript">

stepcarousel.setup({
    galleryid: 'mygallery', //id of carousel DIV
    beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    panelclass: 'panel', //class of panel DIVs each holding content
    autostep: {enable:true, moveby:1, pause:3000},
    panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:true},
    defaultbuttons: {enable: true, moveby: 1, leftnav: ['/images/arrowleft.png', -15, 40], rightnav: ['/images/arrowright.png', 15, 40]},
    statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>

<div id="mygallery" class="stepcarousel" >
<div class="belt">


    <div class="panel">
   <table border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td valign="middle" align="center" height="180" class="bodyfont">
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top" height="160" align="center">
  <a href="1997-Mercedes-Benz-E320-index.php" >
            <img src='images/merc1.jpg' width="150" height="100"  alt="1997 Mercedes-Benz E320" border='0' style="border:5px;border-color:#ffffff;border-style:solid;"></a>
	</td>
	</tr>
	<tr>
        <td valign="top" class="bodyfont" align="center">
        
        
        <p> <a href="1997-Mercedes-Benz-E320-index.php"  title="1997 Mercedes-Benz E320">1997 Mercedes-Benz E320</a></p>
</td></tr></table>

</td></tr></table>
       </div>
     <div class="panel">
   <table border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td valign="middle" align="center" height="180" class="bodyfont">
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top" height="160" align="center">
  <a href="car_Ford-Mondeo_12__index.php" >
            <img src='images/Eclips.jpg' width="150" height="100" alt="2002 Mitsubishi Eclipse GS" border='0' style="border:5px;border-color:#ffffff;border-style:solid;"></a>
	</td>
	</tr>
	<tr>
        <td valign="top" class="bodyfont" align="center">
        
        
        <p> <a href="2002 Mitsubishi Eclipse GS index.php"  title="2002 Mitsubishi Eclipse GS">2002 Mitsubishi Eclipse GS</a></p>
</td></tr></table>

</td></tr></table>
       </div>
     <div class="panel">
   <table border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td valign="middle" align="center" height="180" class="bodyfont">
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top" height="160" align="center">
  <a href="car_Mercedes-A140_11__index.php" >
            <img src='images/Ranger.jpg' width="150" height="100" alt="1999 Ford Ranger XLT" border='0' style="border:5px;border-color:#ffffff;border-style:solid;"></a>
	</td>
	</tr>
	<tr>
        <td valign="top" class="bodyfont" align="center">
        
        
        <p> <a href="1999 Ford Ranger XLT__index.php"  title="1999 Ford Ranger XLT">1999 Ford Ranger XLT</a></p>
</td></tr></table>

</td></tr></table>
       </div>
     <div class="panel">
   <table border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td valign="middle" align="center" height="180" class="bodyfont">
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top" height="160" align="center">
  <a href="car_Mercedes-E200k_6__index.php" >
            <img src='images/Wind.jpg' width="150" height="100" alt="2000 Ford Windstar LX" border='0' style="border:5px;border-color:#ffffff;border-style:solid;"></a>
	</td>
	</tr>
	<tr>
        <td valign="top" class="bodyfont" align="center">
        
        
        <p> <a href="2000 Ford Windstar LX_index.php"  title="2000 Ford Windstar LX">2000 Ford Windstar LX</a></p>
</td></tr></table>

</td></tr></table>
       </div>
     <div class="panel">
   <table border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td valign="middle" align="center" height="180" class="bodyfont">
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top" height="160" align="center">
  <a href="car_Mercedes-E320_8__index.php" >
            <img src='images/honda.jpg' width="150" height="100" alt="1996 Honda Passport EX" border='0' style="border:5px;border-color:#ffffff;border-style:solid;"></a>
	</td>
	</tr>
	<tr>
        <td valign="top" class="bodyfont" align="center">
<p> <a href="1996 Honda Passport EX_index.php"  title="1996 Honda Passport EX">1996 Honda Passport EX</a></p>
</td></tr></table>

</td></tr></table>
       </div>
  </div>
</div>