get thumbnail image swap to fade

Question

hello everyone,

I'm just getting to throwing myself into the javascript, jQuery pool and have found some possible alternative solutions but I wanted to see if there was a way I could acheive fadeIn/fadeOut with the existing javascript I am using.

right now it is thumbnails that switch images in a main area onclick (actual site is onmouseover) using the following script:

 function switch_product_img(divName, totalImgs) {
  for (var i=1; i<=totalImgs; i++) {
   var showDivName = 'photo_' + i;
   var showObj = document.getElementById(showDivName);
   if (showDivName == divName)
    showObj.style.display = 'block';
   else
    showObj.style.display = 'none';    
   }
  }
 </script>

and there is a basic test you can see here: http://www.souldesigngroup.com/client/miguel/editorial/

I have tried multiple different ways to achieve it and have been given some suggestions but so far none of them have worked in any manifestation. so any thoughts, suggestions, solutions would be greatly appreciated.

I know there are alternatives, and I may resort to rebuilding with one of them, but this is set up and working perfectly besides the fade.

thank you in advance for any help! -soren

Answer 1

If you're willing to use jQuery and do some modifications to your HTML, I have a solution for you.

HTML

<div class="photo" id="photo_1">...</div>
<div class="photo" id="photo_2">...</div>
<div class="photo" id="photo_3">...</div>

<ul class="thumbs">
    <li><a href="#" rel="photo_1"><img src="..." /></a></li>
    <li><a href="#" rel="photo_2"><img src="..." /></a></li>
    <li><a href="#" rel="photo_3"><img src="..." /></a></li>
</ul>

jQuery

$(function() {
    $('ul.thumbs a').click(function() {
        var rel = $(this).attr('rel');
        $('div.photo').fadeOut(500, function() {
            $('div#'+rel).fadeIn(500);
        });
        return false;
    });
});

Answer 2

thanks again Tatu, unfortunately after getting it all set up on an actual site page I realized it is not going to work with various size images, it needs to fully swap image and follow css attirbutes to keep other hidden rather than just overlay. good to have for future use though! thanks.

but does anybody else have any ideas how to create a fade within the example script given above? it is working perfectly except for the fade, so any ideas would be much appreciated.

I have been told the following works with some css/html tweaks to the overall, but I can't even get a small test page to swap with it nonetheless fade. is that on the right track?

function switch_product_img(divName, totalImgs) {
for (var i=1; i<=totalImgs; i++) {
var showDivName = 'photo_' + i;
var showObj = document.getElementById(showDivName);
if (showDivName == divName)
jQuery(showObj).fadeIn('normal');
else
jQuery(showObj).fadeOut('normal');
}
}

Answer 3

alright, I gave up on my original javascript, modified this jQuery plugin to my gallery: http://www.twospy.com/galleriffic/index.html

if anyone else wants the html/css/js for this super basic gallery (link in first post) let me know.

and of course you can then add lot's of the other features of galleriffic if you're so inclined.

.soren