Jump to content

Twitter Bootstrap and Thumbnails

Joss

By Joss,
in Dev Talk

 Share

Recommended Posts

Joss Hero Member

Joss

Posted
Posted

There is an issue with the Twitter Bootstrap Thumbnails markup - basically, if they go to a second row it breaks, because the first item on the second row has a margin-left value which knocks the entire system off course.

I have found the following bit of JQuery which solves the problem. It is better than using CSS as with CSS you have to work out the child, and older browsers don't understand that.

The jquery works out which is the first item in the row and adds an additional class. The class needs to be in your style sheet somewhere, obviously.

/* Put this in your style sheet */
.first-in-row { 
  margin-left: 0 !important;
}​
 
This is the JQuery for the thumbnails
 
/**
 * Adds 0 left margin to the first thumbnail on each row that don't get it via CSS rules.
 * Recall the function when the floating of the elements changed.
 */
function fixThumbnailMargins() {
    $('.row-fluid .thumbnails').each(function () {
        var $thumbnails = $(this).children(),
            previousOffsetLeft = $thumbnails.first().offset().left;
        $thumbnails.removeClass('first-in-row');
        $thumbnails.first().addClass('first-in-row');
        $thumbnails.each(function () {
            var $thumbnail = $(this),
                offsetLeft = $thumbnail.offset().left;
            if (offsetLeft < previousOffsetLeft) {
                $thumbnail.addClass('first-in-row');
            }
            previousOffsetLeft = offsetLeft;
        });
    });
}
// Fix the margins when potentally the floating changed
$(window).resize(fixThumbnailMargins);

fixThumbnailMargins();
I have modified the code to work for normal divs. This is useful where you might have posts in divs and in a grid - the same problem happens as with Thumbnails.
 
In this case, the containing row-fluid div must have the additional class "theposts" added to it.
 
/**
 * Adds 0 left margin to the first post on each row that don't get it via CSS rules.
 * Recall the function when the floating of the elements changed.
 */
function fixThepostMargins() {
    $('.row-fluid.theposts').each(function () {
        var $theposts = $(this).children(),
            previousOffsetLeft = $theposts.first().offset().left;
        $theposts.removeClass('first-in-row');
        $theposts.first().addClass('first-in-row');
        $theposts.each(function () {
            var $thepost = $(this),
                offsetLeft = $thepost.offset().left;
            if (offsetLeft < previousOffsetLeft) {
                $thepost.addClass('first-in-row');
            }
            previousOffsetLeft = offsetLeft;
        });
    });
}
// Fix the margins when potentally the floating changed
$(window).resize(fixThepostMargins);

fixThepostMargins();
The original post about this can be found here:
 
https://github.com/twitter/bootstrap/issues/3494 - Posted by a chap called Sanjo
 
 
Joss
Link to comment
Share on other sites
Joss Hero Member

Joss

Posted
  • Author
Posted

Hi Onjegolders

That is fine if it is the fourth item, but depending on what the span you are using of each item, it might be the second, third, fourth, sixth....

For the profile I am working on, you can set how many objects per row, so it will vary.

Also, your grid may extend over several rows.

Admittedly, this only works if you elements are equal, but it works with all the elements.

I haven't used Foundation and I wont for the moment. I haven't finished creating Bootstrap profiles yet!

Link to comment
Share on other sites
JeffS Full Member

JeffS

Posted
Posted

The issue with thumbnails is only present on .row-fluid parent elements (responsive). The ticket keeps getting closed meaning they probably will not address this issue.

If your building out a bunch of templates based on bootstrap, you really might want to take a look at v3. Major changes in that branch. Mobile first, no more submenu's in drop downs, plus a lot of other changes you should be aware of. Stuff to consider as you code your solutions. 

https://github.com/twitter/bootstrap/pull/6342

Link to comment
Share on other sites
Joss Hero Member

Joss

Posted
  • Author
Posted

Yeah, the sub menu issue is really going to upset a lot of people (in fact, it already has)

They are focussing so much on mobile that they are ignoring the rest. People trying to use TB for e-commerce (which inevitably has a complex structure) are feeling particularly annoyed, I would imagine.

I will end up doing solutions for both, I suspect. A lot of the things will cross over, but some wont. Also, I suspect you will see a lot of people using v3 but using a different menu system, as happened before they introduced sub menus. Having said that, even last week, going by one post I found, they were still undecided over the entire issue.

On the row-fluid issue, yes I know they are not interested - which is why little JQuery solutions are so useful.

The other work-round is to remove the left margin value all together. But then (as I have found out before) you spend a lot of time trying to get space back between things again. 

Link to comment
Share on other sites
  • 3 months later...
Andrea Starter

Andrea

Posted
Posted

This fix is awsome is there any way we could integrate it with quicksand.js my boss ask me to make a gallery but it mess up when it filters this is what i have so far in my js files

