Inserting Slide Show

HTML & CSS
1

Pretty new at all this and pretty much just know the basics. How difficult is it to insert a slide show to my website? Are there programs that do this?

2

Hi Barnum. There are various ways to do it, and it doesn’t have to be hard. However, what you first need to decide is how you want the slideshow to work, as there are lots of different kinds of slideshow. What sort of functionality / look / design are you considering? Or does it not matter? (in which case, we could suggest something simple).

3

Would like to have about five photos on the index page that fade or change every three or four seconds… Does that make sense?

4

So do you mean you see one image at a time, and the images fade one into another?

5

Yes…

6

OK, here is a nice slideshow for that sort of thing:

http://jquery.malsup.com/cycle/basic.html

Now, you will have to style it to suit the size of your images etc. And you also have to install some scripts etc., but it’s not hard.

Firstly, put something like this into your HTML:

<div class="slideshow"> 
	<img src="/images/image1.jpg" width="200" height="200">
	<img src="/images/image2.jpg" width="200" height="200">
	<img src="/images/image3.jpg" width="200" height="200">
	<img src="/images/image4.jpg" width="200" height="200">
	<img src="/images/image5.jpg" width="200" height="200">
</div>

That assumes that your images are in a folder called /images/ at yoursite.com/images/, so of course if that’s not where your images are you’ll have to change those paths.

It also assumes your images are 200 x 200 px, so reset those dimensions to suit.

You will also need to set some styles for .slideshow div, such as

.slideshow {
width: 200px; 
height: 200px; 
overflow: hidden;
}

Then, in the head of your document (between the <head> … </head> tags), OR at the end of your document, just before the closing </body> tag, add this code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});
</script>

It may take a bit of fiddling to get it right, but this is a pretty reliable script.

7

Is this correct?

<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script>
<script type=“text/javascript” src=“http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js”></script>
<script type=“text/javascript”>
$(document).ready(function() {
$(‘.slideshow’).cycle({
fx: ‘fade’ // choose your transition type, ex: fade, scrollUp, shuffle, etc…
});
});
</script>

8

What do you mean? You’ve just copied the code I pasted above. Have you tried it on a page? Have you used the HTML? Give as much info as you can to help us help you. I’ve given you some pretty good help already, but I can’t do it for you, so you need to be really clear about where you are up to.

9

Let me look over what I did again…could be just that one small thing that is screwing things up… didn’t mean to sound unappreciable.

10

This stuff can be tricky, so feel free to PM me a link if you don’t want it seen publicly. :slight_smile:

11

Ralph, thanks…have something now that works and I have to fine tune… Appreciate your help.

12

Great, thanks for the feedback, and well done. You’ve set up JavaScript on your own website, which is quite an achievement!