why is this script breaking
Hello: I'm using a slideshow on my site called BarackSlideshow 3.0, a jquery application. I'm using the free demo version.
What i am trying to do is attach a link to an image when it briefly comes across the screen that directs to the appropriate url. but every time i try to link more than two URL's to the images in the presentation the script breaks. I do not know how to demonstrate the code that is giving me the blues but here is the address where the script is located: [url]
http://www.devthought.com/2008/06/11/barackslideshow-an-elegant-lightweight-slideshow-script/[/url]
I have successfully managed to change other aspects of the script but this has me stumped.
The following is what I tried to modify to link the URL's to the images but it breaks.
The HTML:
[CODE]<script type="text/javascript" charset="utf-8" src="mootools-1.2.1-core-yc.js"></script>
<script type="text/javascript" charset="utf-8" src="mootools-1.2.2.2-more.js"></script>
<script type="text/javascript" charset="utf-8" src="Fx.MorphList.js"></script>
<script type="text/javascript" charset="utf-8" src="BarackSlideshow/Source/BarackSlideshow.js"></script>
<script type="text/javascript" charset="utf-8" src="demo.js"></script>
</head>
<body id="demo">
<h1>GoGreen Computer Services Partners</h1>
<p>It takes so much to bring about the results we hope to achieve: sustaining our environment</p>
<p> by extending the life of our computers just that much longer.</p>
<div id="slideshow">
<span id="loading">Loading</span>
<ul id="pictures">
<li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicessas.jpg" alt="gogreencomputerservicessas" title="gogreencomputerservicessas" /></li>
<li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicesbnm.jpg" alt="gogreencomputerservicesbnm" title="gogreencomputerservicesbnm" /></li>
<li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicessbhorizonsnorthpointe.jpg" alt="gogreencomputerservicessbhorizonsnorthpointe" title="gogreencomputerservicessbhorizonsnorthpointe" /></li>
<li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicesfinestofsantabarbara.jpg" alt="gogreencomputerservicesfinestofsantabarbara.jpg" title="gogreencomputerservicesfinestofsantabarbara.jpg" /></li>
<li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicesprosurferdude.jpg" alt="gogreencomputerservicesprosurferdude" title="gogreencomputerservicesprosurferdude" /></a></li>
<li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicessm3.jpg" alt="gogreencomputerservicessm3" title="gogreencomputerservicessm3" /></li>
<li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicesgogreencomputerservices.jpg" alt="gogreencomputerservicesgogreencomputerservices" title="gogreencomputerservicesgogreencomputerservices" /></li>
</ul>
<ul id="menu" name="menu">
<li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicessas.jpg">Sewing Another Seed</a></li>
<li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicesbnm.jpg">BabiesNMovies</a></li>
<li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicessbhorizonsnorthpointe.jpg">SBHorizons/NorthPointe</a></li>
<li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicesfinestofsantabarbara.jpg">Finest of Santa Barbara</a></li>
<li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicesprosurferdude.jpg">ProSurferDude</a></li>
<li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicessm3.jpg">Solution:M3</a></li>
<li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicesgogreencomputerservices.jpg">GoGreen Computer Services</a></li>
</ul>
</div>[/CODE]
The JS:
[CODE]var BarackSlideshow = new Class({
Extends: Fx.MorphList,
options: {/*
onShow: $empty,*/
auto: false,
autostart: false,
autointerval: 2000,
transition: 'fade',
tween: { duration: 700 }
},
initialize: function(menu, images, loader, options){
this.parent(menu, options);
this.images = $(images);
this.imagesitems = this.images.getChildren().fade('hide');
$(loader).fade('in');
new Asset.images(this.images.getElements('img').map(function(el) { return el.setStyle('display', 'none').get('src'); }), { onComplete: function() {
this.loaded = true;
$(loader).fade('out');
if (this.current) this.show(this.items.indexOf(this.current));
else if (this.options.auto && this.options.autostart) this.progress();
}.bind(this) });
if ($type(this.options.transition) != 'function') this.options.transition = $lambda(this.options.transition);
},
auto: function(){
if (!this.options.auto) return false;
$clear(this.autotimer);
this.autotimer = this.progress.delay(this.options.autointerval, this);
},
onClick: function(event, item){
this.parent(event, item);
event.stop();
this.show(this.items.indexOf(item));
$clear(this.autotimer);
},
show: function(index) {
if (!this.loaded) return;
var image = this.imagesitems[index];
if (image == this.curimage) return;
image.set('tween', this.options.tween).dispose().inject(this.curimage || this.images.getFirst(), this.curimage ? 'after' : 'before').fade('hide');
image.getElement('img').setStyle('display', 'block');
var trans = this.options.transition.run(null, this).split('-');
switch(trans[0]){
case 'slide':
var dir = $pick(trans[1], 'left');
var prop = (dir == 'left' || dir == 'right') ? 'left' : 'top';
image.fade('show').setStyle(prop, image['offset' + (prop == 'left' ? 'Width' : 'Height')] * ((dir == 'bottom' || dir == 'right') ? 1 : -1)).tween(prop, 0);
break;
case 'fade': image.fade('in'); break;
}
image.get('tween').chain(function(){
this.auto();
this.fireEvent('show', image);
}.bind(this));
this.curimage = image;
this.setCurrent(this.items[index])
this.morphTo(this.items[index]);
return this;
},
progress: function(){
var curindex = this.imagesitems.indexOf(this.curimage);
this.show((this.curimage && (curindex + 1 < this.imagesitems.length)) ? curindex + 1 : 0);
}
});[/CODE]
can anyone help?
Topic Participants
carlgordonjr
jakecigar