Mootools effect Slider Sample Six adapted but getting NULL Item

JavaScript
1

Hi,

I have adapted the Sample 6 from
noobSlide - mootools
for the following page:
http://development.accommodationbigwhite.com/view/view-the-chalet.html

Password is
Username: amchaudhry
Password: B1gWh1t3

When I select the thumbnail I get the following error on firebug
console
currentItem is null
[Break On This Error] new
Element(‘h4’).set(‘html’,currentItem.title).inject(infoVslide);
view-t…et.html (line 42)
currentItem is null
[Break On This Error] new
Element(‘h4’).set(‘html’,currentItem.title).inject(infoVslide);

When the page loads the info section is populated correctly, but it
seems to not be reading the array correctly.

What is the issue with my code, can someone please help?

It does work in Safari and Opera but not Chrome, Opera, and IE.

Have posted on JSFiddle.

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

Have set the images to direct URL.

Setup the correct mootools slider library.

Password is
Username: amchaudhry
Password: B1gWh1t3

It does work on JS Fiddle.

I have been told it could be something to do with the scope.

Can some take a look and let me know how to fix the issue, please.

Here is the 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”><!-- InstanceBegin
template=“/Templates/main-layout.dwt” codeOutsideHTMLIsLocked=“false”
–>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<!-- InstanceBeginEditable name=“doctitle” –>
<title>Pictures of the Chalet - Big White Chalet Canada</title>
<!-- InstanceEndEditable –>
<!-- InstanceBeginEditable name=“head” –>
<script type=“text/javascript” src=“…/scripts/mootools-1.2-
core.js”></script>
<script type=“text/javascript” src=“…/scripts/
_class.noobSlide.packed.js”></script>
<script type=“text/javascript”>
window.addEvent(‘domready’,function(){
//SAMPLE 6 (on “mouseenter” walk)
var infoVslide = $(‘boxVslide’).getNext().set(‘opacity’,0.5);
var sampleObjectItems =[
{title:‘Morbi elementum’, room:‘Lorem’, floor:‘3’},
{title:‘Mollis leo’, room:‘Ipsum’, floor:‘6’},
{title:‘Nunc adipiscing’, room:‘Dolor’, floor:‘9’},
{title:‘Phasellus volutpat pharetra’, room:‘Sit’, floor:‘2’},
{title:‘Sed sollicitudin diam’, room:‘Amet’, floor:‘3’},
{title:‘Ut quis magna vel’, room:‘Consecteur’, floor:‘5’},
{title:‘Curabitur et ante in’, room:‘Adipsim’, floor:‘1’},
{title:‘Aliquam commodo’, room:‘Colom’, floor:‘1’}
];
var nS6 = new noobSlide({
mode: ‘vertical’,
box: $(‘boxVslide’),
items: sampleObjectItems,
size: 371,
handles: $$(‘#handlesVslide div’),
handle_event: ‘mouseenter’,
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Back.easeOut,
wait: false
},
onWalk: function(currentItem,currentHandle){
infoVslide.empty();
new
Element(‘h4’).set(‘html’,currentItem.title).inject(infoVslide);
new Element(‘p’).set(‘html’,'<b>room</b>: ‘+currentItem.room+’
    <b>floor</b>: '+currentItem.floor).inject(infoVslide);
this.handles.set(‘opacity’,0.3);
currentHandle.set(‘opacity’,1);
}
});
//walk to next item
nS6.next();
});
</script>
<!-- InstanceEndEditable –>
<link href=“…/css/reset.css” rel=“stylesheet” type=“text/css” />
<link href=“…/css/screen.css” rel=“stylesheet” type=“text/css” />
<style type=“text/css”>
<!–
–>
</style>
</head>
<body>
<div id=“container”>
<div id=“header”>
<strong id=“logo”><a href=“…/index.html”>BIG WHITE CHALET</a></
strong>
<ul class=“menu”><!-- #BeginLibraryItem “/Library/menu.lbi” –
><li><a href=“view-the-chalet.html” title="View pictures recently

taken of the Chalet" target=“_parent”>View</a></li>
<li><a href=“…/accommodation/chalet-accommodation-details.html”
title=“Accommodation details of the Chalet”
target=“_parent”>Accommodation</a></li>
<li><a href=“…/location/location-of-chalet.html” title=“Map and
location of the chalet” target=“_parent”>Location</a></li>
<li><a href=“…/availability/availability-of-chalet.html”
title=“Availability of chalet” target=“_parent”>Availability</a></
li><!-- #EndLibraryItem –></ul>
<!-- end #header –></div>
<div id=“mainContent”>
<div class=“description”><!-- InstanceBeginEditable
name=“EditRegion3” –>
<h1> View the Chalet</h1>
<hr />
<p><b>Bedrooms: 5,
Sleeps: 15,
Bathrooms: 3</b></p>
<div class=“vSlide”>
<div class=“thumbs” id=“handlesVslide”>
<div><img src=“…/images/dev/img1.jpg” alt=“Photo Thumb” /></div>
<div><img src=“…/images/dev/img2.jpg” alt=“Photo Thumb” /></div>
<div><img src=“…/images/dev/img3.jpg” alt=“Photo Thumb” /></div>
<div><img src=“…/images/dev/img4.jpg” alt=“Photo Thumb” /></div>
<div><img src=“…/images/dev/img5.jpg” alt=“Photo Thumb” /></
div>
<div><img src=“…/images/dev/img6.jpg” alt=“Photo Thumb” /></div>
<div><img src=“…/images/dev/img7.jpg” alt=“Photo Thumb” /></div>
</div>
</div>
<div class=“thumbsTitle”>
<div> <p>IMAGE ONE</p> </div>
<div> <p>IMAGE TWO</p></div>
<div> <p>IMAGE THREE</p> </div>
<div> <p>IMAGE FOUR</p></div>
<div> <p>IMAGE FIVE</p> </div>
<div> <p>IMAGE SIX</p></div>
<div> <p>IMAGE SEVEN</p> </div>
</div>
<!-- InstanceEndEditable –></div>
<div class=“details”><!-- InstanceBeginEditable
name=“EditRegion4” –>
<div class=“maskVslide”>
<div id=“boxVslide”>
<span><img src=“…/images/dev/img1.jpg” alt=“Photo” /></span>
<span><img src=“…/images/dev/img2.jpg” alt=“Photo” /></span>
<span><img src=“…/images/dev/img3.jpg” alt=“Photo” /></span>
<span><img src=“…/images/dev/img4.jpg” alt=“Photo” /></span>
<span><img src=“…/images/dev/img5.jpg” alt=“Photo” /></span>
<span><img src=“…/images/dev/img6.jpg” alt=“Photo” /></span>
<span><img src=“…/images/dev/img7.jpg” alt=“Photo” /></span>
</div>
<div class=“info”></div>
</div>
<!-- InstanceEndEditable –>
</div>
<!-- end #mainContent –></div>
<div id=“footer”><!-- #BeginLibraryItem “/Library/footer.lbi” –><a
href=…/index.html title=“HOME PAGE”>CHALET</a>
<span class=“separator”>|</span>
<a href=…/legal/privacy-notice.html title=“PRIVACY STATEMENT”
>PRIVACY</a>

            &lt;span class="separator"&gt;|&lt;/span&gt;

<a href=…/legal/terms-conditions.html title=“TERMS & CONDITIONS
STATEMENT”>TERMS</a>
<span class=“separator”>|</span>
<a href=…/legal/copyright-notice.html title=“COPYRIGHT NOTICE
STATEMENT”>COPYRIGHT NOTICE</a>
<span class=“separator”>|</span>
<a href=…/contact-us.html title=“CONTACT DETAILS”>CONTACT US</a><!–
#EndLibraryItem –><div id=“copyright”><!-- #BeginLibraryItem “/
Library/copyright.lbi” –>© 2010 - 2011 All rights reserved Big
White Chalet.<!-- #EndLibraryItem –><!-- end #copyright –></div>
<!-- end #footer –></div>
<div class=“bottom”><!-- #BeginLibraryItem “/Library/address.lbi” –
>Big White Chalet<br />

4846 Snow Pines Road, Big White, BC, V1P 1P3, Canada<br />
Email: i...@accommodationbigwhite.com<br /><!-- #EndLibraryItem –
><!-- end #bottom –></div>

<!-- end #container –></div>
</body>
<!-- InstanceEnd –></html>

Regards,
Simon