list of links to load image/text into div on same page

list of links to load image/text into div on same page

Hi,

I'm really new to jQuery and I'm looking for what I imagine would be a simple task.

I have an unordered list (ul#garment_selector) sitting in a div (div#program_scroller) and each of the list items has a link that I'd like to display an image and some text into a div on the same page. I don't want any fancy animations or anything like that, I just need to display an image and a related description/price into a new div, preferably without reloading. I have quite a few different lists of links and they change all the time so using an array to define the image/text is impractical for my needs.

  1. <div id="load_pane"></div>  // load image/text here
  2.  
  3. <div id="program_scroller">
  4.    <ul id="garment_selector">
  5.       <li><a href="images/tshirt.jpg" title="heavy cotton t-shirt // $5.99">Tee Shirt</a></li>
  6.       <li><a href="images/ballcap.jpg" title="fitted ball cap // $8.99">Baseball Cap</a></li>
  7.       <li>.... etc ... </li>
  8.    </ul>
  9. </div>

I've looked at some photo gallery tutorials as they would seem best suited to my needs but I really don't know my way around js too much. Can someone help me out?