I am new to Java and having an issue with it. My website currently works when run on my desktop but once it is uploaded it is not working correctly. Specifically the javascript does not seem to be working once I upload it. What it is supposed to do is switch from picture to picture but it is doing is displaying the loading bar. Which it does not do this offline.

Here is all of my coding any help will be appreciated

Source Code

<!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 name="Professional Digital Photo and Photography Services" http-equiv="Content-Type" content="text/html; charset=utf-8" />



<title>A &amp; B Pro Image</title>



<link href="layoutv2.css" rel="stylesheet" type="text/css" />


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


<!-- Preload Script Start -->
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}


function MM_findObj(n, d) { //v4.01
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
-->
</script>
<!-- Preload Script END -->


</head>


<body class="TwoColLayout" onload="MM_preloadImages('Images/PSD's/Home_H.jpg','Images/PSD/Navagation/AboutUs_H.jpg','Images/PSD/Navagation/Home_H.jpg','Images/PSD/Navagation/Gallery_H.jpg','Images/PSD/Navagation/Packages_H.jpg','Images/PSD/Navagation/Contact_H.jpg')">
<!--Start Web Page Container / #container-->


<div id="container">


<!--
Start Sidebar1


<div id="sidebar1">
<img src="Images/PSD/A&B.jpg" align="left" alt="Model" />
</div>


End Sidebar1
-->


<!--
Start Sidebar2


<div id="sidebar2">
<img src="Images/PSD/A&B.jpg" align="right" alt="Model" />
</div>


End Sidebar
-->


<!--Start Main Body Container / #mainContent-->


<div id="mainContent">


<center>
<img src="Images/PSD/A_BProImage.jpg" align="center" alt="A&amp;B Professional Imaging"/>
</center>
</div>
<center>
<div id="navagation">
<center>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/PSD/Navagation/Home_H.jpg',1)"><img src="Images/PSD/Navagation/Home.jpg" alt="Home" name="Home" id="Home" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gallery','','Images/PSD/Navagation/Gallery_H.jpg',1)"><img src="Images/PSD/Navagation/Gallery.jpg" alt="Gallery" name="Gallery" id="Gallery" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutUs','','Images/PSD/Navagation/AboutUs_H.jpg',1)"><img src="Images/PSD/Navagation/AboutUs.jpg" alt="About Us" name="AboutUs"  border="0" id="AboutUs"   /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Packages','','Images/PSD/Navagation/Packages_H.jpg',1)"><img src="Images/PSD/Navagation/Packages.jpg" alt="Packages" name="Packages" width="155" height=   "70" border="0" id="Packages" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','Images/PSD/Navagation/Contact_H.jpg',1)"><img src="Images/PSD/Navagation/Contact.jpg" alt="Contact" name="Contact" width="125" height="55" border="0" id="Contact" /></a>
</center>
</div>
</center>



<!--Start Main Body Content-->
<center>


<h2>Welcome to A&amp;B Professional Imaging</h2>


<!--SlideShow-->
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.onDomReady(startGallery);
</script>
<div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="Images/Index_Images/Wedding1.jpg" class="full" />


</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="Images/Index_Images/Portrait1.jpg" class="full" />


</div>
<div class="imageElement">
<h3>Item 3 Title</h3>
<p>Item 3 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="Images/Index_Images/Media1.jpg" class="full" />


</div>
<div class="imageElement">
<h3>Item 4 Title</h3>
<p>Item 4 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="Images/Index_Images/Adver1.jpg" class="full" />


</div>
<div class="imageElement">
<h3>Item 5 Title</h3>
<p>Item 5 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="Images/Index_Images/Art1.jpg" class="full" />


</div>
<div class="imageElement">
<h3>Item 6 Title</h3>
<p>Item 6 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="Images/Index_Images/Nature1.jpg" class="full" />


</div>
<!-- extra photo spots
<div class="imageElement">
<h3>Item 7 Title</h3>
<p>Item 7 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="images/brugges2006/7.jpg" class="full" />


</div>
<div class="imageElement">
<h3>Item 8 Title</h3>
<p>Item 8 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="images/brugges2006/8.jpg" class="full" />


</div>
-->


</div>
</center>
<!-- End Main Body Content / #mainContent --></div>


