Select active thumb with border

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 ?

Code:

---

.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
Attachment 6253

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:

Code:

---

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

---

Hi there theremotedr,

try adding this...

Code:

---


.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

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

Now applied & works spot on.

Ian

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

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

Now i am looking at the next challenge.

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