Javascript Image Gallery Installation Guidance Please...

[reflex84]

Hi,I have recently posted in this forum of a slideshow that I am having problems with on a website that I am creating. You can catch up if you click here: http://w3schools.invisionzone.com/index.php?showtopic=30237Now I've decided to go with a different javascript slideshow, please visit this website to see the slideshow: http://smoothgallery.jondesign.net/showcas...-picture%286%29(I want to put this slideshow on my website)On that website, you'll notice at the bottom "YEAH OK, ENOUGH DEMO ... TELL ME MORE!" ... click on that which will take you to a page where there are instructions to setting this all up.It starts off saying

To download it, go to the download page. Once you've got the files, come back here.

So I downloaded the zip files ... and saved it all in the document I'm using my website in (ie: ready to install on my website)Then there are steps to follow:FIRST STEP: this step is easy for me .. I know what to do, basically put this in your header:

<script src="scripts/mootools.v1.11.js" type="text/javascript"></script><script src="scripts/jd.gallery.js" type="text/javascript"></script><link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />

(correct me if I am wrong)SECOND STEP: They say: "So, add a code similar to this one (here I added 2 elements) to define the slideshow elements:"

<div id="myGallery"><div class="imageElement"><h3>Item 1 Title</h3><p>Item 1 Description</p><a href="mypage1.html" title="open image" class="open"></a><img src="images/brugges2006/1.jpg" class="full" /><img src="images/brugges2006/1-mini.jpg" class="thumbnail" /></div><div class="imageElement"><h3>Item 2 Title</h3><p>Item 2 Description</p><a href="mypage2.html" title="open image" class="open"></a><img src="images/brugges2006/2.jpg" class="full" /><img src="images/brugges2006/2-mini.jpg" class="thumbnail" /></div></div>

In my case I added the exact code .... is this wrong?THIRD STEP: This is where I'm not sure if I have got things right?I don't know where to add this code:

<script type="text/javascript">function startGallery() {var myGallery = new gallery($('myGallery'), {timed: true,showArrows: false,showCarousel: false});}window.addEvent('domready', startGallery);</script>

Must I add it just before the div tag of STEP 2 or must I put this in the head?The 4th and 5th Step I understand but what I DON'T understand is when I preview the gallery it doesn't at all look like the gallery of his: http://smoothgallery.jondesign.net/showcas...-picture%286%29What am I doing wrong?

[justsomeguy]

For the script and link tags you added to the head, make sure the URLs they point to are correct. It may help you to use Firebug with Firefox, in Firebug you can click on the Net tab to look at all of the requests for all of the resources on the page, and you can look for any that are resulting in a 404 not found. You would need to fix any of those.

In my case I added the exact code .... is this wrong?

I don't know, that code sets up the gallery with their images in it. Is that what you want to do? If you already have a div on your page with the ID "myGallery" then that's a problem, you can't have elements with the same ID.

Must I add it just before the div tag of STEP 2 or must I put this in the head?

That can go anywhere, but it would make the most sense to put it in the head.