Develop Reference

Is it possible to adapt a data filter to a defined grid so that all images appear in col-12 or at a specific size?

i have this good loking box grid
However, after adding a data filter and toggling between filters, the images appear in the same exact location and size as the grid that I designed. Is it feasible to have a data filter that displays all filtered images in one size?
this is my grid code
<div class="container">
<div class="text-center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="bootstrap">BootStrap</button>
<button class="btn btn-default filter-button" data-filter="bootstrax">BootStrax</button>
<button class="btn btn-default filter-button" data-filter="purecss">Pure CSS</button>
</div>
<div class="container container-box">
<style>
.container-box{
width: 600px; }
</style>
<div class="row">
<div class="col-12"><img width="600" class="img-fluid pb-3 filter bootstrax "
src="./images/01.jpg" alt=""></div>
</div>
<div class="row g-3">
<div class="col-4"><img width="200" class="img-fluid filter bootstrap"
src="./images/02.jpg" alt=""></div>
<div class="col-4"><img width="200" class="img-fluid filter purecss"
src="./images/03.jpg" alt=""></div>
<div class="col-4"><img width="200" class="img-fluid filter bootstrax"
src="./images/04.jpg" alt=""></div>
</div>
</div>
</div>
$(document).ready(function() {
$(".filter-button").click(function(e) {
var value = $(this).attr("data-filter");
if (value == "all") {
$(".filter").show("1000");
} else {
$(".filter").filter("." + value).show("3000");
$(".filter").not("." + value).hide("3000");
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
Is it possible to achieve that outcome in js, css, and html? Alternatively, if somebody has a better suggestion, please enlighten me.

You can simply use isotop js library by adding the following cdn to your script area :
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.min.js"></script>
You can still have the nested gallery structure and use the data filter by using isotope, also the filtered images will show properly one beside the other, and of course you will still have the same grid structure that will not be affected.
<div class="container text-center pt-5">
<div class="row">
<div class="col-md-12">
<div class="filters">
<h4>Featured categories</h4>
<ul>
<li data-filter=".idea">Furniture <img class="dot" src="./images/dot.svg"
alt=""></li>
<li data-filter=".ui">lighting <img class="dot" src="./images/dot.svg"
alt=""></li>
<li data-filter=".ux">Accessories <img class="dot" src="./images/dot.svg"
alt=""></li>
<li data-filter=".code">Tailor-made objects <img class="dot"
src="./images/dot.svg" alt=""></li>
<li class="is-checked fp" data-filter="*">All</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div class="rows grid data-isotope='{ "itemSelector": ".grid-item", "masonry":
{ "columnWidth": 200 } }'">
<div class="col-md-12 grid-item code">
<img class="img-fluid" src="./images/01.jpg" alt="">
</div>
<div class="col-md-4 grid-item ux ">
<img class="img-fluid img-grid" src="./images/02.jpg" alt="">
</div>
<div class="col-md-4 grid-item ui">
<img class="img-fluid img-grid" src="./images/03.jpg" alt="">
</div>
<div class="col-md-4 grid-item idea">
<img class="img-fluid img-grid" src="./images/04.jpg" alt="">
</div>
<div class="col-md-4 grid-item ux ">
<img class="img-fluid img-grid" src="./images/02.jpg" alt="">
</div>
<div class="col-md-4 grid-item ui">
<img class="img-fluid img-grid" src="./images/03.jpg" alt="">
</div>
<div class="col-md-4 grid-item idea">
<img class="img-fluid img-grid" src="./images/04.jpg" alt="">
</div>
<div class="col-md-4 grid-item ux ">
<img class="img-fluid img-grid" src="./images/02.jpg" alt="">
</div>
<div class="col-md-4 grid-item ui">
<img class="img-fluid img-grid" src="./images/03.jpg" alt="">
</div>
<div class="col-md-4 grid-item idea">
<img class="img-fluid img-grid" src="./images/04.jpg" alt="">
</div>
</div>
</div>
and use the following script as well
var $grid = $('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows',
});
// change is-checked class on buttons
var $buttonGroup = $('.filters');
$buttonGroup.on( 'click', 'li', function( event ) {
$buttonGroup.find('.is-checked').removeClass('is-checked');
var $button = $( event.currentTarget );
$button.addClass('is-checked');
var filterValue = $button.attr('data-filter');
$grid.isotope({ filter: filterValue });
});
Best of luck

Owl Carousel change content of the element on click

I have a problem with owl carousel and till now I don't have any ideas how to fix it.
So on the image 1 you can see the normal behaviour of the slider. On the second one you will see the extended functionality of it. The idea is very simple, when user click on the element, he should expand it, but when the element is expanded all other element goes to 2 rows and I don't want to happen.
Image 1
Image 2
also Source code of one element
<div class="element box-shadow">
<div class="child">
<div class="row">
<div class="col-xs-12 col-md-8">
<span>05.</span>
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
<p class="view-more">View more <img src="assets/images/view-more.svg" /></p>
</div>
<div class="col-xs-12 col-md-4 portfolio-image" >
<img src="assets/images/inventive-small-img.png" />
</div>
</div>
</div>
<div class="parent hidden">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row " style="margin-bottom: 15px;" >
<div class="col-xs-12 col-md-3">
<img src="assets/images/inventive-small-img.png" style="width:34px" class="rounded-circle">
</div>
<div class="col-xs-12 col-md-9 text no-padding" >
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 social-el" style="padding-left:0;">
<div class="stars">
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/half_star.svg" />
<img class="mr-2" src="assets/images/empty_star.svg" />
<img src="assets/images/empty_star.svg" />
</div>
</div>
</div>
<img src="assets/images/inventive-studio-img.png" class="img-fluid">
<div class="content">
<p >Designing and producing catalogs, sales sheets, proposals, scenario illustrations, brochures, posters, custom displays for trade shows and in-house exhibits and all others items.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<a class="view-less" href="#"><img src="assets/images/view-more.svg"/> View Less</a>
</div>
<div class="col-xs-12 col-md-6">
<div class="stars">
<img src="assets/images/Facebook.svg"/>
<img class="mr-10" src="assets/images/twitter.svg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
also will share and jquery code
$(".owl-carousel").owlCarousel({
margin:10,
loop: true,
autoWidth: true,
items:3,
rewind: true,
autoplay: true,
responsiveClass:true,
});
$('.work').each(function(i, el) {
$parent = $(el);
$('.element', $parent).each(function(i, item) {
$element = $(item)
$element.on('click', function(e) {
$current = $(this)
console.log($current)
if ($('.parent', $current).hasClass('hidden')) {
$('.parent', $current).removeClass('hidden');
$current.addClass('expand-element');
$current.css('border-radius', 10)
$('.child', $current).addClass('hidden');
} else {
$current.removeClass('expand-element');
$('.parent', $current).removeClass('visible').addClass('hidden');
$current.css('border-radius', 20)
$('.child', $current).removeClass('hidden');
}
})
})
})

how to toggle each div

I have a question for toggle, I wrote a function which when I hover some image then that image was change and click then div will display and other image click:hover acting is same close display before selected
this is html code
<div class="bs-example" data-example-id="simple-thumbnails">
<div class="row">
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_ezer"
src="/img/intro_ezer_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_coloris"
src="/img/intro_coloris_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_galaxia"
src="/img/intro_galaxia_main.png"
data-holder-rendered="true"display:block;">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-3 intro_ezer_detail intro">
<img class="intro_margot_main"
src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_coloris_detail intro">
<img class="intro_nanobuble"
src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_galaxia_detail intro">
<img class="intro_teatoxy"
src="/img/intro_ezer.jpg">
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<img
class="intro_margot" src="/img/intro_margot_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4">
<img
class="intro_nanobuble"
src="/img/intro_nanobuble_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4">
<img class="intro_teatoxy"
src="/img/intro_teatoxy_main.png"
data-holder-rendered="true"display:block;">
</div>
</div>
<div class="row detail">
<div class="col-xs-12 col-md-3 intro">
<img src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_nanobuble_detail intro">
<img src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_teatoxy_detail intro">
<img src="/img/intro_ezer.jpg">
</div>
</div>
</div>
javascript
var className = "";
var toggleImg = "";
$('div').find('img').hover(function() {
className = $(this).attr('class');
this.src = '/img/' + className + '_hover.png';
}, function() {
this.src = '/img/' + className + '_main.png';
}).click(function(e) {
toggleImg = className + "_detail";
e.preventDefault(); $('.intro').hide()
$("."+className+"_detail").show();
})
How can I do?

You should use .each
Check the example below.
HTML :
<div>
<img alt="chrome" src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300">
</div>
<div>
<img alt="firefox" src="https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg">
</div>
JS :
$('div img').each(function() {
$(this).click(function() {
alert($(this).attr('alt'));
});
});

Bootstrap 3.3 Carousel - 3 images slide one by one

I want to show 3 thumbnails and onClick of arrow, it has to scroll only one at a time... When it comes to version 3.3, it is scrolling 3 thumbnails at a time... (but it is showing exactly what I want after that.). How can I fix this.
<div class="container">
<div class="row">
<div class="span12">
<div class="well">
<div id="myCarousel" class="carousel fdi-Carousel slide">
<!-- Carousel items -->
<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
<div class="carousel-inner onebyone-carosel">
<div class="item active">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">1</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">2</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">3</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">4</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">5</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="http://placehold.it/250x250" class="img-responsive center-block">
<div class="text-center">6</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#eventCarousel" data-slide="prev"></a>
<a class="right carousel-control" href="#eventCarousel" data-slide="next"></a>
</div>
<!--/carousel-inner-->
</div><!--/myCarousel-->
</div><!--/well-->
</div>
</div>
</div>
En de javascript:
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.fdi-Carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
JSFiddle: http://jsfiddle.net/Luuw070f/

Here a workaround with the transform property
http://jsfiddle.net/rewobs/Luuw070f/4/

Implement jQuery slidedown effect

I have a jQuery slide down animation, but I would like to implement it to the paste section bellow.
Content is for a smaller device so every button need to have slide down element attached on him self.
Can some one show me how can I do this.
Mine jQuery slideDown code:
$(".squere").click(function(){
$(".content").hide(800);
$(".squere").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Mine Content:
<div id="squere" class='container hidden-lg hidden-md '>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle homepageGridDefault" src="img/circle/home-all-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-cover-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-marketing-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">Strange book here :)</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-special-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-vip-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-designe-icon-off.png">
</div>
</div>
Fiddle example, this is the whole dive and it is responsive so do not mind the upper circle in the html section.

Simply use sildeDown and slideUp can resolve your problem.Try this fiddle. Just used slideUp and slide Down method in place of adding and removing active class.
$(document).ready(function(){
$('.content').hide();
});
$(document).on('click',".center",function(){
$(".content").slideUp(300);
$(this).next(".content").slideDown(300);
});

Ok. I've just modified your code and added just 3 images and a content div as below:
DEMO
HTML
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 1
</div>
</div>
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 2
</div>
</div>
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 3
</div>
</div>
</div>
</div>
JS
$(document).ready(function(){
$('.content').hide();
});
$(document).on('click',".center",function(){
if($(this).hasClass('active'))
{
return;
}
$(".content").hide(800);
$(".center").removeClass("active");
$(this).addClass("active");
$(this).next(".content").show(1000);
});
Note: These are just basic animations. If you really want to perform some extra-ordinary animations then you need to check on .animate jquery function.

Please use id selector # instead of class selector .
$("#squere").click(function(){
$(".content").hide(800);
$("#squere").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Might be it is your issue.
$("#squere").removeClass("active");
$(this).addClass("active");
These lines will not make any effect, because you are removing and adding same css class.