<!--Start Copyright Info / #copyrightinfo -->
<center><div id="copyrightinfo">
Copyright &copy;  2010 Abernathy &amp; Bowser Multimedia Unlimited <br />
Webmaster: <a href="mailto:Contact@ABProImage.com">Contact</a>


</div></center><!-- End Copyright Info / #copyrightinfo -->


</div><!-- End Web Page Container / #container -->
</body>
</html>

----------------------------------------------------------------------------

layoutv2.css

@charset "utf-8";
/* CSS Document */



body  {
font: 100%  Georgia, "Times New Roman", Times, serif;
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
background-color: #FFF;
background-image: url('Images/PSD/Background2_2.jpg');
background-repeat: no-repeat;
background-position: top center;
}


#mainContent a:link {
font-weight: normal;
color: #FFF;
text-decoration: none
}
#mainContent a:visited {
font-weight: normal;
color: #F00;
text-decoration: none
}
#mainContent a:hover {
font-weight: normal;
color: #FF0000;
text-decoration: none;
background-color: #CCCCCC;
border: 1px solid #000000;
padding: 4px
}
#mainContent a:active {
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
background-color: #990000;
padding: 4px;
border: 1px solid #000000;
}
.TwoColLayout #container {
width: 1200px;
height: 1000px;
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
overflow: hide;
vertical-align: top;
}
.TwoColLayout #sidebar1 {
float: left;
width: 250px;
padding: 0 0px;
}


.TwoColLayout #sidebar2 {
float: right;
width: 250px;
padding: 0 0px;
}
.TwoColLayout #mainContent {
margin: 0px 0px 0px 0px;
padding: 10px 10px;
width: 1180px;
}
.TwoColLayout #navagation {
position: relative;
top: -95px;
left: 0px;
width: 750px;
padding: 0 0px;
}
.TwoColLayout #navagation img {
border: 0px;
vertical-align: top;
}


.TwoColLayout #container #mainContent center h2 {
font-family: Georgia, "Times New Roman", Times, serif;
}


/* Start Copyright */
.TwoColLayout #copyrightinfo {
width: 600px;
position: realtive;
text-align: center;
padding: 10px 5px;
color: red;
}
#copyrightinfo a:link {
font-weight: normal;
color: #FFF;
text-decoration: none
}
#copyrightinfo a:visited {
font-weight: normal;
color: #F00;
text-decoration: none
}
#copyrightinfo a:hover {
font-weight: normal;
color: #FF0000;
text-decoration: none;
background-color: #CCCCCC;
border: 1px solid #000000;
padding: 4px
}
#copyrightinfo a:active {
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
background-color: #990000;
padding: 4px;
border: 1px solid #000000;
}
/* End Copyright */



/* Thumbnails */


#thumbnail {
height: 125px;
border-style: solid;
border-color: #CCC;
border-top-width: 0px;
border-bottom-width: 8px;
border-right-width: 10px;
border-left-width: 0px;


}


#weddingSing a:link {
padding: none;


}
#weddingSing a:visited {
text-decoration: none;


}
#weddingSing a:hover {
padding: 0px;
}
#weddingSing a:active  {
padding: 0px;
}
--------------------------------------------------------------------------------------
jd.gallery.css
--------------
#myGallery, #myGallerySet, #flickrGallery
{
width: 600px;
height: 400px;
z-index:5;
position: realtive;
top: -120px;


}


#flickrGallery
{
width: 500px;
height: 334px;
}


#myGallery img.thumbnail, #myGallerySet img.thumbnail
{
display: none;
}


.jdGallery
{
overflow: hidden;
position: relative;
}


.jdGallery img
{
border: 0;
margin: 0;
}


.jdGallery .slideElement
{
width: 100%;
height: 100%;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('img/loading-bar-black.gif');
}


.jdGallery .loadingElement
{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('img/loading-bar-black.gif');
}


.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 40px;
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}


* html .jdGallery .slideInfoZone
{
bottom: -1px;
}


.jdGallery .slideInfoZone h2
{
padding: 0;
font-size: 80%;
margin: 0;
margin: 2px 5px;
font-weight: bold;
color: inherit;
}


.jdGallery .slideInfoZone p
{
padding: 0;
font-size: 60%;
margin: 2px 5px;
color: #eee;
}


.jdGallery div.carouselContainer
{
position: absolute;
height: 135px;
width: 100%;
z-index: 10;
margin: 0px;
left: 0;
top: 0;
}


