Thumbnails are displayed on a page in the following manner:
<div id="credits">
<a href="largeimage1.jpg" alt="credits1.php"><img src="thumb1"></a>
<a href="largeimage2.jpg" alt="credits2.php"><img src="thumb2"></a>
<a href="largeimage3.jpg" alt="credits3.php"><img src="thumb3"></a>
</div>
<div id="zoom"></div>
<div id="credits"></div>
The goal is to achieve the following interactions:
- User clicks thumb1 > largeimage1 loads in #zoom AND credits1.php loads in #credits
- User clicks thumb2 > largeimage2 loads in #zoom AND credits2.php loads in #credits
- Etc.
Is it feasible to implement this using jquery? Specifically, is it possible to trigger TWO (2) ajax calls simultaneously with just one click as described above?
Currently, the code for loading the LARGE image via ajax works smoothly:
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
var largePath = $(this).attr("href");
$("#zoom img").fadeOut("slow", function() {
$(this).attr({ src: largePath }).fadeIn("slow");
});
return false;
});
});
</script>
However, I now need to also load credits for the images into another div. Any assistance on achieving this would be highly appreciated. :)