Hello,

First time posting here, so sorry if this has been covered to death,
but I couldn't find anything via searching.

I'm building a gallery page, that's setup like this:

- carousel based horizontal image thumbnail navigation.

- main div that loads, on thumbnail click, a high res version of each
thumbnail image that exists within the carousel nav.

so basically:

<code>

<div id="main_div">
<!-- high res image will be loaded here via ajax -->
</div>

<div id="carousel">
<ul>
<li><a class="thmb1" href="###"><img src="item1.jpg" /></a></li>
<li><a class="thmb2" href="###"><img src="item2.jpg" /></a></li>
<li><a class="thmb3" href="###"><img src="item3.jpg" /></a></li>
</ul>
</div>

</code>



now, i realize i could simply write a line of jquery to load each and
every thumbnail, i.e.

<code>
$("#carousel ul li a.thmb1").click(function () {

$("#main_div").load("/high_res_images.html #image1");

});
</code>

but that seems incredibly innefficient, and might be too complicated
for my non-technical client to maintain.

I'm wondering if I could set something up using the 'this' keyword, or
'each' to make this much more efficient, and would allow me to add new
items to the carousel without updating the code.

thanks so much for reading, i realize this is probably simpler than I
think it is, but I'm new to js and jquery (loving it so far though!)

-matt

Reply via email to