How does one change the animation for Bootstrap Image Gallery by blueimp?

Question

This one has completely stumped me. I tweaked my css so regular bootstrap modals just fade in without sliding by changing the start and end locations to be the same:

.modal.fade.in {
    top: 50%;
}
.modal {
    top: 50%;
}

That resulted in a nice gradual appearance in place.

I want to achieve the same effect for image gallery modals created by Bootstrap Image Gallery, which extends bootstrap's modal.js. It can be found here. While it's very appealing in terms of functionality, over the course of the week i've played with the js and css all to no avail to simplify the transitions. For the life of me i can't figure out how to have each image fade in, but in place rather than sliding down or across, which is really distracting.

All i've been able to do is remove the 'fade' class to eliminate the transition completely. I would have thought that the css changes i'd made for the other modal would have also been applied to the gallery modals, but they aren't. I've walked through the source code for bootstrap.js as well, can't figure it out. I'm not a complete nube, but far from a js/css expert and need a hand here. Thanks!

Answer 1

I would start with Chrome developer tools or Firebug to see why your CSS rule is being overwritten. On a mac with Chrome, hold down control and click the the mouse/scroll box when you are on top of the element you want to inspect (this will open a dialog where you will click "inspect Element"). This will then open the developer tools which will have in blue highlight the element you clicked, in this case the .modal-gallery.

I just checked the source code on this modal-gallery and noticed in the CSS that this code in bootstrap.min.css:682:

.modal.fade.in {
   top: 50%;
}

can be overwritten upon resizing the screen by the following code in bootstrap.responsive.css:10:

modal.fade.in {
  top: auto;
}

Another suggestion is to check the bootstrap-image-gallery.css file since the gallery has a .modal-gallery class applied to it that is not present in Twitter Bootstrap itself.