Select active thumb with border

[theremotedr]

Hi,
Here is the page in question http://www.theatticbanwell.co.uk/slideshow.html

I would like to be able to have some kind of visual affect of which thumbnail is currently selected.

I mean as i click the next button a few times and the main image changes i would like something to also be shown on the corresponding thumbnail below.
In my elastislide css file i added the following at line 51 but no difference was made ?

.es-carousel ul li a img.selected {
	border-color:#FF0000;
	border-style:solid;
	border-width:thin;
}

Be it a border / opacity im not fussy.
I did use opacity but was unable to disable it on the phone etc.
Could you advise my mistake please.

Even something like the chrome dev tool

[Deadweight]

You would most likely have to use Javascript/Jquery. One to select them all then another to add it to the element that is being clicked.

eg:

$('.es-carousel img').click(function() {
  $(this).closest('ul').find('.selected').removeClass('selected');
  $(this).addClass('selected');
});

[coothead]

Hi there theremotedr,

try adding this...

.selected{
    position: relative;
 }

.selected::before {
    content: '';
    position: absolute;
    z-index: 1; 
    width: 100%; 
    height: 100%; 
    background-color: rgba( 255, 0, 255, 0.4);
    box-shadow: inset 0 0 0.5em #000;
 }

...to your "style.css" file.

coothead

[theremotedr]

Many thanks old friend.
Great to hear from you once again.

Now applied & works spot on.

Ian

[coothead]

Hi there Ian,

No problem, your very welcome.

Nice to see, that you've also expanded you're business empire.

I also noticed that you've nipped into the "Sitepoint Forums" to broaden your help options.

coothead

[theremotedr]

You are correct.
I was scratching my head for ages & needed to put it to rest.

Now i am looking at the next challenge.

[theremotedr]

Would you mind taking a look at this please Coothead http://www.dynamicdrive.com/forums/s...-existing-page