JavaScript Forum

**keelbolt** · 08:28 AM

This is my first jquery implementation, but I can't get it to work, and would appreciate some assistance.

I am trying to implement Spacegallery: www.eyecon.ro/spacegallery/
I have downloaded jquery-1.3.min.js and placed it in subfolder js on my test server. I have also downloaded the Spacegallery files, placing the jquery scrips in the same js folder. The js folder now holds the following scripts:

jquery-1.3.min.js
eye.js
layout.js
spacegallery.js
utils.js

The implementation guide says to "prepare a block level element with some images inside. All you have to do is to select the elements in a jQuery way and call the plugin."

I have created a simple HTML page with the following code that I believe follows this instruction, but something isn't working. I've read the entire jsquery documentation (headache at 11.30pm) but still can't get this code to animate the #myGallery div. Can anyone spot any jquery error in what I have coded below, please, or help me to get it working? (The URL for my test page is http://www.testplace.co.uk/gallery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/gallerycss.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" />

<script src="js/jquery-1.3.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/spacegallery.js"></script>

<script type="text/javascript"></script>

<script type="text/javascript"></script>

</head>

<body>
<div id="container">
<div id="myGallery">
<img src="http://www.webmaster-talk.com/images/bw1.jpg" alt="Image 1" />
<img src="http://www.webmaster-talk.com/images/bw2.jpg" alt="Image 2"/>
<img src="http://www.webmaster-talk.com/images/bw3.jpg" alt="Image 3"/>
</div>
</div>
</body>
</html>

**zambully** · 03-13-2010, 01:01 AM

Try putting the initialization after the "myGallery" div tags and see if that works. It worked for me. (Example below)

Code:

.......
<div id="myGallery">
  <img src="http://www.webmaster-talk.com/images/bw1.jpg" alt="Image  1" />
     <img src="http://www.webmaster-talk.com/images/bw2.jpg"  alt="Image 2"/>
     <img src="http://www.webmaster-talk.com/images/bw3.jpg"  alt="Image 3"/> 
  </div>
</div>

<script type="text/javascript">
     $('#myGallery').spacegallery({loadingClass: 'loading'});
</script>

</body>