.jdGallery a.carouselBtn
{
position: absolute;
bottom: 0;
right: 30px;
height: 20px;
/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #333;
color: #fff;
cursor: pointer;
}


.jdGallery .carousel
{
position: absolute;
width: 100%;
margin: 0px;
left: 0;
top: 0;
height: 115px;
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}


.jdExtCarousel
{
overflow: hidden;
position: relative;
}


.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
position: absolute;
width: 100%;
height: 78px;
top: 10px;
left: 0;
overflow: hidden;
}


.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{
position: relative;
}


.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
cursor: pointer;
background: #000;
background-position: center center;
float: left;
border: solid 1px #fff;
}


.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{
margin-bottom: 10px;
}


.jdGallery .carousel .label, .jdExtCarousel .label
{
font-size: 13px;
position: absolute;
bottom: 5px;
left: 10px;
padding: 0;
margin: 0;
}


.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
font-size: 10px;
position: absolute;
bottom: 5px;
right: 10px;
padding: 1px 2px;
margin: 0;
background: #222;
border: 1px solid #888;
cursor: pointer;
}


.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{
color: #b5b5b5;
}


.jdGallery a
{
font-size: 100%;
text-decoration: none;
color: inherit;
}


.jdGallery a.right, .jdGallery a.left
{
position: absolute;
height: 99%;
width: 25%;
cursor: pointer;
z-index:10;
filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}


* html .jdGallery a.right, * html .jdGallery a.left
{
filter:alpha(opacity=50);
}


.jdGallery a.right:hover, .jdGallery a.left:hover
{
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}


.jdGallery a.left
{
left: 0;
top: 0;
background: url('img/fleche1.png') no-repeat center left;
}


* html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }


.jdGallery a.right
{
right: 0;
top: 0;
background: url('img/fleche2.png') no-repeat center right;
}


* html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }


.jdGallery a.open
{
left: 0;
top: 0;
width: 100%;
height: 100%;
}


.withArrows a.open
{
position: absolute;
top: 0;
left: 25%;
height: 99%;
width: 50%;
cursor: pointer;
z-index: 10;
background: none;
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}


.withArrows a.open:hover { background: url('img/open.png') no-repeat center center; }


* html .withArrows a.open:hover { background: url('img/open.gif') no-repeat center center;
filter:alpha(opacity=80); }



/* Gallery Sets */


.jdGallery a.gallerySelectorBtn
{
z-index: 15;
position: absolute;
top: 0;
left: 30px;
height: 20px;
/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #333;
color: #fff;
cursor: pointer;
opacity: .4;
-moz-opacity: .4;
-khtml-opacity: 0.4;
filter:alpha(opacity=40);
}


.jdGallery .gallerySelector
{
z-index: 20;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
}


.jdGallery .gallerySelector h2
{
margin: 0;
padding: 10px 20px 10px 20px;
font-size: 20px;
line-height: 30px;
color: #fff;
}


.jdGallery .gallerySelector .gallerySelectorWrapper
{
overflow: hidden;
}


.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
margin-left: 10px;
margin-top: 10px;
border: 1px solid #888;
padding: 5px;
height: 40px;
color: #fff;
cursor: pointer;
float: left;
}


.jdGallery .gallerySelector .gallerySelectorInner div.hover
{
background: #333;
}


.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
background: #000;
background-position: center center;
float: left;
border: none;
width: 40px;
height: 40px;
margin-right: 5px;
}


.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}


.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
color: #aaa;
}

----------------------------------------------------------------------------------------

jd.gallery.js

