Create loop for btn and change image source in jquery
Hello everyone, I was wondering if anyone could help me out with this
problem.
I created a photogallery using XHTML strict and jQuery. When the users
choose view image I fadeIn a div
and I need to replace the placeholder img with the full size image.
this is the div that hidden and fades in when I click that part works great.
<!-- Main Feature -->
<div id="mainPhoto">
<div id="closeWin"> images/blk_skin/close_btn.gif </div>
<div id="imgContainer"> images/copy_written/lrg/1.jpg </div>
</div>
<!-- End main photo feature -->
This is the section that holds the thumbnail, description, and the view full
image button when I click the View full Image button I would like to change
the place holder image that I have in the above div(
images/copy_written/lrg/1.jpg ):
<div class="photoContainer">
<div class="description">
<dl>
<dt>Joe Hursley</dt>
<dd class="category">Unconventional</dd>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.
Aenean iaculis nisl vel nulla. </dd>
<dd class="view">View Full Image</dd>
</dl>
</div>
This is my javascript, here I have been trying to run a for loop that checks
for a class .view and changes the img src :
// fade in main window
$(function mainPhotoInit() {
$('.view').click(function() {
$('#mainPhoto').fadeIn(300);
return false;
});
});
Any help would be greatly appreciated!!!!!!!