I'm trying to create the below programmatically. This part is easy and done.
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-start align-items-center" style="border-radius: 0;">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 30px; width: 30px;">
The current link item
</a>
The issue is that when I do it, it ends up like this:
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-start align-items-center" style="border-radius: 0;">
The current link item
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 30px; width: 30px;">
</a>
The text "The current link item" is above the image instead of below it. How would I change it to make the text below the img tag so that it appears like this:
[img] text
instead of like this:
text [img]
also looking to add the to make a space between the image and text
function setAttributes(el, attrs) {
for(var key in attrs) {
el.setAttribute(key, attrs[key]);
}
}
test = document.getElementById('test');
let a = document.createElement('a');
let img = document.createElement('img');
if (element['icon_url'] === null) {
img.src = 'https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png';
} else {
img.src = element['icon_url'];
}
let classesToAdd = [
'list-group-item',
'list-group-item-action',
'd-flex',
'justify-content-start',
'align-items-center'
];
a.classList.add(...classesToAdd);
setAttributes(a, {
'href': '#',
'id': element['id']
});
a.textContent = element['name'];
a.appendChild(img);
test.appendChild(a);
<div id="test"></div
You can use the document.createTextNode(data) function with document.appendChild(aChild).
Read more about MDN | Document.createTextNode().
This is what this could look like:
let test = document.getElementById("test");
let a = document.createElement("a");
let img = document.createText("img");
img.src = "https://MY_IMAGE";
a.appendChild(img); // append img element first
a.appendChild(document.createTextNode("<-- Text Aside Img")); // append text node AFTER img element
test.appendChild(a);
to add elements before the existing children you can use
a.prepend(img);
instead of
a.appendChild(img);
read more about prepend
Related
Forgive me, it's been a while since figuring out anything with jQuery, I need some guidance/help: I'd love to swap an image 00x-a for 00x-b, but not just for a single image, but for many. Once the BTN below an IMG is clicked, I'd love to swap the IMG above for 00x-b while resetting other IMGs to 00x-a.
<div>
<img id="swap_this" src="img-001-a.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img id="swap_this" src="img-002-a.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img id="swap_this" src="img-003-a.jpg">
<a class="button">Change-IMG</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".button").click(function(){
$("#swap_this").attr()({
"src":"img-001-b.jpg";
})
})
});
</script>
This should do it. Only the first picture is set to img-001-a.jpg
var arr = ['img-001-a.jpg', 'img-002-a.jpg', 'img-003-a.jpg']
$.each($('.swap_this'), function(index, value) {
if(index == 0) {
$(this).attr('src', arr[0])
console.log($(this).attr('src'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img class="swap_this" src="img-001-b.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img class="swap_this" src="img-002-b.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img class="swap_this" src="img-003-b.jpg">
<a class="button">Change-IMG</a>
</div>
Tried to follow up on your answer, but ended up with something else. The below does what I need, but can it be written with "each" or using a for-loop to iterate through? Thx.
// clicking btn_100
$('.btn_100').click(function(e) {
// reset all IMG to version -a.gif..
$(".img_100").attr('src','img-100-a.gif');
$(".img_099").attr('src','img-099-a.gif');
$(".img_098").attr('src','img-098-a.gif');
// set IMG_100 ver -b.gif..
$(".img_100").attr('src','img-100-b.gif');
});
// clicking btn_099
$('.btn_099').click(function(e) {
// reset all IMG to version -a.gif..
$(".img_100").attr('src','img-100-a.gif');
$(".img_099").attr('src','img-099-a.gif');
$(".img_098").attr('src','img-098-a.gif');
// set IMG_100 ver -b.gif..
$(".img_099").attr('src','img-099-b.gif');
});
// and so on..
Maybe this could work…
for(a=1; a<=100; a++) {
// create fns for all btns
$(".btn_" + a).click(function(e) {
// reset all IMG to version -a.gif..
for(i=1; i<=100; i++) {
$(".img_" + i).attr("src","image-" + i + "-a.gif");
}
// set specific IMG to version -b.gif..
$(".img_" + a).attr("src","image-" + a + "-b.gif");
});
}
I am trying to make a script that will take the images from one div element and put it to div rndmImage randomly on button click, I should see images when document is loaded, but the new div where images should go after click must be empty until click heapends. And I need only JavaScript, no jQuery, alse i can not change the html, and it has to work for any number of images. So if you have some ideas that would be great. Here's my code.
window.addEventListener('load', start, false);
function start() {
var butt = document.getElementsByTagName('button')[0];
var rnImg = document.getElementsByClassName('ekran');
var pictures = document.getElementsByTagName('img');
var choose = Math.floor(Math.random()*pictures.length);
butt.addEventListener('click', menjaj, false);
function menjaj(e) {
var new = e.button;
var img = [];
for(var i = 0; i< pictures.length; i++) {
var dodaj = img[i];
img.push(dodaj);
}
//ekran.src = 'slike/' + slike[izbor] + '.jpg';
}
}
<body>
<div class="wrapper">
<div>
<img src="slike/leto1.jpg" alt="leto1">
<img src="slike/leto2.jpg" alt="leto2">
<img src="slike/leto3.jpg" alt="leto3">
<img src="slike/leto4.jpg" alt="leto4">
<img src="slike/leto5.jpg" alt="leto5">
<img src="slike/leto6.jpg" alt="leto6">
<img src="slike/leto7.jpg" alt="leto7">
<img src="slike/leto8.jpg" alt="leto8">
<img src="slike/leto9.jpg" alt="leto9">
</div>
<div>
<button type="button">choose</button>
</div>
<div class="rndmImage"></div>
</div>
</body>
This is a working snippet of your code:
window.addEventListener('load', start, false);
function start () {
var butt = document.getElementsByTagName('button')[0];
var rnImg = document.getElementsByClassName('rndmImage')[0]; //Change selector to existing class and select the first (the only) one
var pictures = document.getElementsByTagName('img');
butt.addEventListener('click', menjaj, false);
function menjaj (e) {
// var new = e.button;// 'new' is reserved word in JS, you can't use it as variable name
// var btn = e.button;// but this line is useless
var choose = Math.floor(Math.random() * pictures.length); //better move this line inside this function to get rundom image every button clicks
var img = document.createElement('img'); //creates new img tag
img.src = pictures[choose].src;
rnImg.innerHTML = ''; //to delete previous image
rnImg.appendChild(img);
// var img = []; //useless lines of code
// for(var i = 0; i< pictures.length; i++) {
// var dodaj = img[i];
// img.push(dodaj);
// }
//ekran.src = 'slike/' + slike[izbor] + '.jpg';
}
}
welcome to StackOverflow!
I would first hide the .wrapper > div img as that will prevent the images to show, then, append a data-pos to help select the position and simply randomize them and pick the src to show on the placeholder
and remember that you have a <div> as placeholder, so you can't assign src, only if you change it to <img>
so, something like this 😊
function chooseImg() {
// get total images available
var totalImages = document.querySelectorAll('.wrapper > div img').length
log('totalImages', totalImages)
// get a random position
var rndPosition = Math.floor(Math.random() * totalImages)
log('rndPosition', rndPosition)
// get hold of the image for such position
var rndImage = document.querySelector('.wrapper > div img[data-pos="' + rndPosition + '"]')
log('rndImage', rndImage)
// assign the source to the DIV
document.querySelector('.rndmImage').style = 'background-image: url("' + rndImage.src + '")'
}
function log(txt, obj) {
console.log(txt, obj)
}
.wrapper > div img {
display: none;
}
.rndmImage {
background-size: contain;
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
<div class="wrapper">
<div>
<img data-pos="0" src="https://randomwordgenerator.com/img/picture-generator/54e5d2434953a514f1dc8460962e33791c3ad6e04e507440742f7cd09645cc_640.jpg" alt="leto1">
<img data-pos="1" src="https://randomwordgenerator.com/img/picture-generator/54e2d1404a57a814f1dc8460962e33791c3ad6e04e5074417c2d78d19f44c4_640.jpg" alt="leto2">
<img data-pos="2" src="https://randomwordgenerator.com/img/picture-generator/57e2d5444851a414f1dc8460962e33791c3ad6e04e50744172287ad2914fc4_640.jpg" alt="leto3">
<img data-pos="3" src="https://randomwordgenerator.com/img/picture-generator/51e8d0444f56b10ff3d8992cc12c30771037dbf85254794e722c73d19245_640.jpg" alt="leto4">
<img data-pos="4" src="https://randomwordgenerator.com/img/picture-generator/53e4d2464a56a914f1dc8460962e33791c3ad6e04e507440722d7cd39345c1_640.jpg" alt="leto5">
<img data-pos="5" src="https://randomwordgenerator.com/img/picture-generator/57e9dc434b5ba414f1dc8460962e33791c3ad6e04e50744172297bd5934cc4_640.jpg" alt="leto6">
<img data-pos="6" src="https://randomwordgenerator.com/img/picture-generator/55e1dc4b4254ad14f1dc8460962e33791c3ad6e04e507440722d72d09249c7_640.jpg" alt="leto7">
<img data-pos="7" src="https://randomwordgenerator.com/img/picture-generator/57e9d4474e54a814f1dc8460962e33791c3ad6e04e50744172297cdd974cc0_640.jpg" alt="leto8">
<img data-pos="8" src="https://randomwordgenerator.com/img/picture-generator/53e6dc404951b10ff3d8992cc12c30771037dbf852547848702e7ed19348_640.jpg" alt="leto9">
</div>
<div>
<button type="button" onclick="chooseImg()">choose</button>
</div>
<div class="rndmImage"></div>
</div>
<div class="wrapper">
<img src="../Assets1/Image/1.svg" alt="" />
<img src="../Assets1/Image/2.svg" alt="" />
<img src="../Assets1/Image/3.svg" alt="" />
</div>
<button>Click</button>
<div class="randomImageContainer"></div>
const button = document.querySelector('button');
button.addEventListener('click', randomImage);
function randomImage() {
const image = document.querySelectorAll('.wrapper > img');
const randomImageContainer = document.querySelector('.randomImageContainer');
let randomNumber = Math.floor(Math.random() * image.length);
const img = document.createElement('img');
img.src = image[randomNumber].src;
randomImageContainer.appendChild(img);
}
You can do this with plain javascript like this:
document.querySelector("button").addEventListener("click", () => {
var imgElements = document.querySelectorAll(".wrapper img");
document.querySelector(".rndmImage").innerHTML = imgElements[Math.floor(Math.random() * imgElements.length)].outerHTML;
});
<div class="wrapper">
<div>
<img src="slike/leto1.jpg" alt="leto1">
<img src="slike/leto2.jpg" alt="leto2">
<img src="slike/leto3.jpg" alt="leto3">
<img src="slike/leto4.jpg" alt="leto4">
<img src="slike/leto5.jpg" alt="leto5">
<img src="slike/leto6.jpg" alt="leto6">
<img src="slike/leto7.jpg" alt="leto7">
<img src="slike/leto8.jpg" alt="leto8">
<img src="slike/leto9.jpg" alt="leto9">
</div>
<div>
<button type="button">choose</button>
</div>
<div class="rndmImage"></div>
</div>
If you're able to use randojs, you can even simplify the randomness and make it all cryptographically secure like this:
document.querySelector("button").addEventListener("click", () => document.querySelector(".rndmImage").innerHTML = rando(document.querySelectorAll(".wrapper img")).value.outerHTML);
<script src="https://randojs.com/2.0.0.js"></script>
<div class="wrapper">
<div>
<img src="slike/leto1.jpg" alt="leto1">
<img src="slike/leto2.jpg" alt="leto2">
<img src="slike/leto3.jpg" alt="leto3">
<img src="slike/leto4.jpg" alt="leto4">
<img src="slike/leto5.jpg" alt="leto5">
<img src="slike/leto6.jpg" alt="leto6">
<img src="slike/leto7.jpg" alt="leto7">
<img src="slike/leto8.jpg" alt="leto8">
<img src="slike/leto9.jpg" alt="leto9">
</div>
<div>
<button type="button">choose</button>
</div>
<div class="rndmImage"></div>
</div>
Try this:
this is my image in HTML file
<snap id="image" class="btn btn-warning" onclick="changeImage()">Image</snap>
<image id="imagechange" src="https://picsum.photos/200/300" ></image>
my javascript file
imgcount = 0;
function changeImage() {
document.getElementById("imagechange").src =
"https://picsum.photos/200/" + (300 + imgcount);
imgcount++;
}
everytime you click button you get a new image
I would like to combine the following javascript into one function. I believe this can be done with an array of id's instead of what i did. Suggestions are of course welcome.
So in my code i just copy/paste the code and change the ids:
thumbnail1, primary1
It's a boostrap 4 page with jquery-3.4.1 LINK to page: https://tools.apotamiefsi.info/service.html#_
I am currently studying some js, But i am really new on this. Sorry for any mistakes that i may have made, its my first question here although i have read 1000 answers :P
IF i knew how to use vars i would not ask :) As i said i have no clue about js.
HTML:
<a id="linkwed2" href="#img1" style="display: contents;"><main href="#img21" class="primary primary2" style="background-image: url(/images/products/wringers/wringer_730/Wringer.jpg)"></main></a>
<div class="row justify-content-center">
<div class="container thumbnails" style="display:contents;">
<a class="selected thumbnail thumbnail2" data-ref="#img21" data-big="/images/products/wringers/wringer_730/Wringer.jpg" style="padding: 6px;">
<div class="thumbnail-image" style="background-image: url(/images/products/wringers/wringers_thumbs/wringer_730/Wringer.jpg)"></div>
</a>
<a class="thumbnail2" data-ref="#img22" data-big="/images/products/wringers/wringer_730/Wringer2.jpg" style="padding: 6px;">
<div class="thumbnail-image" style="background-image: url(images/products/wringers/wringers_thumbs/wringer_730/Wringer2.jpg)"></div>
</a>
<a class="thumbnail2" data-ref="#img23" data-big="/images/products/wringers/wringer_730/WringerSteady.jpg" style="padding: 6px;">
<div class="thumbnail-image" style="background-image: url(/images/products/wringers/wringers_thumbs/wringer_730/WringerSteady.jpg)"></div>
</a>
</div>
</div>
jQuery:
$('.thumbnail1').on('click', function() {
var clicked = $(this);
var newSelection = clicked.data('big');
var $img = $('.primary1').css("background-image","url(" + newSelection + ") ");
clicked.parent().find('.thumbnail1').removeClass('selected');
clicked.addClass('selected');
$('.primary1').empty().append($img.hide().fadeIn('slow'));
});
$('.thumbnail2').on('click', function() {
var clicked = $(this);
var newSelection = clicked.data('big');
var $img = $('.primary2').css("background-image","url(" + newSelection + ") ");
clicked.parent().find('.thumbnail2').removeClass('selected');
clicked.addClass('selected');
$('.primary2').empty().append($img.hide().fadeIn('slow'));
});
The code for the light-box which is irrelevant
jquery:
$('.thumbnail1').on('click', function() {
var clicked = $(this);
var neaSelection = clicked.data('ref');
linkwed.href = (neaSelection);
});
$('.thumbnail2').on('click', function() {
var clicked = $(this);
var neaSelection2 = clicked.data('ref');
linkwed2.href = (neaSelection2);
});
And so on, i have like 7 on one page.
I expect the result to be something like:
an array of ids that would be matched with the clicked
image and then the above code without alternatives:
$('.ARRAY_ITEM').on('click', function() {
var clicked = $(this);
var newSelection = clicked.data('big');
var $img = $('.ARRAY2_ITEM').css("background-image","url(" + newSelection + ") ");
clicked.parent().find('.ARRAY_ITEM').removeClass('selected');
clicked.addClass('selected');
$('.ARRAY2_ITEM').empty().append($img.hide().fadeIn('slow'));
});
Your code/comments indicate a single "primary" image with a number of "thumbs" that update that image based on data-big attribute on each thumb.
Within the '.click' event, you can use this to refer to the thumb that was clicked, this gives you the new image url.
Giving each thumb the same class thumb and using this means you can write a single click handler.
Here's an example using text (from data- the same as your url) in a demonstrable form, showing all the concepts. You'll need to make tweaks such as setting the primary img src= to the new url, but the concepts are the same.
I've also added a simple method to show which item is selected as that was also part of the original code.
$(".thumb").click(function() {
var newcontent = $(this).data("big");
$(".primary").text(newcontent);
$(".thumb.selected").removeClass("selected");
$(this).addClass("selected");
})
.thumb { float:left; border: 1px solid #CCC; height:30px; cursor:pointer; }
.primary { clear:both; border: 1px solid blue; height: 60px; }
.selected { border: 1px solid green; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='thumb' data-big='THUMB1'>thumb1</div>
<div class='thumb' data-big='THUMB2'>thumb2</div>
<div class='thumb' data-big='THUMB3'>thumb3</div>
<div class='thumb' data-big='THUMB4'>thumb4</div>
<div class='primary'>
PRIMARY
</div>
<div class="row justify-content-center">
<div class="container thumbnails" style="display:contents;">
<a class="selected thumbnail thumbnail2 main-thumb" data-ref="#img21"
data-big="/images/products/wringers/wringer_730/Wringer.jpg" style="padding: 6px;">
<div class="thumbnail-image"
style="background-image: url('https://www.edustoke.com/images/login-image.png')"></div>
</a>
<a class="thumbnail2 main-thumb" data-ref="#img22" data-big="/images/products/wringers/wringer_730/Wringer2.jpg"
style="padding: 6px;">
<div class="thumbnail-image"
style="background-image: url('https://www.edustoke.com/images/login-image.png')"></div>
</a>
<a class="thumbnail2 main-thumb" data-ref="#img23"
data-big="/images/products/wringers/wringer_730/WringerSteady.jpg" style="padding: 6px;">
<div class="thumbnail-image"
style="background-image: url('https://www.edustoke.com/images/login-image.png')"></div>
</a>
</div>
</div>
$('.main-thumb').on('click', function () {
var clicked = $(this);
var newSelection = clicked.data('big');
var $img = clicked.css("background-image", "url(" + newSelection + ") ");
$(clicked).addClass('selected').siblings().removeClass('selected');
$(clicked).empty().append($img.hide().fadeIn('slow'));
});
I'm trying to pull a link from the following html. There's lots of bits of HTML like this one in an array.
tweets[0] is:
var tweets = Array.from(document.querySelectorAll("[class ^= AdaptiveMedia-ph]"));
console.log(tweets);
<div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" data-element-context="platform_photo_card" style="background-color:rgba(51,64,18,1.0);" data-dominant-color="[51,64,18]">
<img data-aria-label-part="" src="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" alt="A tree" style="width: 100%; top: -0px;">
</div>
How do I go about actually pulling the link in "src" and the alt text from "alt" from the HTML text? Thanks in advance!
Like this:
var tweets = document.querySelectorAll("[class ^= AdaptiveMedia-ph]");
for (var i=0;i<tweets.length;i++) {
console.log("data-image-url",tweets[i].getAttribute("data-image-url"));
var img = tweets[i].querySelector("img");
console.log("image-url",img.src,"alt",img.alt);
}
<div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" data-element-context="platform_photo_card" style="background-color:rgba(51,64,18,1.0);" data-dominant-color="[51,64,18]">
<img data-aria-label-part="" src="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" alt="A tree" style="width: 100%; top: -0px;">
</div>
Would be easier if you would select directly the img elements and then just .map() the results:
// Select img inside the cards
var tweets = Array.from(document.querySelectorAll("[class ^= AdaptiveMedia-ph] img"));
var imgData = tweets.map(e => ({src: e.src, alt: e.alt}));
console.log(imgData);
<div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" data-element-context="platform_photo_card" style="background-color:rgba(51,64,18,1.0);" data-dominant-color="[51,64,18]">
<img data-aria-label-part="" src="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" alt="A tree" style="width: 100%; top: -0px;">
</div>
So I'm trying to put together a Javascript toggle for my photography portfolio site. My goal is to be able to click a button labeled Show Only Sunsets and hide every image without a "Sunsets" Class. The code I've come up with below ALMOST works, but there's a major flaw:
This code only preserves the visibility of images such as "1.jpg" below whose Class is exactly/only "Sunsets" (or "NSFW," or whatever). But often I'll need to give images more than one class, for example to differentiate verticals, or images that fall into multiple categories. So I need the code to preserve the visibility of any image such as "2.jpg" below which has "Sunsets" (or whatever) anywhere in its Class.
JS:
<script>
function filterOn(imageClass) {
var image = document.getElementsByTagName('figure');
for (i = 0; i < image.length; i++) {
if (image[i].className != imageClass) {
image[i].style.display = 'none';
}
}
document.getElementById(imageClass + '-off').innerHTML = 'Undo Filter';
document.getElementById(imageClass + '-off').setAttribute('onClick', "filterOff('" + imageClass + "')");
document.getElementById(imageClass + '-off').id = imageClass + '-on';
}
function filterOff(imageClass) {
var image = document.getElementsByTagName('figure');
for (i = 0; i < image.length; i++) {
if (image[i].className != imageClass) {
image[i].style.display = 'inline-block';
}
}
document.getElementById(imageClass + '-on').innerHTML = 'Show Only ' + imageClass;
document.getElementById(imageClass + '-on').setAttribute('onClick', "filterOn('" + imageClass + "')");
document.getElementById(imageClass + '-on').id = imageClass + '-off';
}
</script>
HTML:
<ul>
<li id="Sunsets-off" onClick="filterOn('Sunsets')">Show Only Sunsets</li>
<li id="NSFW-off" onClick="filterOn('NSFW')">Show Only NSFW</li>
</ul>
<img class="Sunsets" src="1.jpg">
<img class="vertical Sunsets" src="2.jpg">
<img class="NSFW vertical" src="3.jpg">
<img class="Architectural" src="4.jpg">
<img class="Sunsets Landscapes" src="5.jpg">
<img class="Abstract" src="6.jpg">
<img class="NSFW LondonAndrews" src="7.jpg">
That test:
if (image[i].className != imageClass) {
will indeed do a check against the whole class string.
There's the classList API for doing what you want, replacing your test with:
if (!image[i].classList.contains(imageClass)) {
I would simplify it by adding a class name to all images so you can easily target all the images, then use a toggled class to hide the images you don't want to see. this also gives you the ability to use css3 animations to fade the images you don't want to see.
function filterOn( clazz ){
// get all the images using the additional img class
var images = slice(document.getElementsByClassName('img'));
// hide all the images
var ret = images.map(function( image ){
image.classList.add('hide');
return image;
})
// reduce the images to only contain those you want to show
.filter(function( image ){
return image.classList.contains( clazz );
})
// show the image by removing the hide class
.forEach(function( image ){
image.classList.remove('hide');
});
}
// show all images
function showAll(){
var images = slice(document.getElementsByClassName('img'));
images.forEach(function( image ){
image.classList.remove('hide');
});
}
// helper function to get an array from an array like object
function slice( arrayLike ){
return Array.prototype.slice.call( arrayLike );
}
.img {
display: block;
float: left;
margin-left: .8em;
border: .3em solid #aaa;
}
.hide {
display: none;
}
.filters {
display: block;
width: 100%;
float: left;
}
.Sunsets {
border: .3em solid orange;
}
.NSFW {
border: .3em solid magenta;
}
<nav class="filters">
<button id="Sunsets-off" onClick="filterOn('Sunsets')">Show Only Sunsets</button>
<button id="NSFW-off" onClick="filterOn('NSFW')">Show Only NSFW</button>
<button id="show-all" onClick="showAll()">Show All</button>
</nav>
<!-- I added an img class to the images for ease of use later -->
<section class="images">
<img class="img Sunsets" src="http://placehold.it/50/50">
<img class="img vertical Sunsets" src="http://placehold.it/50/50">
<img class="img NSFW vertical" src="http://placehold.it/50/50">
<img class="img Architectural" src="http://placehold.it/50/50">
<img class="img Sunsets Landscapes" src="http://placehold.it/50/50">
<img class="img Abstract" src="http://placehold.it/50/50">
<img class="img NSFW LondonAndrews" src="http://placehold.it/50/50">
</section>