// declaring the class
var gallery = {
initialize: function(element, options) {
this.setOptions({
showArrows: true,
showCarousel: false,
showInfopane: false,
embedLinks: false,
fadeDuration: 400,
timed: true,
delay: 9000,
preloader: true,
preloaderImage: true,
preloaderErrorImage: true,
/* Data retrieval */
manualData: [],
populateFrom: false,
populateData: true,
destroyAfterPopulate: true,
elementSelector: "div.imageElement",
titleSelector: "h3",
subtitleSelector: "p",
linkSelector: "a.open",
imageSelector: "img.full",
thumbnailSelector: "img.thumbnail",
defaultTransition: "fade",
/* InfoPane options */
slideInfoZoneOpacity: 0.7,
slideInfoZoneSlide: true,
/* Carousel options */
carouselMinimizedOpacity: 0.4,
carouselMinimizedHeight: 20,
carouselMaximizedOpacity: 0.9,
thumbHeight: 75,
thumbWidth: 100,
thumbSpacing: 10,
thumbIdleOpacity: 0.2,
textShowCarousel: 'Pictures',
showCarouselLabel: true,
thumbCloseCarousel: true,
useThumbGenerator: false,
thumbGenerator: 'resizer.php',
useExternalCarousel: false,
carouselElement: false,
carouselHorizontal: true,
activateCarouselScroller: true,
carouselPreloader: true,
textPreloadingCarousel: 'Loading...',
/* CSS Classes */
baseClass: 'jdGallery',
withArrowsClass: 'withArrows',
/* Plugins: HistoryManager */
useHistoryManager: false,
customHistoryKey: false
}, options);
this.fireEvent('onInit');
this.currentIter = 0;
this.lastIter = 0;
this.maxIter = 0;
this.galleryElement = element;
this.galleryData = this.options.manualData;
this.galleryInit = 1;
this.galleryElements = Array();
this.thumbnailElements = Array();
this.galleryElement.addClass(this.options.baseClass);


this.populateFrom = element;
if (this.options.populateFrom)
this.populateFrom = this.options.populateFrom;
if (this.options.populateData)
this.populateData();
element.style.display="block";


if (this.options.useHistoryManager)
this.initHistory();


if (this.options.embedLinks)
{
this.currentLink = new Element('a').addClass('open').setProperties({
href: '#',
title: ''
}).injectInside(element);
if ((!this.options.showArrows) && (!this.options.showCarousel))
this.galleryElement = element = this.currentLink;
else
this.currentLink.setStyle('display', 'none');
}


this.constructElements();
if ((this.galleryData.length>1)&&(this.options.showArrows))
{
var leftArrow = new Element('a').addClass('left').addEvent(
'click',
this.prevItem.bind(this)
).injectInside(element);
var rightArrow = new Element('a').addClass('right').addEvent(
'click',
this.nextItem.bind(this)
).injectInside(element);
this.galleryElement.addClass(this.options.withArrowsClass);
}
this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element);
if (this.options.showInfopane) this.initInfoSlideshow();
if (this.options.showCarousel) this.initCarousel();
this.doSlideShow(1);
},
populateData: function() {
currentArrayPlace = this.galleryData.length;
options = this.options;
var data = $A(this.galleryData);
data.extend(this.populateGallery(this.populateFrom, currentArrayPlace));
this.galleryData = data;
this.fireEvent('onPopulated');
},
populateGallery: function(element, startNumber) {
var data = [];
options = this.options;
currentArrayPlace = startNumber;
element.getElements(options.elementSelector).each(function(el) {
elementDict = {
image: el.getElement(options.imageSelector).getProperty('src'),
number: currentArrayPlace,
transition: this.options.defaultTransition
};
elementDict.extend = $extend;
if ((options.showInfopane) | (options.showCarousel))
elementDict.extend({
title: el.getElement(options.titleSelector).innerHTML,
description: el.getElement(options.subtitleSelector).innerHTML
});
if (options.embedLinks)
elementDict.extend({
link: el.getElement(options.linkSelector).href||false,
linkTitle: el.getElement(options.linkSelector).title||false,
linkTarget: el.getElement(options.linkSelector).getProperty('target')||false
});
if ((!options.useThumbGenerator) && (options.showCarousel))
elementDict.extend({
thumbnail: el.getElement(options.thumbnailSelector).getProperty('src')
});
else if (options.useThumbGenerator)
elementDict.extend({
thumbnail: options.thumbGenerator + '?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight
});


data.extend([elementDict]);
currentArrayPlace++;
if (this.options.destroyAfterPopulate)
el.remove();
});
return data;
},
constructElements: function() {
el = this.galleryElement;
this.maxIter = this.galleryData.length;
var currentImg;
for(i=0;i<this.galleryData.length;i++)
{
var currentImg = new Fx.Styles(
new Element('div').addClass('slideElement').setStyles({
'position':'absolute',
'left':'0px',
'right':'0px',
'margin':'0px',
'padding':'0px',
'backgroundPosition':"center center",
'opacity':'0'
}).injectInside(el),
'opacity',
{duration: this.options.fadeDuration}
);
if (this.options.preloader)
{
currentImg.source = this.galleryData.image;
currentImg.loaded = false;
currentImg.load = function(imageStyle) {
if (!imageStyle.loaded) {
new Asset.image(imageStyle.source, {
'onload'  : function(img){
img.element.setStyle(
'backgroundImage',
"url('" + img.source + "')")
img.loaded = true;
}.bind(this, imageStyle)
});
}
}.pass(currentImg, this);
} else {
currentImg.element.setStyle('backgroundImage',
"url('" + this.galleryData.image + "')");
}
this.galleryElements[parseInt(i)] = currentImg;
}
},
destroySlideShow: function(element) {
var myClassName = element.className;
var newElement = new Element('div').addClass('myClassName');
element.parentNode.replaceChild(newElement, element);
},
startSlideShow: function() {
this.fireEvent('onStart');
this.loadingElement.style.display = "none";
this.lastIter = this.maxIter - 1;
this.currentIter = 0;
this.galleryInit = 0;
this.galleryElements[parseInt(this.currentIter)].set({opacity: 1});
if (this.options.showInfopane)
this.showInfoSlideShow.delay(1000, this);
var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
if (this.options.showCarousel&&(!this.options.carouselPreloader))
this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel);
this.prepareTimer();
if (this.options.embedLinks)
this.makeLink(this.currentIter);
},
nextItem: function() {
this.fireEvent('onNextCalled');
this.nextIter = this.currentIter+1;
if (this.nextIter >= this.maxIter)
this.nextIter = 0;
this.galleryInit = 0;
this.goTo(this.nextIter);
},
prevItem: function() {
this.fireEvent('onPreviousCalled');
this.nextIter = this.currentIter-1;
if (this.nextIter <= -1)
this.nextIter = this.maxIter - 1;
this.galleryInit = 0;
this.goTo(this.nextIter);
},
goTo: function(num) {
this.clearTimer();
if(this.options.preloader)
{
this.galleryElements[num].load();
if (num==0)
this.galleryElements[this.maxIter - 1].load();
else
this.galleryElements[num - 1].load();
if (num==(this.maxIter - 1))
this.galleryElements[0].load();
else
this.galleryElements[num + 1].load();


}
if (this.options.embedLinks)
this.clearLink();
if (this.options.showInfopane)
{
this.slideInfoZone.clearChain();
this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));
} else
this.currentChangeDelay = this.changeItem.delay(500, this, num);
if (this.options.embedLinks)
this.makeLink(num);
this.prepareTimer();
/*if (this.options.showCarousel)
this.clearThumbnailsHighlights();*/
},
changeItem: function(num) {
this.fireEvent('onStartChanging');
this.galleryInit = 0;
if (this.currentIter != num)
{
for(i=0;i<this.maxIter;i++)
{
if ((i != this.currentIter)) this.galleryElements.set({opacity: 0});
}
gallery.Transitions[this.galleryData[num].transition].pass([
this.galleryElements[this.currentIter],
this.galleryElements[num],
this.currentIter,
num], this)();
this.currentIter = num;
}
var textShowCarousel = formatString(this.options.textShowCarousel, num+1, this.maxIter);
if (this.options.showCarousel)
this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel);
this.doSlideShow.bind(this)();
this.fireEvent('onChanged');
},
clearTimer: function() {
if (this.options.timed)
$clear(this.timer);
},
prepareTimer: function() {
if (this.options.timed)
this.timer = this.nextItem.delay(this.options.delay, this);
},
doSlideShow: function(position) {
if (this.galleryInit == 1)
{
imgPreloader = new Image();
imgPreloader.onload=function(){
this.startSlideShow.delay(10, this);
}.bind(this);
imgPreloader.src = this.galleryData[0].image;
if(this.options.preloader)
this.galleryElements[0].load();
} else {
if (this.options.showInfopane)
{
if (this.options.showInfopane)
{
this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);
} else
if ((this.options.showCarousel)&&(this.options.activateCarouselScroller))
this.centerCarouselOn(position);
}
}
},
createCarousel: function() {
var carouselElement;
if (!this.options.useExternalCarousel)
{
var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement);
this.carouselContainer = new Fx.Styles(carouselContainerElement, {transition: Fx.Transitions.expoOut});
this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;
this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)});
this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({
title: this.options.textShowCarousel
}).injectInside(carouselContainerElement);
if(this.options.carouselPreloader)
this.carouselBtn.setHTML(this.options.textPreloadingCarousel);
else
this.carouselBtn.setHTML(this.options.textShowCarousel);
this.carouselBtn.addEvent(
'click',
function () {
this.carouselContainer.clearTimer();
this.toggleCarousel();
}.bind(this)
);
this.carouselActive = false;


carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement);
this.carousel = new Fx.Styles(carouselElement);
} else {
carouselElement = $(this.options.carouselElement).addClass('jdExtCarousel');
}
this.carouselElement = new Fx.Styles(carouselElement, {transition: Fx.Transitions.expoOut});
this.carouselElement.normalHeight = carouselElement.offsetHeight;
if (this.options.showCarouselLabel)
this.carouselLabel = new Element('p').addClass('label').injectInside(carouselElement);
carouselWrapper = new Element('div').addClass('carouselWrapper').injectInside(carouselElement);
this.carouselWrapper = new Fx.Styles(carouselWrapper, {transition: Fx.Transitions.expoOut});
this.carouselWrapper.normalHeight = carouselWrapper.offsetHeight;
this.carouselInner = new Element('div').addClass('carouselInner').injectInside(carouselWrapper);
if (this.options.activateCarouselScroller)
{
this.carouselWrapper.scroller = new Scroller(carouselWrapper, {
area: 100,
velocity: 0.2
})


this.carouselWrapper.elementScroller = new Fx.Scroll(carouselWrapper, {
duration: 400,
onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller),
onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller)
});
}
},
fillCarousel: function() {
this.constructThumbnails();
this.carouselInner.normalWidth = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing + 2))+this.options.thumbSpacing) + "px";
this.carouselInner.style.width = this.carouselInner.normalWidth;
},
initCarousel: function () {
this.createCarousel();
this.fillCarousel();
if (this.options.carouselPreloader)
this.preloadThumbnails();
},
flushCarousel: function() {
this.thumbnailElements.each(function(myFx) {
myFx.element.remove();
myFx = myFx.element = null;
});
this.thumbnailElements = [];
},
toggleCarousel: function() {
if (this.carouselActive)
this.hideCarousel();
else
this.showCarousel();
},
showCarousel: function () {
this.fireEvent('onShowCarousel');
this.carouselContainer.start({
'opacity': this.options.carouselMaximizedOpacity,
'top': 0
}).chain(function() {
this.carouselActive = true;
this.carouselWrapper.scroller.start();
this.fireEvent('onCarouselShown');
this.carouselContainer.options.onComplete = null;
}.bind(this));
},
hideCarousel: function () {
this.fireEvent('onHideCarousel');
var targetTop = this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight;
this.carouselContainer.start({
'opacity': this.options.carouselMinimizedOpacity,
'top': targetTop
}).chain(function() {
this.carouselActive = false;
this.carouselWrapper.scroller.stop();
this.fireEvent('onCarouselHidden');
this.carouselContainer.options.onComplete = null;
}.bind(this));
},
constructThumbnails: function () {
element = this.carouselInner;
for(i=0;i<this.galleryData.length;i++)
{
var currentImg = new Fx.Style(new Element ('div').addClass("thumbnail").setStyles({
backgroundImage: "url('" + this.galleryData.thumbnail + "')",
backgroundPosition: "center center",
backgroundRepeat: 'no-repeat',
marginLeft: this.options.thumbSpacing + "px",
width: this.options.thumbWidth + "px",
height: this.options.thumbHeight + "px"
}).injectInside(element), "opacity", {duration: 200}).set(this.options.thumbIdleOpacity);
currentImg.element.addEvents({
'mouseover': function (myself) {
myself.clearTimer();
myself.start(0.99);
if (this.options.showCarouselLabel)
$(this.carouselLabel).setHTML('<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + myself.relatedImage.title);
}.pass(currentImg, this),
'mouseout': function (myself) {
myself.clearTimer();
myself.start(this.options.thumbIdleOpacity);
}.pass(currentImg, this),
'click': function (myself) {
this.goTo(myself.relatedImage.number);
if (this.options.thumbCloseCarousel)
this.hideCarousel();
}.pass(currentImg, this)
});


currentImg.relatedImage = this.galleryData;
this.thumbnailElements[parseInt(i)] = currentImg;
}
},
log: function(value) {
if(console.log)
console.log(value);
},
preloadThumbnails: function() {
var thumbnails = [];
for(i=0;i<this.galleryData.length;i++)
{
thumbnails[parseInt(i)] = this.galleryData.thumbnail;
}
this.thumbnailPreloader = new Preloader();
this.thumbnailPreloader.addEvent('onComplete', function() {
var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel);
}.bind(this));
this.thumbnailPreloader.load(thumbnails);
},
clearThumbnailsHighlights: function()
{
for(i=0;i<this.galleryData.length;i++)
{
this.thumbnailElements.clearTimer();
this.thumbnailElements.start(0.2);
}
},
changeThumbnailsSize: function(width, height)
{
for(i=0;i<this.galleryData.length;i++)
{
this.thumbnailElements.clearTimer();
this.thumbnailElements.element.setStyles({
'width': width + "px",
'height': height + "px"
});
}
},
centerCarouselOn: function(num) {
if (!this.carouselWallMode)
{
var carouselElement = this.thumbnailElements[num];
var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2);
var carouselWidth = this.carouselWrapper.element.offsetWidth;
var carouselInnerWidth = this.carouselInner.offsetWidth;
var diffWidth = carouselWidth / 2;
var scrollPos = position-diffWidth;
this.carouselWrapper.elementScroller.scrollTo(scrollPos,0);
}
},
initInfoSlideshow: function() {
/*if (this.slideInfoZone.element)
this.slideInfoZone.element.remove();*/
this.slideInfoZone = new Fx.Styles(new Element('div').addClass('slideInfoZone').injectInside($(this.galleryElement))).set({'opacity':0});
var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element);
var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element);
this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight;
this.slideInfoZone.element.setStyle('opacity',0);
},
changeInfoSlideShow: function()
{
this.hideInfoSlideShow.delay(10, this);
this.showInfoSlideShow.delay(500, this);
},
showInfoSlideShow: function() {
this.fireEvent('onShowInfopane');
this.slideInfoZone.clearTimer();
element = this.slideInfoZone.element;
element.getElement('h2').setHTML(this.galleryData[this.currentIter].title);
element.getElement('p').setHTML(this.galleryData[this.currentIter].description);
if(this.options.slideInfoZoneSlide)
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]});
else
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity]});
if (this.options.showCarousel)
this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
return this.slideInfoZone;
},
hideInfoSlideShow: function() {
this.fireEvent('onHideInfopane');
this.slideInfoZone.clearTimer();
if(this.options.slideInfoZoneSlide)
this.slideInfoZone.start({'opacity': 0, 'height': 0});
else
this.slideInfoZone.start({'opacity': 0});
return this.slideInfoZone;
},
makeLink: function(num) {
this.currentLink.setProperties({
href: this.galleryData[num].link,
title: this.galleryData[num].linkTitle
})
if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
this.currentLink.setStyle('display', 'block');
},
clearLink: function() {
this.currentLink.setProperties({href: '', title: ''});
if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
this.currentLink.setStyle('display', 'none');
},
/* To change the gallery data, those two functions : */
flushGallery: function() {
this.galleryElements.each(function(myFx) {
myFx.element.remove();
myFx = myFx.element = null;
});
this.galleryElements = [];
},
changeData: function(data) {
this.galleryData = data;
this.clearTimer();
this.flushGallery();
if (this.options.showCarousel) this.flushCarousel();
this.constructElements();
if (this.options.showCarousel) this.fillCarousel();
if (this.options.showInfopane) this.hideInfoSlideShow();
this.galleryInit=1;
this.lastIter=0;
this.currentIter=0;
this.doSlideShow(1);
},
/* Plugins: HistoryManager */
initHistory: function() {
this.fireEvent('onHistoryInit');
this.historyKey = this.galleryElement.id + '-picture';
if (this.options.customHistoryKey)
this.historyKey = this.options.customHistoryKey();
this.history = HistoryManager.register(
this.historyKey,
[1],
function(values) {
if (parseInt(values[0])-1 < this.maxIter)
this.goTo(parseInt(values[0])-1);
}.bind(this),
function(values) {
return [this.historyKey, '(', values[0], ')'].join('');
}.bind(this),
this.historyKey + '\\((\\d+)\\)');
this.addEvent('onChanged', function(){
this.history.setValue(0, this.currentIter+1);
}.bind(this));
this.fireEvent('onHistoryInited');
}
};
gallery = new Class(gallery);
gallery.implement(new Events);
gallery.implement(new Options);


