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
6253

[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/showthread.php?81991-Adding-text-box-into-existing-page