Hi All;

What I would like to do: use a single container to load images.

As it is now: I have eleven (11) containers in HTML mark-up each with its own div. each container holds 4 images (2 images side by side top and bottom) when link in anchor tag is clicked div with images fades in.

/*-- Jquery accordion is used for navigation typical example is below --*/
<li>
  <a class="head" href="#">commercial/hospitality</a>
  <ul>
    <li><a href="#" projectName="project1" projectType="hospitality1" 
        image1="images/testImage1.jpg" 
        image2="images/testImage2.jpg" 
        image3="images/testImage3.jpg"
        image4="images/testImage4.jpg">hospitality project number 1</a>
    </li>

    <li><a href="#" projectName="project2" projectType="hospitality2"
        image1="images/testImage1.jpg" 
        image2="images/testImage2.jpg" 
        image3="images/testImage3.jpg"
        image4="images/testImage4.jpg">hospitality project number 2</a>
    </li>

    <li><a href="#" projectName="project3" projectType="hospitality3"
        image1="images/testImage1.jpg" 
        image2="images/testImage2.jpg" 
        image3="images/testImage3.jpg"
        image4="images/testImage4.jpg">hospitality project number 3</a>
    </li>
  </ul> 
</li>

Typical <div> container used for image insertion currently there are 11 of them:

<div id="hospitality1" class="current">
  <div id="image1"><img src="images/testImage.jpg"/></div>
  <div id="image2"><img src="images/testImage.jpg"/></div>
  <div id="image3"><img src="images/testImage.jpg"/></div>  
  <div id="image4"><img src="images/testImage.jpg"/></div>
</div>

Here is the code I am using at this point, it does work, but is there a better way to do this that will only re-use a single div container for loading the images?

$(document).ready(function(){
  $('#navigation a').click(function (selected) {    

    var projectType = $(this).attr("projectType"); //projectType
    var projectName = $(this).attr("projectName"); //projectName

    var image1 = $(this).attr("image1"); //anchor tag for image number 1
    var image2 = $(this).attr("image2"); //anchor tag for image number 2
    var image3 = $(this).attr("image3"); //anchor tag for image number 3
    var image4 = $(this).attr("image4"); //anchor tag for image number 4

    console.log(projectType);   //returns type of project
    console.log(projectName);   //returns name of project
    console.log(image1);        //returns 1st image
    console.log(image2);        //returns 2nd image
    console.log(image3);        //returns 3rd image
    console.log(image4);        //returns 4th image

    $(function() {      
      $(".current").hide(); // hides previous selected image
      $("#" + projectType ).fadeIn("normal").addClass("current");

    });                     
});

As you can, see the mark up getting quite large.
Any help is appreciated.
ussteele