Response title
This is preview!
Show on click
in Using jQuery
•
10 years ago
I wrote a script that when a thumbnail is clicked that it will display an image in a separate div. It works but the problem is it switches the new image, fades and then reloads the new image. I want the old image to fade and the new one to fade in.
jquery
- $('#portfolioLeft a.thumb').click(function() {
- var thumbId = $(this).attr('id');
- $('#portfolioRight #portfolioMac img').fadeOut('slow');
- $('#portfolioRight #portfolioMac img').attr('src', 'img/port/lrg/' +thumbId+ '.jpg').fadeIn('slow');
- });
html
- <div id="portfolioLeft">
- <a class="thumb" href="javascript:void(0)" id="josephmanning"><img src="img/port/sml/josephmanning.jpg" border="0" alt="" /></a>
- <a class="thumb" href="javascript:void(0)" id="omm"><img src="img/port/sml/omm.jpg" border="0" alt="" /></a>
- <a class="thumb" href="javascript:void(0)" id="omm-dancer"><img src="img/port/sml/omm.jpg" border="0" alt="" /></a>
- </div>
- <div id="portfolioRight">
- <div id="portfolioMac">
- <div id="portfolioPadding">
- <img src="img/port/lrg/josephmanning.jpg" border="0" alt="" />
- </div>
- </div>
- </div>
Any help is appreciated.
1