Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : How to create a GIF slideshow?

[LP560]

I would like to create an animated GIF slideshow for one of my sites, there would be 3-4 images with a 4-5 second delay. I know there are sites which will generate these slideshows but they seem to compress the images and degrade the image quality.

How would you recommend I go about this?

[5wayshost]

I recommend you buy photoshop make your images professionally using this product. Looking up google for further options too.

[LP560]

I tried it in photoshop the other day, but I still had the quality degeneration issue.
I've just seen the images I'm using are jpeg, could that be the issue?

[SSHocker]

http://www.longtailvideo.com/players/jw-image-rotator/

Works fine on sites we've done

[Kohrar]

If you're making a GIF slideshow (A GIF containin 4 images as an animation?), then you will be having images that are dithered. This is because GIFs can only support up to 256 colors in the palette.

I'd suggest having 4 jpgs and use flash or javascript to animate the slideshow.

[Eoin_]

Originally Posted by Kohrar

I'd suggest having 4 jpgs and use flash or javascript to animate the slideshow.

Yep, a bit of JavaScript should do the trick and possibly be a bit more bandwidth friendly. For some reason animated gifs take an age for me.

JS:

/*****

Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com

Please leave this notice intact. 

Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html


*****/


window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
	if(!d.getElementById || !d.createElement)return;

	// DON'T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT!
	// http://slayeroffice.com/code/imageCrossFade/xfade2.css
	css = d.createElement("link");
	css.setAttribute("href","xfade2.css");
	css.setAttribute("rel","stylesheet");
	css.setAttribute("type","text/css");
	d.getElementsByTagName("head")[0].appendChild(css);

	imgs = d.getElementById("imageContainer").getElementsByTagName("img");
	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
	imgs[0].style.display = "block";
	imgs[0].xOpacity = .99;
	
	setTimeout(so_xfade,2500);
}

function so_xfade() {
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1]?current+1:0;

	nOpacity = imgs[nIndex].xOpacity;
	
	cOpacity-=.05; 
	nOpacity+=.05;
	
	imgs[nIndex].style.display = "block";
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;
	
	setOpacity(imgs[current]); 
	setOpacity(imgs[nIndex]);
	
	if(cOpacity<=0) {
		imgs[current].style.display = "none";
		current = nIndex;
		setTimeout(so_xfade,2500);
	} else {
		setTimeout(so_xfade,50);
	}
	
	function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}
	
}

CSS:

#imageContainer 
{
	position:relative;
	margin:auto;
	width:300px;
	border:1px solid #000;
	height:241px;
}

#imageContainer img 
{
    display:none;
    position:absolute;
    top:0; left:0;
    width: 300px;
}

HTML:

   	            <div id="imageContainer">
                    <img src="images/home1.jpg" width="300px" alt="" />
                    <img src="images/home5.jpg" alt="" />
                    <img src="images/home2.jpg" alt="" />
                    <img src="images/home6.jpg" alt="" />
                    <img src="images/home3.jpg" alt="" />
                    <img src="images/home4.jpg" alt="" />
                </div>

[LP560]

Thanks for the advice.

I'm not a fan of JS as it doesn't work on non JS enabled browsers, can you do a similar slideshow in css, or will that have the same issues as the GIF slideshow?

[Eoin_]

If the browser doesn't have JS enabled then it will just show all the images. That's good enough for me. I only care that a site is functional at a basic level for people with JS turned off. I won't waste my time making sure the site looks and works exactly the same.

[s2mu3123]

Regarding the .gif animation you will have to create the layers using photoshop how you want the images position to be animated then save this psd file then import in Imageready and then animate properly and make this animation save for web hence this will be compressed / optimized having good quality for it.

or you can create a flash movie for the effects you need for the images

Try this you will be able to create .gif animation or flash animation

[natiohost]

Adobe ImageReady
Lesson: http://www.webdesign.org/web/photosh...show.2227.html

Quality - tab "Optimize"

[praveenkv1988]

You can use GIF animator.

[aussieroo1]

You don't have to download a GIF creator if you have Photoshop installed. You can jump to ImageReady for creating the animated GIF. There are a lot of online tutorials you can follow.