Results 1 to 7 of 7

Thread: Select active thumb with border

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,063
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default 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
    Click image for larger version. 

Name:	3694.jpg 
Views:	53 
Size:	57.9 KB 
ID:	6253

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    477
    Thanks
    8
    Thanked 52 Times in 50 Posts

    Default

    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');
    });
    Last edited by Deadweight; 02-12-2018 at 07:32 PM.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. The Following User Says Thank You to Deadweight For This Useful Post:

    theremotedr (02-12-2018)

  4. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,145
    Thanks
    1
    Thanked 227 Times in 223 Posts

    Default

    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
    ~ the original bald headed old fart ~

  5. The Following User Says Thank You to coothead For This Useful Post:

    theremotedr (02-12-2018)

  6. #4
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,063
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

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

    Now applied & works spot on.

    Ian

  7. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,145
    Thanks
    1
    Thanked 227 Times in 223 Posts

    Default

    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
    ~ the original bald headed old fart ~

  8. #6
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,063
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

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

    Now i am looking at the next challenge.

  9. #7
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,063
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

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

Similar Threads

  1. Replies: 2
    Last Post: 10-24-2011, 10:30 AM
  2. Thumb Viewer Enlarge Using Different Thumb and Source Image
    By mondealenvers in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-12-2010, 05:51 PM
  3. Replies: 7
    Last Post: 04-19-2008, 07:44 PM
  4. Thumbnail viewer 'active thumb' question.
    By Al Fresco in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 05-29-2007, 09:09 AM
  5. Tab Content Script -- remove bottom border on active tab
    By keleh in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-30-2005, 03:43 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •