Attaching a class name to the links in Ultimate Fade-in Slideshow (v1.51)

[jyeager]

1) Script Title:
Ultimate Fade-in slideshow (v1.51)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:
I'm trying to combine this script with another (Control Modal), which would involve simply attaching a class name on the links in Ultimate Fade-in slideshow.

How do I do that? How do I attach a class name on the links in this script?

Thanks.

[jscheuer1]

3) Describe problem:
I'm trying to combine this script with another (Control Modal), which would involve simply attaching a class name on the links in Ultimate Fade-in slideshow.

It's rarely as simple as that. Without looking at Control Modal, I would guess that it probably needs to initialize the links with its class name. Simply adding that class name to the links in U Fade will not initialize them because they are generated 'on the fly' each time a linked image is readied for fading in. However, here's where in U Fade that the links are generated:

slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'

Just add the class name of your choice:

slideHTML='<a class="some_name" href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'

[jyeager]

You are a saint. And you're right, it's NOT that easy... but just barely.

It seems to work randomly, probably for the reason you stated. There's some kind of initializing not being done. I'm not enough of a coder to know exactly what it is.

Please visit :
http://vilverset.com/test2.html

Click on the rotating image part. One out of every 3 clicks or so, it works. It seems unrelated to which image is loaded, or if the image has already been clicked or not. In fact, I can't tell what the pattern is.

PS: Note the JS portion at the very end which seems to have some initializing properties.

Could you tell me how to fix it? We're almost there..! I can taste it. :-/

EDIT : I Believe I've found the pattern, but I could be wrong.
1. The first click works, regardless of what image we're clicking.
2. The second click only works if we exit the overlay fast enough to re-click the same image again, before it can change to another image.
3. As soon as the image has rotated, the second click (and all subsequent clicks) will not work.
(By "not work", I mean it will change page instead of overlaying.)

So it appears this is a "clean-up" problem. Control.Modal inits fine (it seems), but just once. It doesn't re-init after that. Maybe this will help you fix it? :-$

[jscheuer1]

First off, looks like you have at least one script on the page that you are not using, thumbnailviewer2.js - if so, get rid of it. Also, I see no credit on the page for U Fade:

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

With that out of the way, I see that this is the init code:

    document.getElementsByClassName('modal').each(function(link){
        new Control.Modal(link,{fade:true});
    });

Since you are using U Fade's mouseover pause, I'd try adding the code there:

crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}

like so:

crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1;
    document.getElementsByClassName('modal').each(function(link){
        new Control.Modal(link,{fade:true});
    });}

Untested. It probably will work at least the first go round, but may leak an inordinate amount of memory, in some browsers, especially IE (which is prone to that sort of thing in general), because the init is only really meant to run once per page load. If the modal script is well written, though, there shouldn't be any real problem.

[jyeager]

First off, looks like you have at least one script on the page that you are not using, thumbnailviewer2.js - if so, get rid of it. Also, I see no credit on the page for U Fade:

John, c'mon; cut me some slack here. This is a test page, whipped together rapidly for the purpose of these tests (I thought that was obvious from its name and appearance). I skipped most of the crediting fine print, as well as most of the aesthetic concerns. I also made sure every script used on the site was included here, even if the test HTML isn't using it. But as it stands, thumbnailviewer2 actually *IS* used in the overlayers being called (the HTML files beginning with tn_*.html that appear over everything when you click on an image).

Here, once again, is that test page :
http://vilverset.com/test2.html

I've just included a sample of a normal call to modal (via text link). You will see in that <a> tag some init code for thumbnailviewer2 we (I) forgot in the original msg.

With that out of the way, I see that this is the init code:

    document.getElementsByClassName('modal').each(function(link){
        new Control.Modal(link,{fade:true});
    });

Since you are using U Fade's mouseover pause, I'd try adding the code there:

crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}

like so:

crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1;
    document.getElementsByClassName('modal').each(function(link){
        new Control.Modal(link,{fade:true});
    });}

Untested. It probably will work at least the first go round, but may leak an inordinate amount of memory, in some browsers, especially IE (which is prone to that sort of thing in general), because the init is only really meant to run once per page load. If the modal script is well written, though, there shouldn't be any real problem.

It works in FF only. The entire script falls apart in IE (generates an unknown runtime error at line 370), and won't even display the rotating images statically anymore. Naturally, this has to work in IE. :-(

[jscheuer1]

Works in Opera too. I did say that there could be problems in IE. Did it at least 'work' as poorly in IE as in FF before the addition? I don't remember. In any case, you would need to make up a test page with just U Fade (with the changes) and Modal on it to see if that much works in IE or not.

Before you do that though, THIS HAS TO GO:

<div style="width:750px; background:url(/images/pane_main.jpg) left top no-repeat;">
  <a class="modal"><div style="width:450px; height:220px; float:right">
  
<script type="text/javascript">

//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 450, 220, 0, 3000, 1, "R")

</script>
  
  </div></a>

That might be the only problem.

[jyeager]

THIS HAS TO GO:

<div style="width:750px; background:url(/images/pane_main.jpg) left top no-repeat;">
  <a class="modal"><div style="width:450px; height:220px; float:right">
  
<script type="text/javascript">

//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 450, 220, 0, 3000, 1, "R")

</script>
  
  </div></a>

That might be the only problem.

It was. My bad for forgetting to remove it from earlier tests. It works everywhere now. Thanks!

Only 1 problem remains : "thumbnailviewer2 is undefined" in the overlayer when you mouseover the thumbnails. Take a closer look at the TEXT link to the left and how it launches the overlayer page - it holds thumbnailviewer2 init code that now, I assume, needs to be incorporated in the fade script.

Then we're done! But.. will this be a house of cards waiting to fall apart? Or will it remain relatively solid as long as I don't add anymore scripts?

[jscheuer1]

You have at least two problems. One is that in IE, thumbnailviewer2 isn't defined. It is in Opera and FF. In those two, all you probably need to do is perform the thumbnailviewer2 cleanup before each Modal launch. This should do that:

crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1;
    document.getElementsByClassName('modal').each(function(link){
        new Control.Modal(link,{fade:true});
    });
if(thumbnailviewer2.targetlinks&&(thumbnailviewer2.targetlinks.length||thumbnailviewer2.featureImage)){thumbnailviewer2.cleanup();}thumbnailviewer2.alreadyrunflag=0;
}

I'm not sure why IE has thumbnailviewer2 as undefined, but the first thing I would try is removing the defer="defer" from its script tag.

[jyeager]

It works! Everything, all of it... in FF2 and IE7. Only thing left to try is Safari and IE6, which I'll do tomorrow.

Thank you so very, very much... if you ever need something (blood, organs) lemme know. They're yours! :-)

(Now if you could get thumbnailviewer2 to use the Ultimate Slideshow library for the fades - so they're also FF/Opera-friendly - I'd tattoo your name on my arm.)

Thanks again... I've no words to describe how much trouble you just saved me. I'll have a friend of mine look at the trans thing. You've done more than enough.