Results 1 to 12 of 12
  1. #1
    Join Date
    Apr 2005
    Location
    Tinterweb
    Posts
    556

    Question How to create a GIF slideshow?

    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?
    C program run. C program crash. C programmer quit.

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

  3. #3
    Join Date
    Apr 2005
    Location
    Tinterweb
    Posts
    556
    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?
    C program run. C program crash. C programmer quit.

  4. #4
    Join Date
    Jan 2005
    Location
    Darwin, Australia
    Posts
    1,339
    Web Hosting Plus
    Premium Australian Web Hosting

  5. #5
    Join Date
    Apr 2007
    Location
    Calgary, Canada
    Posts
    201
    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.

  6. #6
    Join Date
    Mar 2009
    Location
    Dublin/Wicklow
    Posts
    146
    Quote Originally Posted by Kohrar View Post
    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:
    Code:
    /*****
    
    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:
    Code:
    #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:
    HTML Code:
       	            <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>

  7. #7
    Join Date
    Apr 2005
    Location
    Tinterweb
    Posts
    556
    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?
    C program run. C program crash. C programmer quit.

  8. #8
    Join Date
    Mar 2009
    Location
    Dublin/Wicklow
    Posts
    146
    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.

  9. #9
    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

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

    Quality - tab "Optimize"

  11. #11
    You can use GIF animator.

  12. #12
    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •