guyriso
asked on
Javascript image fader with links and random
I am trying to setup a random image fader that has links. I had the code for random image fader and was trying to add links. I have the links and everything rendering properly, but when I try to click on one of the images, the link where I am ending up does not match the image I clicked.
Here is the full code.
Here is the full code.
<html>
<head>
<style>
.showhand
{
cursor:pointer;
}
</style>
<script type="text/javascript">
var nindex = 0;
function tFader(a_items, a_lnks, a_tpl) {
// validate parameters and set defaults
if (!a_items) return alert("items structure is missing");
if (typeof (a_items) != 'object') return alert("format of the items structure is incorrect");
if (a_items[a_items.length - 1] == null) return alert("last element of the items structure is undefined");
if (!a_lnks) return alert("links structure is missing");
if (typeof (a_lnks) != 'object') return alert("format of the items structure is incorrect");
if (a_lnks[a_lnks.length - 1] == null) return alert("last element of the links structure is undefined");
if (!a_tpl) a_tpl = [];
for (var i = 0; i < A_TSLIDEDEFS.length; i += 2)
if (a_tpl[A_TSLIDEDEFS[i]] == null)
a_tpl[A_TSLIDEDEFS[i]] = A_TSLIDEDEFS[i + 1];
// save config parameters in the slider object
this.a_tpl = a_tpl;
this.a_lnks = a_lnks;
this.a_items = a_tpl.random ? tslide_randomize(a_items, a_lnks) : a_items;
var items = [];
var a_linkstest = [];
var string1 = "";
for (i = 0; i < this.a_items.length; i++) {
items[i] = this.a_items[i].split("|")[0];
a_linkstest[i] = this.a_items[i].split("|")[1];
}
this.a_lnks = a_linkstest;
this.a_items = items;
// initialize parameters, assign methods
this.n_currentSlide = 0;
this.f_goto = tslide_goto;
this.f_run = function () { this.b_running = 1; this.f_goto(); };
this.f_stop = function () { this.b_running = 0; clearTimeout(this.o_timerS); };
this.f_fadeIn = tslide_fadeIn;
this.f_fadeOut = tslide_fadeOut;
this.f_slideOp = tslide_slideOp;
// register in the global collection
if (!window.A_SLIDES)
window.A_SLIDES = [];
this.n_id = window.A_SLIDES.length;
window.A_SLIDES[this.n_id] = this;
// generate control's HTML
var s_attributes = ' '
+ (a_tpl['css'] ? ' class="' + a_tpl['css'] + '"' : '')
+ (a_tpl['width'] ? ' width="' + a_tpl['width'] + '"' : '')
+ (a_tpl['height'] ? ' height="' + a_tpl['height'] + '"' : '')
+ (a_tpl['alt'] ? ' title="' + a_tpl['alt'] + '" alt="' + a_tpl['alt'] + '"' : '');
this.a_imgRefs = [];
if (this.a_lnks[0].length != 0) {
document.write('<img class="rotatorclass" src="' + this.a_items[0] + '"' + s_attributes + ' onclick="window.location.href =\'' + this.a_lnks[0] + '\';"' + ' id="tslide' + this.n_id + '_0" />');
}
else {
document.write('<img class="rotatorclass" src="' + this.a_items[0] + '"' + s_attributes + ' name="tslide' + this.n_id + '_0" />');
// document.write ('<img class="rotatorclass" src="', this.a_items[0] , '"', s_attributes, ' name="tslide', this.n_id, '_0" />');
}
this.a_imgRefs[0] = document.images['tslide' + this.n_id + '_0'];
this.n_currentSlide = 0;
// exit on old browsers
if (!this.a_imgRefs[0] || !this.a_imgRefs[0].style || this.a_imgRefs[0].style.marginLeft == null)
return;
for (var i = 1; i < this.a_items.length; i++) {
if (this.a_lnks.length > 1 && this.a_lnks[i].length != 0) {
document.write('<img class="rotatorclass showhand" src="' + this.a_items[i] + '"' + s_attributes + ' onclick="window.location.href =\'' + this.a_lnks[i] + '\';"' + ' id="tslide' + this.n_id + '_' + i + '" style="position:relative;z-index:-1;filter:alpha(opacity=100);" />');
// document.write('<img class="rotatorclass" src="', this.a_items[i] , '"', s_attributes, ' name="tslide', this.n_id, '_', i, '" style="position:relative;z-index:-1;filter:alpha(opacity=100);" />');
}
else {
document.write('<img class="rotatorclass" src="' + this.a_items[i] + '"' + s_attributes + ' id="tslide' + this.n_id + '_' + i + '" style="position:relative;z-index:-1;filter:alpha(opacity=100);" />');
}
this.a_imgRefs[i] = document.images['tslide' + this.n_id + '_' + i];
this.a_imgRefs[i].style.marginLeft = '-' + this.a_tpl.width + 'px';
this.f_slideOp(i, 0);
this.a_imgRefs[i].style.zIndex = i;
}
// calculate transition variables
this.n_timeDec = Math.round(this.a_tpl['transtime'] * 1e3 / this.a_tpl['steps']);
this.n_opacDec = Math.round(100 / this.a_tpl['steps']);
// run this sucker
this.f_run();
}
function tslide_goto(n_slide, b_now) {
// cancel any scheduled transitions
if (this.o_timerS) {
clearTimeout(this.o_timerS);
this.o_timerS = null;
if (this.n_nextSlide) {
this.f_slideOp(this.n_nextSlide, 0);
this.n_nextSlide = null;
}
}
// determine the next slide
this.n_nextSlide = (n_slide == null ? this.n_currentSlide + 1 : n_slide) % this.a_items.length;
if (this.n_nextSlide == this.n_currentSlide) return;
// schedule transition
this.o_timerS = setTimeout('A_SLIDES[' + this.n_id + '].f_fade' + (this.n_nextSlide > this.n_currentSlide ? 'In' : 'Out') + '()', (b_now ? 0 : this.a_tpl['slidetime'] * 1e3));
}
function tslide_fadeIn(n_opacity) {
// new transition
if (n_opacity == null) {
n_opacity = 0;
}
n_opacity += this.n_opacDec;
// end of transition
if (n_opacity > 99) {
this.f_slideOp(this.n_nextSlide, 99);
this.f_slideOp(this.n_currentSlide, 0);
this.n_currentSlide = this.n_nextSlide;
this.n_nextSlide = null;
return this.f_run();
}
// set transparency
this.f_slideOp(this.n_nextSlide, n_opacity);
// cycle
this.o_timerT = setTimeout('A_SLIDES[' + this.n_id + '].f_fadeIn(' + n_opacity + ')', this.n_timeDec);
}
function tslide_fadeOut(n_opacity) {
// new transition
if (n_opacity == null) {
n_opacity = 99;
this.f_slideOp(this.n_nextSlide, 99);
}
n_opacity -= this.n_opacDec;
// end of transition
if (n_opacity < 0) {
this.f_slideOp(this.n_currentSlide, 0);
this.n_currentSlide = this.n_nextSlide;
this.n_nextSlide = null;
return this.f_run();
}
// set transparency
this.f_slideOp(this.n_currentSlide, n_opacity);
// cycle
this.o_timerT = setTimeout('A_SLIDES[' + this.n_id + '].f_fadeOut(' + n_opacity + ')', this.n_timeDec);
}
function tslide_slideOp(n_slide, n_opacity) {
if (!n_slide) return;
var e_slide = this.a_imgRefs[n_slide];
tslide_setOpacity(e_slide, n_opacity);
}
function tslide_randomize(a_source, a_slnks) {
var a_items = [],
a_links = [];
while (a_source.length) {
n_index = Math.ceil(Math.random() * a_source.length) - 1;
a_items[a_items.length] = a_source[n_index] + "|" + a_slnks[n_index];
a_source[n_index] = a_source[a_source.length - 1];
a_slnks[n_index] = a_slnks[a_slnks.length - 1];
a_source.length = a_source.length - 1;
a_slnks.length = a_slnks.length - 1;
}
return a_items;
}
// cross-browser opacity
var s_uaApp = navigator.userAgent.toLowerCase();
if (s_uaApp.indexOf('opera') != -1 || s_uaApp.indexOf('safari') != -1)
window.tslide_setOpacity = function (e_element, n_opacity) {
e_element.style.opacity = n_opacity / 100;
};
else if (s_uaApp.indexOf('gecko') != -1)
window.tslide_setOpacity = function (e_element, n_opacity) {
e_element.style.MozOpacity = n_opacity / 100;
e_element.style.opacity = n_opacity / 100;
};
else if (s_uaApp.indexOf('msie') != -1)
window.tslide_setOpacity = function (e_element, n_opacity) {
try { e_element.filters.alpha.opacity = n_opacity; } catch (e) { };
};
else
window.tslide_setOpacity = null;
// defaults
var A_TSLIDEDEFS = [
'steps', 40,
'css', '',
'transtime', 0.5,
'slidetime', 2
];
</script>
</head>
<body>
<script type="text/javascript">
// configuration structure
var A_TPL111 = {
// randomize the array each time page loads
'random': true,
// number of transparency changes during the transition
// increase for smoother transition, reduce for less CPU usage
'steps': 20,
// transition duration in seconds
'transtime': 1.5,
// slide time in seconds
'slidetime': 5,
// width of the slide (optional)
'width': 140,
// height of the slide (optional)
'height': 168,
// alt text for the image (optional)
'alt': 'alternate',
// css class assigned to the slide <img /> (optional)
'css': ''
};
// list of images to display
var A_ITEMS111 = [
'http://histochemicalsociety.org/Images/HomePage-RotatingGraphic-Award.jpg',
'http://histochemicalsociety.org/Images/HomePage-RotatingGraphic-JHC.jpg',
'http://histochemicalsociety.org/Images/HomePage-RotatingGraphic-Directory.jpg',
'http://histochemicalsociety.org/Images/HomePage-RotatingGraphic-Meeting.jpg'
];
var A_LINKS = [
'http://google.com',
'http://msn.com',
'http://yahoo.com',
'http://bing.com'
];
// fader initialization
var mySlideShow111 = new tFader(A_ITEMS111, A_LINKS, A_TPL111);
</script>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@insoftservice, I was trying to stay away from using jquery for this!
@leakim971, Your solution is rendering something similar to what was being rendered with the code I provided. Everything renders the way you would expect it to, but when clicking on the images, the links are not corresponding to the image that is clicked.
@leakim971, Your solution is rendering something similar to what was being rendered with the code I provided. Everything renders the way you would expect it to, but when clicking on the images, the links are not corresponding to the image that is clicked.
Did you tried my test page?
ASKER
@leakim971 - yes. Sorry it has taken me so long to respond. I am not on the distribution list that receives these emails and my co worker forgot to forward them to me. I will continue to monitor this thread so we can get this resolved so you can receive credit for your time.
ASKER
I tried the test page but the links do not match with the images being clicked. Everything renders properly, but when you look at what image is being clicked, they are not matching with the associated links.
Thanks
Thanks
Check right page of the below link for reference.
http://www.boisoc.com/
Open in new window