The goal is to have about 16 projects, each outputting its own set of photos(div id='centerContentLeft' with about 5 photos cycling/fadIn) and one text description per project in the (div id='centerContentRight'). The content of the Right div does not change while the left one cycles. When one clicks on another project the two divs will change accordingly.
 
This code comes close, but you must click the project1 link twice to get both div's to display. The first click gets the images cycling and the second click displays the HTML content in the second <div.>

1. <div id="centerContentLeft" class="slideshow" >
2. </div>
                   
    <div id="centerContentRight" class="slideshow" >
   
   
3. </div>
   
4. <div id="navAnimate">
             <div id="commercial">
                 <ul id="block1">
                     <li class="project-types">commercial</li>
                     <li id="block1text">
                         <a href="project1" id="project1">project 1</a>
                         <a href="project2" id="project2">project 2</a>
                         <a href="project3" id="project3">project 3</a>
                         <a href="project4" id="project4">project 4</a>
                         <a href="project5" id="project5">project 5</a>
                     </li>
               </ul>
             </div>
                        
             <div id="residential">
                 <ul id="block2">
                     <li class="project-types">residential</li>
                     <li id="block2text">
                         <a href="project6" id="project6">project 6</a>
                         <a href="project7" id="project7">project 7</a>
                         <a href="project8" id="project8">project 8</a>
                         <a href="project9" id="project9">project 9</a>
                         <a href="project10" id="project10">project 10</a>
                         <a href="project11" id="project11">project 11</a>
                     </li>
                 </ul>
             </div>
            
             <div id="tenant">
                 <ul id="block3">
                     <li class="project-types">tenant improvements</li>
                     <li id="block3text">
                         <a href="project12" id="project12">project 12</a>
                         <a href="project13" id="project13">project 13</a>
                         <a href="project14" id="project14">project 14</a>
                         <a href="project15" id="project15">project 15</a>
                         <a href="project16" id="project16">project 16</a>
                     </li>
                 </ul>
             </div>
         </div>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

1. $("#project1").click(function(event){
           $("#centerContentLeft").html('<img src="images/image1.jpg"/><img src="images/image2.jpg"/><img src="images/image3.jpg"/>');
               $(function() {
               $('#centerContentLeft img:first').fadeIn(1000, function() {
               $('#centerContentLeft').cycle({fx:'fade'})
               });
               });
       $("#project1").click(function(event){    
           $('#centerContentRight').html('<h2>Project One</h2><p>This is a description of Project One.</p>');
               ('#centerContentRight').fadeIn (1000);
                                     });
       
       $("#centerContentRight").show("slow");
       $("#centerContentLeft").show("slow");
       
         event.preventDefault();
   });
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

Once the code is correct I assume that I would just retype it 16 times with specifics for each project inserted.

Many thanks in advance. I know this must have a very simple answer and I have spent way too many hours reading with no solution, but I have come across some pretty cool stuff along the way!

Michael