I`ve made slider. When I reload the page, first photo displays. When I click "next", it displays nothing. I should click "previous" and then "next" again. After that operation photo displays.
I`ve tried to make separate function, work with sepate Image object, but nothing works.
<div class="container main" style=" padding:40px;">
<div id="slide" class="container-fluid slide" style="max-height:481px;height:480px; padding: 0;display: flex;">
<div class="switch left" onclick="change('prev');" style="">
<div class="pont" style="border-radius: 10px ;width: 100px;height: 100px;margin:auto; margin-top: 190px; transform: rotate(45deg);border-left: 10px solid #fff;border-bottom: 10px solid #fff;" >
</div>
</div>
<div class="img-block" style="z-index: 1">
<div class="img">
<img id="imag" src="img/1.jpg" alt="">
<script>
var imag = document.getElementById('imag');
var wid = imag.width;
var het = imag.height;
var cof = wid/het;
document.getElementById('imag').height = "478";
document.getElementById('imag').width = 478*cof;
</script>
</div>
<div class="des">
<p id="description">
</p>
</div>
</div>
<div style="margin-right: 0;" onclick="change('next');" class="switch right">
<div class="pont" style="border-radius: 10px ;width: 100px;height: 100px;margin:auto; margin-top: 190px; transform: rotate(225deg);border-left: 10px solid #fff;border-bottom: 10px solid #fff;" >
</div>
</div>
</div>
</div>
<script>
var pointer = 1;
function change(where_to_move)
{
var img = new Image();
if (where_to_move == "next") {
if(pointer == 7)
{
pointer = 1;
}
else
{
pointer++;
}
}
else
{
if(pointer==1)
{
pointer = 7;
}
else
{
pointer--;
}
}
img.src = "img/"+pointer+".jpg";
var cofc = img.width / img.height;
img.height = "478";
img.width = 479*cofc;
document.getElementById('imag').src= img.src;
document.getElementById('imag').height = img.height;
document.getElementById('imag').width = img.width;
}
</script>
I want this to work it in a proper way
Because you ask the right way, here is how I imagine it;)
CSS
.Slide_2 {
max-height:481px;
height: 480px;
padding: 0;
display: flex;
}
.Pont_2 {
border-radius: 10px ;
width: 100px;
height: 100px;
margin: auto;
margin-top: 190px;
border-left: 10px solid #fff;
border-bottom: 10px solid #fff;
}
HTML body
<div class="container main" style=" padding:40px;">
<div id="slide" class="container-fluid slide Slide_2">
<div class="switch left" onclick="change(-1);" >
<div class="pont Pont_2" style="transform: rotate(45deg);"></div>
</div>
<div class="img-block" style="z-index: 1">
<div class="img">
<img id="imag" src="ZIM/concept_A.jpg" alt="">
</div>
<div class="des">
<p id="description"> </p>
</div>
</div>
<div style="margin-right: 0;" onclick="change(+1);" class="switch right">
<div class="pont Pont_2" style="transform: rotate(225deg);">
</div>
</div>
</div>
</div>
JS part
const
imag = document.getElementById('imag'),
ImgTab = Array.from([1,2,3,4,5,6,7]).map(r=>{
let
IMG = new Image(),
SRC = `img/${r}.jpg`;
IMG.src = SRC; // loading image in memory
return {'src':SRC, 'img': IMG}; // keep it in memory
}),
NbMax = ImgTab.length;
imag.style.height = "478px";
var pointer = 0;
function change(MovVal) {
pointer = (pointer + MovVal + NbMax) % NbMax;
imag.src = ImgTab[pointer].src;
}
Related
I have a nodeList of cards having an animation on hover on vanilla JS. I also want to display a text when I hover on one of the card. With my current code, I display all the texts instead of the correpsonding one
I'm testing it on the pink border top here
.st-vl-hero .first-col div:nth-child(1) {
margin-top: 6.375rem;
margin-bottom: 6.375rem;
}
.bloc-idees {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 3rem;
gap: 1.5rem;
}
.hover-radius + .border-pink {
display: none;
}
.hover-radius:hover + .border-pink {
display: block;
}
.hover-radius:hover {
border-radius: 0px 0px 80px 0px;
}
<div id="bloc-idees" class="bloc-idees">
<div class="bloc-hover position-relative">
<div class="border-pink position-absolute" style="top: 0; height: 8px; background-color: #E89CAE"></div>
<a
href="/fr/fr/idees-cadeaux-pour-la-saint-valentin-homme?ap_source=anico&ap_medium=bloc4&ap_campaign=landing_stval_homme">
<img src="https://media-cdn.printemps.com/image/87/8/4013878.png"
class="hover-radius radius img-fluid" />
</a>
<p class="text-uppercase mt-3" style="font-size:14px;">sélection</p>
<p class="position-relative arrow-mob-univ heading-2 fw-bold text-uppercase mt-2">Homme</p>
<a
href="/fr/fr/idees-cadeaux-pour-la-saint-valentin-homme?ap_source=anico&ap_medium=bloc4&ap_campaign=landing_stval_homme">
<p class="init-size mt-2 discover">Je découvre</p>
</a>
</div>
<div class="bloc-hover position-relative">
<div id="border-pink" class="border-pink position-absolute" style="top: 0; height: 8px; background-color: #E89CAE"></div>
<a
href="/fr/fr/idees-cadeaux-pour-la-saint-valentin-beaute?ap_source=anico&ap_medium=bloc4&ap_campaign=landing_stval_beaute">
<img src="https://media-cdn.printemps.com/image/00/3/4014003.png"
class="hover-radius radius img-fluid" />
</a>
<p class="text-uppercase mt-3" style="font-size:14px;">sélection</p>
<p class="position-relative arrow-mob-univ heading-2 fw-bold text-uppercase mt-2">Beauté</p>
<a
href="/fr/fr/idees-cadeaux-pour-la-saint-valentin-beaute?ap_source=anico&ap_medium=bloc4&ap_campaign=landing_stval_beaute">
<p class="init-size mt-2 discover">Je découvre</p>
</a>
</div>
</div>
I have a nodeList of cards having an animation on hover on vanilla JS. I also want to display a text when I hover on one of the card.
With my current code, I display all the texts instead of the correpsonding one
const blocIdees = document.querySelectorAll(".hover-radius");
const discover = document.querySelectorAll(".discover");
for (i = 0; i < blocIdees.length; ++i) {
if (window.innerWidth > 768) {
blocIdees[i].addEventListener("mouseenter", function (e) {
e.target.style.borderRadius = "0px 0px 80px 0px";
e.target.style.borderTop = "8px solid #E89CAE";
e.target.style.transition = "0.3s ease-in-out";
[...discover].map((element) => {
element.style.display = "block";
console.log(element);
});
// discover("block");
})
blocIdees[i].addEventListener("mouseleave", function (e) {
e.target.style.borderTop = "none";
e.target.style.borderRadius = "unset";
e.target.style.transition = "0.3s ease-in-out";
[...discover].map((element) => {
element.style.display = "none";
});
// discover("none");
})
}
}
I'm looking for an answer to my problem. I have one large image on the top and eight small images on the bottom of my page. I want to make it so when you hover the small image (it's also a link which goes to different place) the large image changes to this small image. So clearly explained, two images change/swap places. And when I unhover the large image changes back.
Here's the picture so you know what I'm talking about!
And I'm looking for CSS, React (if there is any useful components) or just JavaScript-solution (if else statement or something like that).
https://i.ibb.co/C5m5sH3/demonstration.png
Thank you for your time!
You can use jQuery for your case, capture the hover event and update main image source.
$(document).ready(function(){
$('.thumbnail').hover(function(e){
src = $(e.target).data('main');
$("#target_img").attr('src', src);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main_image" style="width: 200px; height: 100px">
<img id="target_img" src="#"/>
</div>
<ul>
<li>
<img class="thumbnail" src="https://th.bing.com/th/id/OIP.wx64GmJDu2nd32eO_tieDgHaEK?pid=Api&rs=1" data-main="https://th.bing.com/th/id/OIP.wx64GmJDu2nd32eO_tieDgHaEK?pid=Api&rs=1" width="50px" height="50px"/>
</li>
<li>
<img class="thumbnail" src="https://1.bp.blogspot.com/_138avbqsoJQ/S31zZz9qPZI/AAAAAAAABNQ/ARDHrOa5_pg/s400/Loch_Lomond.JPG" data-main="https://1.bp.blogspot.com/_138avbqsoJQ/S31zZz9qPZI/AAAAAAAABNQ/ARDHrOa5_pg/s400/Loch_Lomond.JPG" width="50px" height="50px"/>
</li>
</ul>
Use mouseover and mouseout event listeners to change the background image of your big div.
The below snippet explains it all -
function change(e){
document.getElementById("main").style.backgroundImage = `url(${e.target.src})`;
}
let imgs = document.getElementsByTagName("img");
for(let i = 0; i<imgs.length; i++){
imgs[i].addEventListener("mouseover", function(){
change(event);
});
imgs[i].addEventListener("mouseout", function(){
document.getElementById("main").style.backgroundImage = `url("https://cdn.pixabay.com/photo/2020/11/28/11/03/advent-5784271__340.jpg")`;
});
}
#main{
height: 150px;
width: 150px;
border: 3px dashed red;
background-image: url("https://cdn.pixabay.com/photo/2020/11/28/11/03/advent-5784271__340.jpg");
}
img{
height: 50px;
width: 50px;
}
<div id="main"></div>
<img src="https://cdn.pixabay.com/photo/2020/03/24/11/21/winter-4963715__340.jpg">
<img src="https://cdn.pixabay.com/photo/2019/12/10/19/15/new-years-eve-4686590__340.jpg">
<img src="https://cdn.pixabay.com/photo/2020/11/17/15/44/cup-5752775__340.jpg">
<img src="https://cdn.pixabay.com/photo/2019/05/18/13/34/branches-4211837__340.jpg">
Currently I don't know what is the structure of your html, but you can tweak this solution to fit your case.
I have created an example of the swap effect that you specified, and created a code pen of it using colors instead:
https://codepen.io/DaudWaqas/pen/xxEgxLm
<section class="main" id="main" style="background-color: #000"></section>
<div>
<Section style="background-color: orange" onmouseover="grabAndSwap(event)"></section>
<Section style="background-color: cyan" onmouseover="grabAndSwap(event)"></section>
<Section style="background-color: maroon" onmouseover="grabAndSwap(event)"></section>
<Section style="background-color: #444" onmouseover="grabAndSwap(event)"></section>
</div>
<div>
<Section style="background-color: #ff0000" onmouseover="grabAndSwap(event)"></section>
<Section style="background-color: #00ff00" onmouseover="grabAndSwap(event)"></section>
<Section style="background-color: #0000ff" onmouseover="grabAndSwap(event)"></section>
<Section style="background-color: magenta" onmouseover="grabAndSwap(event)"></section>
</div>
CSS:
.main {
height: 30vh;
width: 100%;
}
section {
height: 15vh;
width: 25%;
float: left;
}
div {
height: 15vh;
width: 100%;
}
JS:
const main = document.getElementById('main');
function grabAndSwap(event) {
var toSwapWith = event.target;
var mainColor = main.style.backgroundColor;
console.log(mainColor);
var otherColor = toSwapWith.style.backgroundColor;
console.log(otherColor);
main.style.backgroundColor = otherColor;
toSwapWith.style.backgroundColor = mainColor;
}
You can capture mouseover in Javascript and simply swap the background-image and swap back on mouseout.
const picEls= document.getElementsByClassName('small');
const largeEl = document.getElementsByClassName('large')[0];
for (let i=0; i<picEls.length; i++) {
picEls[i].addEventListener('mouseover', hovered);
picEls[i].addEventListener('mouseout', hovered);
}
function hovered(event) {
const bg = event.target.style.backgroundImage;
this.style.backgroundImage = largeEl.style.backgroundImage;
largeEl.style.backgroundImage = bg;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pic {
border-style: solid;
border-radius: 50%;
background-size: cover;
}
.large {
width: 40vw;
height: 30vw;
margin: 0 auto 0 auto;
}
.small {
display: inline-block;
width: 20vw;
height: 15vw;
margin: 2vw;
}
<div class="container">
<div class="large pic" style="background-image: linear-gradient(red,yellow);"></div>
<div class="small pic" style="background-image: linear-gradient(red,green);"></div>
<div class="small pic" style="background-image: linear-gradient(green,blue);"></div>
<div class="small pic" style="background-image: linear-gradient(blue,red);"></div>
<div class="small pic" style="background-image: linear-gradient(cyan,yellow);"></div>
<div class="small pic" style="background-image: linear-gradient(yellow,magenta);"></div>
<div class="small pic" style="background-image: linear-gradient(magenta,cyan);"></div>
<div class="small pic" style="background-image: linear-gradient(cyan,red);"></div>
<div class="small pic" style="background-image: linear-gradient(yellow, green);"></div>
</div>
i am experimenting with JavaScript to complete some drag and drop tasks like displaying ids whenever a shape is dropped into a drag area. I cant figure out how to display the ids of the shapes in the table input type of number each time a shape is dropped in the drag space.
here is the JavaScript code
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var id = ev.dataTransfer.getData("text");
if (id == "drag1" && ev.target.id == "drag-area") {
var nodeCopy = document.getElementById(id).cloneNode(true);
nodeCopy.id = incrementId();
function incrementId() {
if (!this.latestId) this.latestId = 1;
else this.latestId++;
return this.latestId;
}
ev.target.appendChild(nodeCopy);
var id = document.getElementById(latestId).id;
//display id on shape
document.getElementById(latestId).innerHTML = id;
var value = document.getElementById(latestId).id;
document.getElementById(latestId).value = value;
console.log(value);
}
if (id == "drag3" && ev.target.id == "drag-area") {
var nodeCopy = document.getElementById(id).cloneNode(true);
nodeCopy.id = incrementId();
function incrementId() {
if (!this.latestId) this.latestId = 1;
else this.latestId++;
return this.latestId;
}
ev.target.appendChild(nodeCopy);
var id = document.getElementById(latestId).id;
//display id on shape
document.getElementById(latestId).innerHTML = id;
var value = document.getElementById(latestId).id;
document.getElementById(latestId).value = value;
console.log(value);
}
}
function remove(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var del = confirm(
"You are about to DELETE this insert. Do you wish to continue?"
);
if (del) {
var el = document.getElementById(data);
el.parentNode.removeChild(el);
console.log("item deleted");
}
}
function decreasewidth() {
var id = document.getElementById(latestId).id;
var myImg = document.getElementById(id);
var currWidth = myImg.clientWidth;
if (currWidth == 50) {
myImg.style.width = currWidth - 0 + "px";
} else {
myImg.style.width = currWidth - 15 + "px";
}
}
function increaseheight() {
var id = document.getElementById(latestId).id;
var myImg = document.getElementById(id);
var currHeight = myImg.clientHeight;
if (currHeight == 500) {
myImg.style.height = currHeight + 0 + "px";
} else {
myImg.style.height = currHeight + 15 + "px";
}
}
function decreaseheight() {
var id = document.getElementById(latestId).id;
var myImg = document.getElementById(id);
var currHeight = myImg.clientHeight;
if (currHeight == 50) {
myImg.style.height = currHeight - 0 + "px";
} else {
myImg.style.height = currHeight - 15 + "px";
}
}
here is the code for the html where the table input is
<div class="table-edit">
Table:<input
class="table-id"
ondrop="drop(event)"
type="number"
value=""
/>
</div>
there is the full html code
div class="mains">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content container">
<div class="row">
<div class="col-md-12">
<div class="box box-solid">
<div class="box-header bg-teal">
<h3 class="box-title">Tables</h3>
</div>
<form action="" method="POST">
<div class="box-body">
<div class="row">
<div class="col-md-12">
<table id="example1" class="table table-striped">
<div class="table-area">
<div class="row container table-section">
<div
class="roster-box draggable-shapes col-lg-4 col-md-4 col-sm-12"
ondrop="remove(event)"
ondragover="allowDrop(event)"
>
<h1
class="text-center"
style="text-decoration: underline"
>
tables
</h1>
<div class="table-area-section">
<li>
<div
class="circle"
id="drag1"
draggable="true"
ondragstart="drag(event)"
alt="circle"
></div>
</li>
<li>
<div
class="rectangle"
id="drag3"
draggable="true"
ondragstart="drag(event)"
></div>
</li>
</div>
</div>
<div
class="drag-and-drop col-lg-8 col-md-8 col-sm-12"
>
<div
id="drag-area"
class="roster-box text-center drag-section"
ondrop="drop(event)"
ondragover="allowDrop(event)"
onselect="selectImage()"
></div>
<div class="edit-section">
<li>
<div class="table-edit">
Table:<input
class="table-id"
ondrop="drop(event)"
type="number"
value=""
/>
</div>
</li>
<li>
Width:
<div
class="btn-group"
role="group"
aria-label="Third group"
>
<button
type="button"
class="btn btn-secondary"
onclick="increasewidth()"
>
+
</button>
</div>
<div
class="btn-group"
role="group"
aria-label="Third group"
>
<button
type="button"
class="btn btn-secondary"
onclick="decreasewidth()"
>
-
</button>
</div>
</li>
<li>
Height:
<div
class="btn-group"
role="group"
aria-label="Third group"
>
<button
type="button"
class="btn btn-secondary"
onclick="increaseheight()"
>
+
</button>
</div>
<div
class="btn-group"
role="group"
aria-label="Third group"
>
<button
type="button"
class="btn btn-secondary"
onclick="decreaseheight()"
>
-
</button>
</div>
</li>
</div>
</div>
</div>
</div>
</table>
</div>
</div>
</div>
<!-- /.box-body -->
</form>
</div>
<!-- /. box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
</div>
</div>
styling in addition to bootstrap formats
.table-area-section li {
display: inline-block;
padding: 8px;
}
.drag-section {
height: 386.5px;
}
.edit-section {
padding-top: 20px;
}
.edit-section li {
list-style: none;
display: inline-block;
padding-left: 15px;
}
.input-group {
width: 35px;
}
.table-id {
width: 40px;
}
.draggable-shapes {
border: 1px solid #c3ccff44;
height: 677px;
}
.drag-and-drop {
border: 1px solid #c3ccff44;
}
.table-services > tbody > tr > td,
.table-services > tbody > tr > th,
.table-services > tfoot > tr > td,
.table-services > tfoot > tr > th,
.table-services > thead > tr > td,
.table-services > thead > tr > th {
padding: 20px;
}
.form-table {
float: right;
padding: 20px;
}
.circle {
background: rgb(168, 168, 168);
border-radius: 50%;
border: rgb(168, 168, 168) 6px solid;
width: 80px;
height: 80px;
}
.rectangle {
height: 80px;
background: rgb(168, 168, 168);
text-align: center;
border-radius: 7%;
width: 80px;
border: rgb(168, 168, 168) 6px solid;
}
also if there is a way to change the shapes of different shapes on selecting them, I would be happy to receive some idea o how to accomplish that
I have simplified the code quite a bit, but hopefully this does what you are looking for.
I assume that by id's of the shapes, you mean the number at the end of the id attribute of the shape? You could parse this out using a regex, but I have went down the simpler solution of storing this number in a data attribute.
function dragover(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("id", ev.target.dataset.id);
}
function drop(ev) {
ev.preventDefault();
var id = parseInt(ev.dataTransfer.getData("id"), 10);
inputField.value = id;
}
.shapes {
display: flex;
}
.circle {
background: rgb(168, 168, 168);
border-radius: 50%;
border: rgb(168, 168, 168) 6px solid;
width: 80px;
height: 80px;
margin: 10px;
}
.rectangle {
margin: 10px;
height: 80px;
background: rgb(168, 168, 168);
text-align: center;
border-radius: 7%;
width: 80px;
border: rgb(168, 168, 168) 6px solid;
}
.drop-area {
padding: 50px;
border: dotted 2px dimgrey;
margin: 10px;
text-align: center;
font-style: italic;
color: grey;
}
.input {
margin: 10px;
}
<div class="shapes">
<div class="circle" id="drag1" data-id="1" draggable="true" ondragstart="drag(event)"></div>
<div class="rectangle" id="drag3" data-id="3" draggable="true" ondragstart="drag(event)"></div>
</div>
<div class="drop-area" ondragover="dragover(event)" ondrop="drop(event)">
drop zone
</div>
<input id="inputField" class="input" type="number" value="0" />
I have more than 100 div elements, and I want to search/filter by textinput in js scripts by onkeyup.
function crmenu() {
var j, descc, filter, input, boxmenu, descc;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
boxmenu = document.getElementsByClassName("boxmenu");
for (j = 0; j < boxmenu.length; j++) {
if (boxmenu.innerHTML.toUpperCase().indexOf(filter) > -1) {
boxmenu[j].style.display = "";
} else {
boxmenu[j].style.display = "none";
}
}
}
div.boxmenu {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 120px;
height: 170px;
}
div.boxmenu:hover {
border: 1px solid #777;
}
div.boxmenu img {
width: 100%;
height: auto;
}
div.titlemenu {
padding: 1px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="row" style="padding-left:1px;">
<div class="boxmenu">
<a>
<img src="" alt="">
</a>
<div class="titlemenu">material </div>
</div>
<div class="boxmenu">
<a>
<img src="" alt="">
</a>
<div class="titlemenu">Human Resource </div>
</div>
<div class="boxmenu">
<a>
<img src="" alt="">
</a>
<div class="titlemenu">Financial </div>
</div>
</div>
<input type="text" id="myInput" onkeyup="crmenu ( ) " placeholder="search in input">
I couldn't find any up-to-date example project or guide for this library and what I have done so far (which doesn't work) is here: https://jsfiddle.net/k3g5xtyh/ Am I missing anything? Thanks in advance.
var Shuffle = window.shuffle;
var element = document.getElementById('grid');
var sizer = element.querySelector('.my-sizer-element');
var shuffle = new Shuffle(element, {
itemSelector: '.picture-item',
sizer: sizer // could also be a selector: '.my-sizer-element'
});
Let code it in the simplest possible way. Feel free to toggle show code snippet than execute script by running Run code snippet
var Shuffle = window.shuffle;
var element = document.getElementById('grid');
var shuffle = new Shuffle(element, {
itemSelector: '.picture-item'
});
addFilterButtons()
function addFilterButtons() {
var options = document.querySelector('.filter-options');
if (!options) {
return;
}
var filterButtons = Array.prototype.slice.call(
options.children
);
filterButtons.forEach(function(button) {
button.addEventListener('click', handleFilterClick.bind(this), false);
});
};
function handleFilterClick(evt) {
var btn = evt.currentTarget;
var isActive = btn.classList.contains('active');
var btnGroup = btn.getAttribute('data-group');
var filterGroup;
removeActiveClassFromChildren(btn.parentNode)
if (isActive) {
btn.classList.remove('active');
filterGroup = Shuffle.ALL_ITEMS;
} else {
btn.classList.add('active');
filterGroup = btnGroup;
}
shuffle.filter(filterGroup);
};
function removeActiveClassFromChildren(parent) {
var children = parent.children;
for (var i = children.length - 1; i >= 0; i--) {
children[i].classList.remove('active');
}
};
.aspect {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.aspect__inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.aspect--16x9 {
padding-bottom: 42%;
}
.picture-item {
height: 100px
}
.picture-item__inner {
position: relative;
height: 100%;
overflow: hidden;
background: #dac;
}
.col-3\#sm {
width: 33%;
padding-left: 8px;
padding-right: 8px;
min-height: 1px;
box-sizing: border-box;
}
.col-6\#sm {
width: 60%;
padding-left: 8px;
padding-right: 8px;
min-height: 1px;
box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/4.0.2/shuffle.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6#sm">
<div class="filter-options btn-group">
<button class="btn" data-group="photography">Photography</button>
<button class="btn" data-group="wallpaper">Wallpaper</button>
<button class="btn" data-group="3d">3D</button>
</div>
</div>
</div>
<div id="grid" class="row my-shuffle-container">
<figure class="col-3#sm picture-item" data-groups='["photography"]' data-date-created="2010-09-14" data-title="Baseball">
<div class="picture-item__inner">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="https://pbs.twimg.com/profile_images/2311298181/80d154u80lijwyufmcb6.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>Baseball, [photography]</figcaption>
</div>
</figure>
<figure class="col-3#sm picture-item" data-groups='["wallpaper","3d"]' data-date-created="2011-08-14" data-title="Tennis">
<div class="picture-item__inner">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="https://pbs.twimg.com/profile_images/2311298181/80d154u80lijwyufmcb6.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>Tennis, [wallpaper, 3d]</figcaption>
</div>
</figure>
<figure class="col-3#sm picture-item" data-groups='["wallpaper","3d"]' data-date-created="2009-05-27" data-title="iMac">
<div class="picture-item__inner">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="https://pbs.twimg.com/profile_images/2311298181/80d154u80lijwyufmcb6.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>iMac, [wallpaper, 3d]</figcaption>
</div>
</figure>
</div>
</div>