How to Add Class to Bootstrap Thumbnails on Slider Change


Tags: jquery,css3,twitter-bootstrap

Problem :

Can you please take a look at this link and let me know let me know how I can add the class .highlight either on gallery carousel-control clicks to the thumbs?

As you can see from the code I am using following code to highlight the selected thumbs:

var classHighlight = 'highlight';
var $thumbs = $('.thumbnail').click(function(e) {
e.preventDefault();
$thumbs.removeClass(classHighlight);
$(this).addClass(classHighlight);
});

well, I am not sure that is correct way but it is working for me! but as I said this is working on clicking on .thumbnail but what I need is adding the class to thumbnails on sliding event. I already add this CSS to my code but it is not working!

.thumbnail:active{
  border-style:solid;
  border-width:5px;
  border-color:gery;
  }

Thanks for you time and comments



Solution :

You can change the on slide function to do that (added the 2 bottom lines):

   // When the carousel slides, auto update the text
    $('#myCarousel').on('slid', function (e) {
            var id = $('.item.active').data('slide-number');
            $('#carousel-text').html($('#slide-content-'+id).html());
        $('#slider-thumbs > div > ul > li > a').removeClass('highlight');
        $('#carousel-selector-'+id).addClass('highlight');
    });

To select the first thumbnail on page load add this line on top, after the initialization of carousel:

   $('#carousel-selector-0').addClass('highlight');

Fiddle: DEMO


    CSS Howto..

    How can I test websites for Mobile Devices

    How to detect DOM element position to use different CSS style via CSS selection

    How to catch div position and reposition it later (on MAC)

    How to set minimum height to the 100% of the viewing screen and half of the page?

    How to avoid calling “fonts.googleapis.com/css?family=..” for my CSS files

    How to make this in html and css?

    How to center a div tag in a html page without being affected by zooming

    Css, text shadow - How to get it overflow off the div

    How to apply css inside a text that is either any html control or without any html control

    How can i change or remove title and page address?

    How do I allow CSS files to be referenced from other domains?

    How can I create this centered header with multiple colors?

    How can I get this css to display correctly in Chrome?

    960 grid css : How do I change vertical padding between divs?

    How do I select text after a

    tag, but before a nested tag?

    How to find the screen width and apply it to a particular css

    Can't get table to show up using HTML and CSS

    How to get a CSS selector using Selenium WebDriver?

    How do I get rid of the big margin between my labels and the input fields?

    How to make this kind of border css? [closed]

    how to move this navigation bar to the right

    How to make my container grow accordingly to its containers inside him?

    How to break text in a line in a div by css?

    How to fix header cannot sticky in wordpress?

    How determine css text of each node in html

    How to control the size of a table cell in css

    How to center CSS Navigation Menu

    How to select multiple CSS parent and descendant groups efficiently

    How to add multiple link styles on the same page?

    How to top-level a rich:panelMenu with it's rich:outputPanel with an h:panelGrid?