I would suggest removing the thmb1, thmb2, thmb3 classes and use a
static class like "thmb" so you can create a single function that
handles all of your links.
You can then create a single function to grab the "src" attribute of
the child "img" tag and load up the hi res version of the image. For
example if the thumbnail is "item1.jpg" you would load up
"item1_large.jpg."
On Aug 9, 10:59 am, Cyra <matt.penfi...@gmail.com> wrote:
> 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
