Image Thumbnail viewer cursor showing

[rod1e]

1) Script Title: Image Thumbnail viewer

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

3) Describe problem: Maybe I am being a bit dense but on Firefox, when I click on a thmbnail, I can still see the position bar (or whatever it's called) flashing through the blownup picture... Is there a way to stop it??

Thanks...

[jscheuer1]

I'm not sure what you are talking about. Could you describe what the position bar looks like? Also, is this happening in FF for you on the demo page, or just on your page where you are trying out the script?

[rod1e]

On both... When I click on the baby on the demo... the blowup has a vertical flashing bar (the side of the selected thmbnail ) showing through.
The other thmbnails have a smaller bar at the bottom left... stilll shows through.
It's the flashing position marker when you are typing... don't know what it's called.

It doesn't happen in IE..

[rod1e]

Yes.. that's it.. Thank you...
I guess you are right but it does kind of destroy the effect of the picture... Wonder if there is a way to disable it only when the larger image is showing. If you click anywhere it closes the image so you don't really need it while viewing the blowup...
Or even shrink it?? Why do some thmbnails show a larger link outline than others??

How does mouseless navigation work in IE then??

Thanks again...

[jscheuer1]

Are you sure that's it? I deleted that post because I didn't think it was what you were talking about. It shouldn't flash or show through anything, unless perhaps you have it configured that way.

Anyways, mouseless navigation works the same pretty much in IE except, until you initiate it, IE doesn't show any link outlines. In FF they are almost always shown. Tab and shift-tab are used to cycle through the links one at a time. This much is the same in nearly every browser. I'm sure there is a way to disable it temporarily but, as I say, it is or should be barely noticeable. I'm still not sure we are talking about the same thing.

[rod1e]

Yes, that is what I was on about... the bit of CSS didn't work though... So how do I dis/enable it in Firefox??
I don't think I have configured anything... what would it be called..?

Thanks again...

[jscheuer1]

OK, I looked into it a little more and it is the anchor tags that require the style. So, you could do it inline, ex:

<a style="outline-style:none;" href="http://img201.imageshack.us/img201/6923/countryxb6.gif"" rel="thumbnail"><img src="thumbnail.gif" style="width: 50px; height: 50px" /></a>

Or you could create a class and assign it to each link (in your stylesheet):

.thumbv {
outline-style:none;
}

Then with each link:

<a class="thumbv" href="http://img201.imageshack.us/img201/6923/countryxb6.gif"" rel="thumbnail"><img src="thumbnail.gif" style="width: 50px; height: 50px" /></a>

[jscheuer1]

Looking at this a bit more, it is pretty easy to do what were mentioning before - that is allow the link outline in FF if the user is using the keyboard but remove it when navigating the thumbs with the mouse. To do that, forget about using the styles as mentioned in my last post, get rid of them. In the file thumbnailviewer.js replace the existing init:function() with this one (additions red):

init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail"
if (!this.enableAnimation)
this.opacitystring=""
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail"){ //Begin if statement
if(!window.opera&&!pagelinks[i].attachEvent)
this.dotask(pagelinks[i],function(){this.style.outlineStyle='none'},'mouseover')
pagelinks[i].onclick=function(){
if(!window.opera){
this.blur();
this.style.outlineStyle='';
}
thumbnailviewer.stopanimation() //Stop any currently running fade animation on "thumbbox" div before proceeding
thumbnailviewer.loadimage(this) //Load image
return false
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP
//Reposition "thumbbox" div when page is resized
this.dotask(window, function(){if (thumbnailviewer.thumbBox.style.visibility=="visible") thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize")


} //END init() function

[rod1e]

Thanks, tried the styles in all different kinds of position and combination... didn't really change anything... took all the styles off and changed the js. also no change.. but... somewhere in the process the top row of my gallery stopped showing the marker?? don't know why?? but have used...

<td width="102"><div align="center"><a href="gallery/gal_14.jpg" rel="thumbnail" title="Felted Freeform"><span style="outline-style:none;"><img src="gallery/det_14.jpg" height="150" width="100" border="none" /></span></a></div></td>

to shrink the marker in the other two rows...

gallery URL:http://www.luckystonestudio.com/gallery.htm

What happens now when you view the page.... Thanks for your time and help...

[jscheuer1]

This being the first time I have viewed it, I can report that the page passes validation except for a few cases of missing alt attributes. The css has a few errors that may or may not affect this. There are no outlines for the gallery links with either the mouse or tabbed navigation but the other links on the page have outlines for tabbed navigation.

Oh, and the page looks pretty good in FF (only browser checked).