Slideshows how to anyone?

Devante · Joined: 19 Jul 2008 Posts: 5

I am new to web design and i am making a business web site. I am wanting to have a nice slideshow maybe something of different projects i have done one fading to another. 10 or so pictures i think would be adequate. Can anyone steer me in the right direction for this and as i am new to this the easier to understand the better.

Thanks in advance,

Devante

Straystudio · Joined: 14 Apr 2008 Posts: 261 Location: Nord Italy

It is fine You also wish to understand, not to copy-paste only.

Every JavaScript slideshow coding employs

setTimeout('',) or setInterval('',)

beeing Operative Sistem's native JavaScript properties, kind of timers, taking cadence through the computer's built-in clock.
This is what automatically moves the "gear"; a gear which has to stand-up by itself handling Images, though.
Timer intervenes after, on this gear.

Now, how to store the Images.
Images are called in play through their address ending .jpg .gif or so; and this will be kept, still.
Yet, the coding "gear" We are going to accomplish, is able to slide along a list through math operators; namely here, "+" plus operator.
We can not have the program "understanding" the string of the Image URL, but We can translate each URL into a numbered item of a group.

It is what is called an Array, in programming.
You can write Your Array this way:

Jetsam4996 · Joined: 03 May 2008 Posts: 22

ummm, well, to do it without complicated coding, you may just want to download a software such as photobucket, and create your slideshow, then embedd it into your site.

glad to help,
jetsam4996

Straystudio · Joined: 14 Apr 2008 Posts: 261 Location: Nord Italy

This won't be anything complicated, just HTML Coding as this Forum is designed to; 'pieces' of JavaScript, Users can accomplish according to their layouts.

if STATEMENT IN JAVASCRIPT

if (hypothesis) {string to be executed if hypothesis occurs}

Now We need that:

if the item-number facing to income into the function, as increased as left on the last triggering, matchs already the last item of the Array, 3 in this sample and going to produce 4 so overtaking Array length, if so We no longer want it to take +1
We simply want to take 0 zero, istead to be delivered as shown in the command JS path directly; the first pitcure of the Array going to be displayed again.

Otherwise, the last item beeing not reached, still (else) +1 goes to be added to get the number, shown will translate into.

pictures = new Array()
pictures[0] = "http://www.cameraworkphotographers.com/002ITALIA.jpg";
pictures[1] = "http://www.cameraworkphotographers.com/008ITALIA.jpg";
pictures[2] = "http://www.cameraworkphotographers.com/003ITALIA.jpg";
pictures[3] = "http://www.cameraworkphotographers.com/001ITALIA.jpg";

facing = -1

function SwapAhead() {
if (facing == 3) {
shown = 0}
else {
shown = facing +1
};
document.getElementById("displayer").src=pictures[shown];
facing = shown
};

And yes, this makes an handler able to keep the change of image as rotating.

Also notice, I have changed the opening facing = 0 declaration into facing = -1 so to have the first image pictures[0] to show on the very first click, since it is assumed here to have img src"" empty in the BODY (blank page on loading); otherwise, its URL can be placed there. This is matter of choices in building.

Now the next step, how to finally automate the swapping of images, will be way more easy than anyone could expect.
Simply add this Timer as further a command along the "staircase" of the function:

setTimeout('SwapAhead()', 2000)

where 2000 is the amount in milli-seconds (customizable) after of that, the content between '' quotes will be executed; here, calling the function itself to auto-trigger.

As a result, a complete basic slideshow project; care of, I changed the name of the function into Sequence() :

Newbie101 · Joined: 09 Oct 2008 Posts: 35

Suprised nobody has mentioned animated GIFs.

a) download a free program called unfreez from Majorgeeks or somewhere.

b) size all photos the same and save as GIF files (will result in some resolution loss), but not too bad.

c) Put them all together with unfreez and pick a time delay.

I have made animations and animated buttons with this method. It is easy and a GIF file is accessed the same way as a JPEG.

The other methods are better for high quality, but all data is stored within the GIF file so there is no need for tons of code and simplicity is better sometimes.

biffnewport · Joined: 30 Sep 2007 Posts: 10

You could upload your pictures to Picasa and then make a slide show there.

While signed in to Picasa, open the Web Album you created and click on "Link to this post." Then click on "Embed slideshow". Copy and paste the code to your page.

You may want use a <DIV> tag to align your slideshow.

Something like this.

<DIV ALIGN="CENTER>

<embed code goes here></embed>

</DIV>

If you would like to use the animated gif method previously mentioned you can create the animation with Photoscape, a great free download which allows you to add frames and transitions to your anigif.

Newbie101 · Joined: 09 Oct 2008 Posts: 35

yes! the program I used called unfreez is fairly limited as all the pics need to be spaced the same way timewise. I'd suggest the other program if its free.

I have a very old geocities site that has decent examples of what effects it does. I even used an animated gif as a background which gives a great background changing effect I've not seen elsewhere. The background changes colour every 10 secs or so.

I don't want to be accused of spamming so I'll mention that this (very old) wedding website page is still around on geocities for some strange reason (5 years). I stopped doing wedding websites when software came down to twenty bucks that did a better job than me. lol

here it is though its worth anyone looking at the background effect though
http://geocities.com/friendlyprogrammer/msg5.htm?200617

think photobucket.com also does slideshows.

Sorry I'm giving newb answers, but I just seem to like animated gifs. lol