Results 1 to 12 of 12
Thread: How to create a GIF slideshow?
-
06-08-2009, 08:24 AM #1Web Hosting Master
- Join Date
- Apr 2005
- Location
- Tinterweb
- Posts
- 556
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.
-
06-08-2009, 08:33 AM #2Disabled
- Join Date
- Jan 2006
- Posts
- 297
I recommend you buy photoshop make your images professionally using this product. Looking up google for further options too.
-
06-08-2009, 10:33 AM #3Web Hosting Master
- 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.
-
06-08-2009, 05:12 PM #4Retired Moderator
- Join Date
- Jan 2005
- Location
- Darwin, Australia
- Posts
- 1,339
http://www.longtailvideo.com/players/jw-image-rotator/
Works fine on sites we've doneWeb Hosting Plus
Premium Australian Web Hosting
-
06-08-2009, 07:15 PM #5Junior Guru
- 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.
-
06-08-2009, 07:24 PM #6WHT Addict
- Join Date
- Mar 2009
- Location
- Dublin/Wicklow
- Posts
- 146
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) + ")"; } }
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 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>
-
06-10-2009, 05:37 AM #7Web Hosting Master
- 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.
-
06-10-2009, 05:42 AM #8WHT Addict
- 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.
-
06-11-2009, 02:52 PM #9Junior Guru Wannabe
- Join Date
- Mar 2009
- Posts
- 99
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
-
06-16-2009, 02:09 PM #10Newbie
- Join Date
- Apr 2009
- Posts
- 11
Adobe ImageReady
Lesson: http://www.webdesign.org/web/photosh...show.2227.html
Quality - tab "Optimize"
-
06-16-2009, 04:05 PM #11Web Hosting Evangelist
- Join Date
- Sep 2008
- Posts
- 545
You can use GIF animator.
-
06-21-2009, 11:35 PM #12Junior Guru Wannabe
- Join Date
- Jun 2009
- Posts
- 96
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.