Highlight Current Thumb

southeasternphotography · August 21, 2013

Can't find this but sure I read about it on some thread. On SmugMug Theme, when viewing a gallery, I want the thumb of the current image showing on the right to be highlighted in some way. I have used custom css to put a red bracket around the top and left side of the thumb (the other two sides won't work) when I HOVER over a thumb. I even added code to change the opacity of the HOVERED thumb. But as soon as I move the cursor, say to get a lightbox view, the red lines and opacity go away.

If I am using the keyboard arrow to jump through images, it would be nice to know which thumb it was using at the current time. I have alot of images that are very similar and hard to distinguish which thumb goes with each image. Besides, this just makes sense.

I think I did this in legacy with customization, perhaps the missing one now!

Anyone got a css fix? And sorry, I really did look around alot for other threads concerning this.:huh

Hikin' Mike · August 21, 2013

You mean like a ':visited' color, like the ':hover'?

W.W. Webster · August 21, 2013

I hope this can be picked up as a "feature request"!

southeasternphotography · August 21, 2013

Hikin' Mike wrote: »

You mean like a ':visited' color, like the ':hover'?

Actually, I am using :active along with the :hover. The lines below put a top and left line around the thumb (bottom and right aren't working)

.sm-tiles-list a:focus img, .sm-tiles-list a:hover img, .sm-tiles-list a:active img {
border: 1px solid red!important;
}

And I make an opacity change at the same time with this:

li .sm-tile:hover {
opacity: .5;
}

This gives a nice visual change for where your cursor is. But it won't stick. I want it to stick if I click on the item and stay there until I either click on a new thumb or use the keyboard arrow key to move to the next one.

I just tried the :visited with color yellow and it puts a yellow on top of the image. It goes away just like the others as soon as you move the cursor.

If you go to my site (legacy), and go to a gallery and click on a thumb, a white border (very small) surrounds the thumb. Move the cursor - that thumb still keeps the border. Click another random thumb and IT becomes the "highlighted" thumb. I just looked all over my customizations in the legacy site and I cannot find it.

Allen · August 21, 2013

We also need the border to follow as we use the keyboard arrow.

Legacy site changed to next selected thumb and going into and out of lightbox the active thumb remained bordered.

southeasternphotography · September 17, 2013

Bump

leftquark · September 18, 2013

You'll have to submit this as a feature request as it's currently not possible.

Let me explain:

":active" only works as the mouse is being pressed. As soon as the mouse is released it's no longer "active" and the effect goes away. That's not what you want.
":visited" works for all links that the user has visited. I'm not sure why it clears right away but again it's not what you want because all thumbs that a user clicks on would them be 'visited' ... you only want the most recent one.

What you need is some kind of class description to acknowledge which one is the active thumbnail ... and that needs to come from some SmugMug code. There's no way for us to add it. We can alter classes that have already been defined but since the "active thumbnail" is not a defined class, there's no way to give it any properties.

SmugMug did this in their menu-bar's for example:

When you drop in a menu block and create some links the link that you're currently on gets a division called "sm-page-widget-nav-toplink sm-page-widget-nav-activepage"
All other links have a division called "sm-page-widget-nav-toplink"
Notice how "sm-page-widget-nav-activepage" was added to the active link.

Without this kind of extra div class callout there's no way to do this.

If you submit the feature request, I'd +1 it, as I'd love the feature!

toddbuchanan · September 18, 2013

I agree too..this would be nice to have the possibility of doing this...great idea!

southeasternphotography · September 18, 2013

MOVE thread to Feature Request
I went ahead and created a Feature Request [Highlight Current Thumb2] for this as asked.

http://www.dgrin.com/showthread.php?t=240899

I asked in that thread to move this one to Feature Requests and then delete the new one there. I also pointed to this thread in the new one.

Highlight Current Thumb

Comments