Thumbnail Viewer script

[blazinls1]

1) Script Title: Thumbnail Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem:

I have been VERY happy with this script in the past. However, I am now trying to use this script on a page written in PHP, which has an HTML editor "TinyMCE" within it. The problem is that it does NOT recognize the "rel=thumbnail' tag at ALL. It actually erases it completely.

I have spoken to an expert about this, and they have explained to me that this is because "Thumbnail" is not a valid HTML tag, which you can see here: http://www.w3schools.com/tags/tag_a.asp

In the HTML editor my options for the "linked image" or larger image are the following:

Id, Language Code, Image Map

Manually entering in "rel=thumbnail' in the raw code simply led to the HTML editor automatically deleting it. Would this work if I entered in an "Id" for the larger images, and had the script recognize the larger images with an "I'd" number, rather than a "Rel=Thumbnail"??

Should I use another script?

Any help would be greatly appreciated!

-Alex

[jscheuer1]

You and your expert either misunderstood each other, or your expert is wrong. The rel and rev attributes are valid HTML 4.01 strict (and below) for link tags. There is no thumbnail tag per se in this script. If the editor you are using has problems with valid code, I suggest getting one that doesn't have this problem. You of course have the option of rewriting the script so that your problematic editor can deal with it. The id attribute could be substituted for the rel attribute.

However, no matter what editor you use, if as I understand from your post, you are writing code for this script to the page after it has loaded, even a flawless editor alone will be of no help.

If code for the viewer is added after the page has loaded, that new code must be initialized to the script (as happens onload with hard coded links for this script) before it will function. In addition to this, with thumbnail viewer, I believe each new initialization on an already loaded page requires a 'cleanup' of any previous initialization.

I covered the process involved in this cleanup and initialization in another thread. I will see if I can find that and link it back to this post.

[blazinls1]

Thanks for the reply. That was a very well-written and in-depth response, which is hard to come by. Actually, the HTML editor is used in the control panel for an online store. Basically, you use the HTML editor to edit the description of the product that you are trying to present on that page. The HTML editor is optional. When you DON'T use the HTML editor (just straight raw HTML code in the description box) putting "rel=Thumbnail" makes the images work perfectly. However, it would be verrry difficult to edit those products without that buggy HTML editor...

Either way, I'm going to give the HTML editor another shot by putting "Thumbnail" where there is an "Id" field for the linked image. I really love that script, so I'd rather use it rather than one that works with 'onmouseover' or similar commands.

Hmm...

[jscheuer1]

This really sounds as though server side code (probably, but not necessarily PHP) is involved. If you are rewriting the code and then reload the page with the new code (as often would be the case server side), you eliminate the cleanup and re-initialization problems I mentioned. All you would be left with is the problem of using the rel attribute. You could change this by editing the script to use class instead of rel (id's in scripting must be unique to one element on a page). You would have to make sure you changed all instances of rel in the script to class. Once this is done, you could no longer use the rel attribute for the script even without the editor and the class of a link for this script would no longer be available for any other but coincidental usage - that is you could style using the .thumbnail selector as appropriate and if desired.

Two other things:

1) If there would only be one thumbnail on any given page, id could probably be used.

2) When using class in javascript it usually needs to be referred to as className, but when used with the getAttribute() or setAttribute() methods, it varies among browsers. So, instead of using, for example:

element.getAttribute('className')

you would need to use:

element.className

Which is, as they say in coding, both a setter and a getter so could also be used for:

element.setAttribute('className', 'name')

Unfortunately the syntax is a little different and testing for the existence of element.className is often required before getting it can be done. So, instead of, for instance:

var whatever=element.getAttribute('className')

you would have:

var whatever=null;
if(element.className)
whatever=element.className

And, when setting, instead of:

element.setAttribute('className', 'name')

you would have

element.className='name'

[aditya55]

Thanks for the reply. That was a very well-written and in-depth response, which is hard to come by. Actually, the HTML editor is used in the control panel for an online store. Basically, you use the HTML editor to edit the description of the product that you are trying to present on that page. The HTML editor is optional. When you DON'T use the HTML editor (just straight raw HTML code in the description box) putting "rel=Thumbnail" makes the images work perfectly. However, it would be verrry difficult to edit those products without that buggy HTML editor...

Either way, I'm going to give the HTML editor another shot by putting "Thumbnail" where there is an "Id" field for the linked image. I really love that script, so I'd rather use it rather than one that works with 'onmouseover' or similar commands.

Hmm...

https://www.welookups.com/tags/tag_a.html