function fixThumbnailMargins() {
    $('.row-fluid .thumbnails').each(function () {
        var $thumbnails = $(this).children(),
            previousOffsetLeft = $thumbnails.first().offset().left;
        $thumbnails.removeClass('first-in-row');
        $thumbnails.first().addClass('first-in-row');
        $thumbnails.each(function () {
            var $thumbnail = $(this),
                offsetLeft = $thumbnail.offset().left;
            if (offsetLeft < previousOffsetLeft) {
                $thumbnail.addClass('first-in-row');
            }
            previousOffsetLeft = offsetLeft;
        });
    });
}

// Fix the margins when potentally the floating changed
$(window).resize(fixThumbnailMargins);

fixThumbnailMargins();

});
/*===============================================*/	
/* functions for portfolio
/*===============================================*/
$(document).ready(function(fixThumbnailMargins){
  // get the action filter option item on page load
  var $filterType = $('#filterOptions li.current a').attr('class');
	
  // get and assign the thumbnails element to the
	// $holder varible for use later
  var $holder = $('ul.thumbnails');

  // clone all items within the pre-assigned $holder element
  var $data = $holder.clone();

  // attempt to call Quicksand when a filter option
	// item is clicked

	$('#filterOptions li a').click(function(e) {
		// reset the current class on all the buttons
		$('#filterOptions li').removeClass('current');
		
		
		// assign the class of the clicked filter option
		// element to our $filterType variable
		var $filterType = $(this).attr('class');
		$(this).parent().addClass('current');
		
		if ($filterType == 'all') {
			// assign all li items to the $filteredData var when
			// the 'All' filter option is clicked
			var $filteredData = $data.find('li');
		} 
		else {
			// find all li elements that have our required $filterType
			// values for the data-type element
			var $filteredData = $data.find('li[data-type=' + $filterType + ']');
		}
		
		// call quicksand and assign transition parameters
		fixThumbnailMargins();
		$holder.quicksand($filteredData, {
			duration: 800,
			easing: 'easeInOutQuad'
		});
		
		return false;
	});
});

and on my html i have

<div id="gallery" class="row-fluid">
<div class="page-header">
    <h2>Meet our team</h2>
    </div> 
    <div class="row-fluid">		    
			 <div class="filter_wrapper">			 
        	  <ul class="nav nav-pills" id="filterOptions">
				<li class="current"><a class="all" href="#">All</a></li> 
				<li><a class="website" href="#">Websites</a></li>  
				<li><a class="logos" href="#">Logos</a></li> 
				<li><a class="building" href="#">Buildings</a></li>  
				<li><a class="photo" href="#">Photografy</a></li>  
			  </ul> 
			 </div>
       </div>
   <ul class="thumbnails">
    <li class="span6" data-id="id-1" data-type="website">
    <div class="thumbnail pics"> <a href="#"><img src="images/comun/picture450.jpg" alt="" /><div class="pics-overlay-link"></div></a>
<div class="caption team">    <h3>Lorem ipsum dolor sit amet</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>
</div>          
    </div>
    </li>
    

    <li class="span6" data-id="id-3" data-type="logos">
    <div class="thumbnail pics"> <a href="#"><img src="images/comun/picture450.jpg" alt="" /><div class="pics-overlay-link"></div></a>
<div class="caption team">    <h3>Lorem ipsum dolor sit amet</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>
</div>          
    </div>
    </li>
    <li class="span6" data-id="id-4" data-type="website">
    <div class="thumbnail pics"> <a href="#"><img src="images/comun/picture450.jpg" alt="" /><div class="pics-overlay-link"></div></a>
<div class="caption team">    <h3>Lorem ipsum dolor sit amet</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>
</div>          
    </div>
    </li>
<li class="span6" data-id="id-5" data-type="website">
    <div class="thumbnail pics"> <a href="#"><img src="images/comun/picture450.jpg" alt="" /><div class="pics-overlay-link"></div></a>
<div class="caption team">    <h3>Lorem ipsum dolor sit amet</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>
</div>          
    </div>
    </li>
    <li class="span6" data-id="id-6" data-type="building">
    <div class="thumbnail pics"> <a href="#"><img src="images/comun/picture450.jpg" alt="" /><div class="pics-overlay-link"></div></a>
<div class="caption team">    <h3>Lorem ipsum dolor sit amet</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>
</div>          
    </div>
    </li>
    <li class="span6" data-id="id-7" data-type="building">
    <div class="thumbnail pics"> <a href="#"><img src="images/comun/picture450.jpg" alt="" /><div class="pics-overlay-link"></div></a>
<div class="caption team">    <h3>Lorem ipsum dolor sit amet</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>
</div>          
    </div>
    </li>
  
    </ul>
 
 </div>

the script here works great when the page loads and resize but when i hade some elements it breaks again, im not so good wth js mostly php going crazy to try to fix it

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...