gallery.Transitions = new Abstract ({
fade: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
if (newPos > oldPos) newFx.start({opacity: 1});
else
{
newFx.set({opacity: 1});
oldFx.start({opacity: 0});
}
},
crossfade: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
newFx.start({opacity: 1});
oldFx.start({opacity: 0});
},
fadebg: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2;
oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx));
}
});


/* All code copyright 2007 Jonathan Schemoul */


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: Preloader (class)
* Simple class for preloading images with support for progress reporting
* Copyright 2007 Tomocchino.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


var Preloader = new Class({


Implements: [Events, Options],


options: {
root        : '',
period      : 100
},


initialize: function(options){
this.setOptions(options);
},


load: function(sources) {
this.index = 0;
this.images = [];
this.sources = this.temps = sources;
this.total = this. sources.length;


this.fireEvent('onStart', [this.index, this.total]);
this.timer = this.progress.periodical(this.options.period, this);


this.sources.each(function(source, index){
this.images[index] = new Asset.image(this.options.root + source, {
'onload'  : function(){ this.index++; if(this.images[index]) this.fireEvent('onLoad', [this.images[index], index, source]); }.bind(this),
'onerror' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this),
'onabort' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this)
});
}, this);
},


progress: function() {
this.fireEvent('onProgress', [Math.min(this.index, this.total), this.total]);
if(this.index >= this.total) this.complete();
},


