hosted by liquidweb


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

Forum Jump

How to create a GIF slideshow?

Reply Post New Thread In Web Design and Content Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old 06-08-2009, 08:24 AM
LP560 LP560 is offline
Web Hosting Master
 
Join Date: Apr 2005
Location: Tinterweb
Posts: 553
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.


Reply With Quote


Sponsored Links
  #2  
Old 06-08-2009, 08:33 AM
5wayshost 5wayshost is offline
Web Hosting Guru
 
Join Date: Jan 2006
Location: Australia
Posts: 258
I recommend you buy photoshop make your images professionally using this product. Looking up google for further options too.

__________________
●● Melbourne | Sales Office ●
●● Dedicated Server | Budget VPS Servers | Texas Data Centers
●● 99.9% Uptime Guarantee | 24/7/365 Support | Money Back Guarantee
●● www.webhostmelbourne.com | Webhost Melbourne

Reply With Quote
  #3  
Old 06-08-2009, 10:33 AM
LP560 LP560 is offline
Web Hosting Master
 
Join Date: Apr 2005
Location: Tinterweb
Posts: 553
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.


Reply With Quote
Sponsored Links
  #4  
Old 06-08-2009, 05:12 PM
SSHocker SSHocker is offline
Retired Moderator
 
Join Date: Jan 2005
Location: Darwin, Australia
Posts: 1,333

__________________
Graham Craig

Mobile Mechanic Darwin

IT'S NOT HOW GOOD YOU ARE, IT'S HOW BAD YOU WANT IT.

Reply With Quote
  #5  
Old 06-08-2009, 07:15 PM
Kohrar Kohrar is offline
Junior Guru
 
Join Date: Apr 2007
Location: Calgary, Canada
Posts: 200
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.

Reply With Quote
  #6  
Old 06-08-2009, 07:24 PM
Eoin_ Eoin_ is offline
WHT Addict
 
Join Date: Mar 2009
Location: Dublin/Wicklow
Posts: 145
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>

Reply With Quote
  #7  
Old 06-10-2009, 05:37 AM
LP560 LP560 is offline
Web Hosting Master
 
Join Date: Apr 2005
Location: Tinterweb
Posts: 553
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.


Reply With Quote
  #8  
Old 06-10-2009, 05:42 AM
Eoin_ Eoin_ is offline
WHT Addict
 
Join Date: Mar 2009
Location: Dublin/Wicklow
Posts: 145
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.

Reply With Quote
  #9  
Old 06-11-2009, 02:52 PM
s2mu3123 s2mu3123 is offline
Junior Guru Wannabe
 
Join Date: Mar 2009
Posts: 95
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

Reply With Quote
  #10  
Old 06-16-2009, 02:09 PM
natiohost natiohost is offline
Newbie
 
Join Date: Apr 2009
Posts: 11
Adobe ImageReady
Lesson: http://www.webdesign.org/web/photosh...show.2227.html

Quality - tab "Optimize"

Reply With Quote
  #11  
Old 06-16-2009, 04:05 PM
praveenkv1988 praveenkv1988 is offline
Web Hosting Evangelist
 
Join Date: Sep 2008
Posts: 544
You can use GIF animator.

Reply With Quote
  #12  
Old 06-21-2009, 11:35 PM
aussieroo1 aussieroo1 is offline
Junior Guru Wannabe
 
Join Date: Jun 2009
Posts: 93
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.

Reply With Quote
Reply

Related posts from TheWhir.com
Title Type Date Posted
Cirrus Hosting Lets Users Create Virtual Private Networks within Public Cloud Web Hosting News 2014-05-02 12:40:36
1&1 Internet Adds New SMB Tools to MyWebsite Web Hosting News 2013-03-25 16:29:43
Web Host Rackspace Introduces Cloud Network Isolation Technology Web Hosting News 2012-10-30 11:35:37
Living on the edge: why all hosts should offer CDN services Webinars 2012-10-17 15:54:32
Web Host Media Temple Wins Workplace Award, Launches Referral Program Web Hosting News 2012-08-17 08:50:02


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
Advertisement:
Web Hosting News:



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?