CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapquicksand
Eze Barnes
Eze Barnes

Reputation: 57

Bootstrap 3 + Quicksand.js filterable portfolio - Images got resized in transition

I'm trying to make a filterable portfolio using Quicksand.

I almost got it, but I have a problem with the transition effect. Here is the thing, I have a row with the following divs, four times repeated (4 rows x 3 columns):

                <div class="col-lg-3 col-md-4 col-xs-6 thumb" data-type="dog" data-id="id-1">
                    <a class="thumbnail" href="#">
                        <img class="img-responsive" src="images/dog1.jpg" alt="">
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb" data-type="cat" data-id="id-2">
                    <a class="thumbnail" href="#">
                        <img class="img-responsive" src="images/cat1.jpg" alt="">
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb" data-type="bird" data-id="id-3">
                    <a class="thumbnail" href="#">
                        <img class="img-responsive" src="images/bird1.jpg" alt="">
                    </a>
                </div>

It looks great, but when I press any category ("dog", "cat", "bird", or "all") to filter, in the transition time, quicksand hides a few divs (this is ok) and the images got resized (they look bigger), because they are responsive (col-md), and that's not the effect that I'm looking for.

I saw an example using "ul" instead of divs but I don't know how to mix it with bootstrap classes.

Is there any workaround?

Thanks in advance!.

Upvotes: 0

Views: 284

Answers (1)

Anthony Ln
Anthony Ln

Reputation: 131

I added this into the JavaScript:

$portfolio.quicksand($filteredData, {
    duration: 600,
    adjustHeight: 'auto', //this
    adjustWidth: 'auto',  //and this
    easing: 'swing'
}

Upvotes: 0

Related Questions