complete: function(){
$clear(this.timer);
this.fireEvent('onComplete', [this.images]);
},


cancel: function(){
$clear(this.timer);
}


});


Preloader.implement(new Events, new Options);


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: formatString (function)
* Original name: Yahoo.Tools.printf
* Copyright Yahoo.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


function formatString() {
var num = arguments.length;
var oStr = arguments[0];
for (var i = 1; i < num; i++) {
var pattern = "\\{" + (i-1) + "\\}";
var re = new RegExp(pattern, "g");
oStr = oStr.replace(re, arguments);
}
return oStr;
}

---------------------------------------------------------------------------------

jd.gallery.transitions.js

gallery.Transitions.extend({
fadeslideleft: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.Cubic.easeOut;
oldFx.options.duration = newFx.options.duration = 1500;
if (newPos > oldPos)
{
newFx.start({
left: [this.galleryElement.offsetWidth, 0],
opacity: 1
});
oldFx.start({opacity: [1,0]});
} else {
newFx.start({opacity: [0,1]});
oldFx.start({
left: [0, this.galleryElement.offsetWidth],
opacity: 0
}).chain(function(fx){fx.set({left: 0});}.pass(oldFx));
}
},
continuoushorizontal: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
if (
((newPos > oldPos) || ((newPos==0) && (oldPos == (this.maxIter-1) ))) &&
(!((newPos == (this.maxIter-1 )) && (oldPos == 0)))
) {
oldFx.set({opacity: 1});
oldFx.start({
left: [0, this.galleryElement.offsetWidth * -1]
});
newFx.set({opacity: 1, left: this.galleryElement.offsetWidth});
newFx.start({
left: [this.galleryElement.offsetWidth, 0]
});
} else  {
oldFx.set({opacity: 1});
oldFx.start({
left: [0, this.galleryElement.offsetWidth]
});
newFx.set({opacity: 1, left: this.galleryElement.offsetWidth * -1});
newFx.start({
left: [this.galleryElement.offsetWidth * -1, 0]
});
}
},
continuousvertical: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
if (
((newPos > oldPos) || ((newPos==0) && (oldPos == (this.maxIter-1) ))) &&
(!((newPos == (this.maxIter-1 )) && (oldPos == 0)))
) {
oldFx.set({opacity: 1});
oldFx.start({
top: [0, this.galleryElement.offsetHeight * -1]
});
newFx.set({opacity: 1, top: this.galleryElement.offsetHeight});
newFx.start({
top: [this.galleryElement.offsetHeight, 0]
});
} else  {
oldFx.set({opacity: 1});
oldFx.start({
top: [0, this.galleryElement.offsetHeight]
});
newFx.set({opacity: 1, top: this.galleryElement.offsetHeight * -1});
newFx.start({
top: [this.galleryElement.offsetHeight * -1, 0]
});
}
}
});

---------------------------------------------------------------------------------------

mootools.v1.11.js

do you get any error? if yes what is that or try to use Firefox Firebug to find what error and where is it?