How do you get a smooth transition between photos with javascript? 1

[emblewembl]

I'm building a web page to show photo albums and there is a next and back button which changes the big image to the next one in the list. However, when you change from say a portrait to a landscape photo the transition can look very clunky. Here's the url:

http://www.pickwickpictures.co.uk/viewjob3.aspx?proj=Carla

What's involved in getting a fade working here to smooth things out a bit?

i love chocolate

 

[BillyRayPreachersSon]

You would need to use a timer to change the opacity of the old and new images (fading one out, and one in).

You can set the opacity for most browsers these days, including NN7+, Safari, Firefox, IE, and possibly later versions of Opera.

You might also check out the "Lightbox image popups" thread here:

thread253-1180170

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[emblewembl]

Hi Dan,

Thanks for the post, i looked at the lightbox stuff which is fantastic but i'm really just after a script example of a fade transition if anyone has one?


i love chocolate

 

[BabyJeffy]

What's involved in getting a fade working here to smooth things out a bit?

Once you were told how to do it (opacity change is the way to do it) you decide you want someone else to create the code for you.

...i'm really just after a script example of a fade transition if anyone has one?

It would have been more useful (to us as well as to yourself) if you could have been honest up front and stated that you wanted someone to either write it for you, or to point you to a complete solution already on the net for free.

Good luck with your project,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[emblewembl]

Jeff i've been using this forum for years and people like you make it very intimidating for beginners to post questions. I am not a beginner but do not have much experience of javascript and i know there must be plenty of examples of this script out there I just can't seem to find them so I thought asking for help might be a good idea. If you don't have anything constructive to add to a post please don't reply.

i love chocolate

 

[BabyJeffy]

Um, actually... if you ask for what you want UP FRONT then you will get a much more valuable response.

Regarding your comment that my kind of posting makes it more intimidating for new posters... I totally disagree, but I'm more than happy for you to have that opinion.

If you take a look at most of my posts in this forum you will see they are helpful and informative. Obviously other people agree with me (since many of them have offered stars as thanks) - you can see my posting stats for yourself by clicking on my name.

There are going to be times when I post a message that doesn't seem to directly help the individual poster (and this is the scenario we are now involved in). Whilst it may not appear to help you, it certainly helps me (and the many MVPs who answer questions every day here for no payment or reward) by eventually cutting down the "rubbish" and the "white noise" posts (which unfortunately this is turning into).

If you don't have anything constructive to add to a post please don't reply.

Just because you don't believe something is constructive doesn't mean it doesn't have value (or is constructive to another person).

Anyway, I hope you enjoy building your project!
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[BillyRayPreachersSon]

emblewembl,

To set opacity in browsers that support the CSS 3 "opacity" propery, in Mozilla-based browsers (NN, Moz, FF, etc), and in Konqueror-based browsers (Konqueror, Safari, etc), you can use this syntax:

element.style.opacity = element.style.MozOpacity = element.style.KhtmlOpacity = (opacity / 100);

Where element is a pointer to your element, and opacity is a number between 0 and 100, representing the percentage of opacity you want (0 being totally transparent, 100 being totally solid).

MozOpacity and KhtmlOpacity refer to the proprietary "-moz-opacity" and "-khtml-opacity" styles, while "opacity" is simply the CSS 3 "opacity" style.

To set the opacity in IE, give your image an initial opacity using CSS:

#yourImageId {
	filter: alpha(opacity=100);
	position: relative;
}

and then you can use this script to set the opacity level:

element.filters.alpha.opacity = opacity;

As I mentioned before, you would use a timer (setTimeout or setInterval) to perform the fading over a period of time.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[emblewembl]

Thanks, thats great and i'll give it a go!

i love chocolate

 

[BillyRayPreachersSon]

emblewembl,

How did it go?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[emblewembl]

Sorry Dan, I am up to my neck in work right now so haven't tried it yet as that's part of a background project. Should be trying it his coming weekend so will let you know. Thanks for asking!

i love chocolate

 

[emblewembl]

Yaaaaaayy, finally got the time to give this a go and I've now got a page working locally with an image fading in when it loads, and fades out when I click on it, and i've got it working in IE and Firefox. Here's the code:

var timeinterval = 40;
var opacity = 0;
var fadeInId = 0;
var fadeOutId = 0;
        
function fadeIn(imgobj){
            opacity = 0;
            io = imgobj;
            fadeInId = window.setInterval("setOpacity('true',io)",timeinterval);
        }
        
        
function fadeOut(imgobj){
            opacity = 100;
            io = imgobj;
            fadeOutId = window.setInterval("setOpacity('false',io)",timeinterval);
        }
        
        
function setOpacity(fadein,el){
            
            if(fadein=="true"){ //FADEIN
                opacity = opacity + 1;
            
                //check the image opacity. If opacity = 100 then clear the timer
                if (opacity == 100){
                    window.clearInterval(fadeInId);
                }
            }
            else{               //FADEOUT
                opacity = opacity - 1;    

                //check the image opacity. If opacity = 0 then clear the timer
                if (opacity == 0){
                    window.clearInterval(fadeOutId);
                }
            }
            
            //change the opacity effect - different way for different browser type
            browserdetect = el.filters? el.filters.alpha.opacity = opacity : el.style.MozOpacity=opacity/100;
        }

All comments very gratefully received - how will this display in older browsers? Anything I can do to make the code better? More compatible with more browsers?

i love chocolate