Image fade effect for an existing javascript photo gallery

Question

I am a photographer and I have been working on redesigning my website lately. I utilized a slideshow code that I found on a very useful website and was able to customize it to my need by removing autoplay, customization of next, prev buttons and etc... It's a simple one really and it seems to be working really well now.

But I have one question. Is it possible to add a fade effect to image transitions without completely rewriting the code? I've been searching for javascript/jquery codes for a few days now and I've come across many sites offering codes but I couldn't find any that will let me implement it into an existing gallery. Here's what my code looks like;

<body>

<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();


// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["/images/portrait/image1.jpg", "", "Image Title 1"];
theimage[1]=["/images/portrait/image2.jpg", "", "Image Title 2"];
theimage[2]=["/images/portrait/image3.jpg", "", "Image Title 3"];
theimage[3]=["/images/portrait/image4.jpg", "", "Image Title 4"];
theimage[4]=["/images/portrait/image5.jpg", "", "Image Title 5"];
theimage[5]=["/images/portrait/image6.jpg", "", "Image Title 6"];
theimage[6]=["/images/portrait/image7.jpg", "", "Image Title 7"];
theimage[7]=["/images/portrait/image8.jpg", "", "Image Title 8"];

///// Plugin variables

playspeed=0;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;


//###########################################
window.onload=function(){

    //preload images into browser
    preloadSlide();

    //set the first slide
    SetSlide(0);

}

//###########################################
function SetSlide(num) {
    //too big
    i=num%theimage.length;
    //too small
    if(i<0)i=theimage.length-1;

    //switch the image
    document.images.imgslide.src=theimage[i][0];

    //if they want name of current slide
    document.getElementById('slidebox').innerHTML=theimage[i][2];

    //if they want current slide number and total
    document.getElementById('slidecount').innerHTML= ""+(i+1)+" / "+theimage.length;

}

//###########################################
function preloadSlide() {
    for(k=0;k<theimage.length;k++) {
        theimage[k][0]=new Image().src=theimage[k][0];
    }
}

</script>


<!-- slide show HTML -->
<form name="slideshow">

<table border="0" cellpadding="2" cellspacing="0">
<tr>
    <td align="left">
    <script type="text/javascript">
        document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
    </script>
    </td>
</tr>
<tr>
    <td align="left"><div id="slidebox"></div></td>
</tr>
<tr>
    <td height="30px" align="left" valign="bottom">
        <a style="text-decoration:none;" href="javascript:SetSlide(i-1);" onfocus="this.blur()">Prev</a> | 
        <a style="text-decoration:none;" margin-left:2px"; href="javascript:SetSlide(i+1);" onfocus="this.blur()">Next</a>
        <div style="display:inline; margin-left:10px" align="left" id="slidecount"></div>
    </td>
</tr>
</table>

</form>
<!-- end of slide show HTML -->

</body>

Thank you!

jfriend00 · Accepted Answer · 2012-06-18T16:06:03.907

1

You can change SetSlide() to implement a fadeOut and then a fadeIn using jQuery like this:

//###########################################
function SetSlide(num, titleOnly) {
    if (!titleOnly) {
        //switch the image
        var img = $("#imgslide");

        // don't interrupt an image in transition
        if (img.data("inTransition")) {
            return;
        }
        img.data("inTransition", true);


        //too big
        i=num%theimage.length;
        //too small
        if(i<0)i=theimage.length-1;

        img.stop(true).animate({opacity: 0}, 1000, function() {
            img.attr("src", theimage[i][0]);
            img.animate({opacity: 1}, 1000, function() {
                img.data("inTransition", false);

            });
        })
    }

    //if they want name of current slide
    document.getElementById('slidebox').innerHTML=theimage[i][2];

    //if they want current slide number and total
    document.getElementById('slidecount').innerHTML= ""+(i+1)+" / "+theimage.length;

}

And change preloadSlide() to this:

//###########################################
function preloadSlide() {
    for(k=0;k<theimage.length;k++) {
        theimage[k][3]=new Image().src=theimage[k][0];
    }
}

Here's a working demo: http://jsfiddle.net/jfriend00/85nzq/

To include jQuery in your page, add this near the top right after the <body> tag before your other scripts:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

edited Jun 18 '12 at 16:06

answered Jun 18 '12 at 15:01

jfriend00

683,504
96
985
979

Thank you for your answer. But when I change the code like you wrote, next and previous buttons stop responding and image counter disappears... – Jun 18 '12 at 15:29
Please see the latest version of the code and the working example. – jfriend00 Jun 18 '12 at 15:32
I updated the code once more to make the animation a little smoother. Note: the code ignores clicks on next/prev during an animation. – jfriend00 Jun 18 '12 at 15:35
ok, I am working on it now. I appreciate your help. Just to make sure; this does not add autoplay function, right? But I need only manual slideshow – Jun 18 '12 at 15:39
@user1463848 - This is only manual slideshow, no auto. It sets the fadeIn/fadeOut time to 1 second each way. You can adjust that by changing the 1000 value in two places to however many milliseconds you want it to be. – jfriend00 Jun 18 '12 at 15:43
I copied and pasted the whole but for some reason, I cannot get it to work. Next and Prev buttons are still not responsing. All the javascript codes goes into body tag, right? – Jun 18 '12 at 15:51
@user1463848 - Are you including jQuery into your page? It is required for the animation. You tagged your question with jQuery so I assumed it was OK to use it. – jfriend00 Jun 18 '12 at 16:01
"including jQuery into your page?" is it something I need to attach or download? I only used the code you provided on the link above. Sorry, I am not that proficient in these issues..:) – Jun 18 '12 at 16:03
@user1463848 - I've added info at the end of my answer that shows you how to include jQuery into your page. – jfriend00 Jun 18 '12 at 16:06
Oh, it works perfectly now. Thank you so much! I've almost become cross eyed looking for a solution for the last few days for this. – Jun 18 '12 at 16:09
@user1463848 - Since you're new to StackOverflow, do you realize that if you get an answer to your question, you are supposed to select a "best answer" by clicking the checkmark to the left of the answer. This rewards the answerer, gives you some reputation points for finishing the question and tells future readers which answer worked best for you. – jfriend00 Jun 18 '12 at 16:19
ok, I just voted for your answer using that checkmark. Thanks a lot again, and have a great day! – Jun 18 '12 at 16:35

Image fade effect for an existing javascript photo gallery

1 Answers1