Highlight active photo

Hello. I build a photo gallery containing thumbnails. When the user click on a given thumbnail, behind it is a hyperlink which launches another web page containing a larger version of the photo.

I am wondering if there is a way to use HTML/CSS so that the currently selected thumbnail gets some sort of hightlighting.

The reason I want this is that the gallery has hundreds of thumbnails in it, and the normal flow is that you click on a thumbnail, it launches another page with a more detailed version, and then when you are done, you click the “Back” button and end up back in the gallery.

I want a visual clue to show the user where he/she left off last.

Thanks.

The :visited pseudo class is what your looking for

Depending on your HTML, it might look something like this if the parent was a div with the class name of thumbnails.

.thumbnails a:visited {
  border: 1px solid red;
}

@Ray.H,

To be clear, I wanted a way to show the last thumbnail you clicked on. (Maybe it would have a drop shadow, for example?)

My photo-gallery.php page uses an unordered list with Flexbox styling.

<ul class=flexGallery">
    <li class="flexGalleryItem">
        <a href="">
            <img src="" alt="" />
        </a>
    </li>
</ul>

Do you follow what I want to do now?

Yes I do.

:focus will stay at it’s current style when you return to the page. Once you click the link your on your way to the main image from the thumbnail. Then when you return to the page the :focus styles will still be intact. That works on my local machine, not positive it will work on a live site but in theory I think it will.


.flexGalleryItem a {display:block}
.flexGalleryItem a:focus {
  box-shadow:0px 5px 5px red;
  outline:none;
 }

@Ray.H,

When I applied your code, I get a red bar underneath the thumbnail as I click on it, and then I am redirected to my photo-details.php page.

Unfortunately, when I hit the browser “Back” button and return to photo-gallery.php, the original thumbnail that I clicked on does NOT have the red bar underneath it.

Did I mess up the CSS, or is this just not doable?

Upon further testing I see that it works in Firefox but not in Chrome on my local machine.

I have confirmed that it does work on a live site, in Firefox only though.

Here is the file I was testing with.
focus.html (577 Bytes)

It may be possible to do it with the checkbox hack but that will require reworking your HTML.

Strange, because on my Mac in Forefox it doesn’t work when you go back to the page.

Looks like my code, except your code works. Of course, I am on Windows now and my website code is on my Mac.

How important do you think what I want to do really is?

What did you have in mind?

To me it’s not important because I can remember which image I just viewed seconds ago. :slightly_smiling_face:

This link will help you learn about the checkbox hack.

I’m not sure it will work though, it was the only other CSS method that comes to mind.

I’m sure a small snippet of JS would do the job though.

So my current code looks like this…

<ul class=flexGallery">
    <li class="flexGalleryItem">
        <a href="">
            <img src="" alt="" />
        </a>
    </li>
</ul>

Would I add a < label > and < input > inside the < li> and above the < a>??


I'm sure a small snippet of JS would do the job though. [/quote]

Yeah, I’d prefer to avoid Javascript.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.