woomark infinite gallery clashing with bootstrap.css - css

Question

I am using the GBKS woodmark jquery infinite gallery plugin with JADE and EXPRESS.
I am also using bootstrap css, there is apparently a clash with bootstrap.css that makes the absolute positioning used by woomark fail onload.
The main issue is that the absolute positioning of li in a ul by bootstrap is over-writing the absolute positioning of li in a ul of the woomark gallery plugin.
There is a temporary solution of just calling the method again to re-position the site a couple of milliseconds after the site loads, but I don't think that is a good idea.

Answer 1

The issue isn't a clash with bootstrap, it's that wookmark doesn't know the height of the images before loading them. In order to fix it:
Add the Images Loaded JS plugin - https://github.com/desandro/imagesloaded
Modify the wookmark code so that it doesn't trigger before all the images are loaded:
<!-- Once the images are loaded, initalize the Wookmark plug-in. -->
<script type="text/javascript">
$('#tiles').imagesLoaded(function() {
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: 2, // Optional, the distance between grid items
itemWidth: 210 // Optional, the width of a grid item
};
// Get a reference to your grid items.
var handler = $('#tiles li');
// Call the layout function.
handler.wookmark(options);
// Capture clicks on grid items.
handler.click(function(){
// Randomize the height of the clicked item.
var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
$(this).css('height', newHeight+'px');
// Update the layout.
handler.wookmark();
});
});