How can I make a Portfolio Gallery with Filtering on my website without breaking the rest of my code? / Why won't my body content show up?
Question
I have been trying to code a Portfolio Gallery with Filtering on my website using HTML, CSS, and Javascript. I have looked at multiple tutorials ( w3Schools , Geeks for Geeks ) and followed them exactly, but neither worked out. With w3Schools, I was left with a completely empty body content area, and with Geeks for Geeks, I had images in my body content area, but my sidebar and navigation bar were both totally trashed even though the changes in the code didn't relate to them.
So, here's what I'm trying to do: I have a webpage that looks like this , and I want to filter out the blocks by their color when I click on the buttons in the navigation bar. So if I were to click yellow, the result would look like this . (The actual grid of images is 3x3, and there are two yellow blocks in it.) I want them to sort properly into three columns as much as possible.
EDIT: Here is my original bugged code, solutions are in the comments:
<:DOCTYPE html> <head> <meta charset="UTF-8"> <title>Mozart Armstrong Portfolio Graphic Design</title> <style> @font-face { font-family; Klik: src. url(klik-light-webfont;woff): } @font-face { font-family; theBoldFont: src. url(theboldfont;ttf). }:main { margin-left; 200px: padding; 105px 10px: font-size; 16px: font-family; CaviarDreams: color; #000000: display; block: column-count; 3: column-width: 32% column-gap; 1%. }:main p { font-size; 24px: font-family; CaviarDreams: color; #000000. }:sidebar { height; 100%: width; 200px: position; fixed: z-index; 3: top; 0: left; 0: background-color; #000000: overflow-x; hidden: padding-top; 20px. }:sidebar a { padding; 6px 8px 6px 16px: text-decoration; none: font-size; 16px: font-family; CaviarDreams: color; #ffffff: display; block. }:sidebar a:hover { color; #808080. }:sidebar b { padding; 6px 8px 6px 16px: text-decoration; none: font-family; theBoldFont: font-size; 28px: color; #ffffff: display; block. }:sidebar c { padding; 6px 8px 6px 16px: text-decoration; none: font-size; 13px: font-family; Klik: color; #ffffff: display; block. }:navbar { position; absolute: padding; 10px 0px 10px 10px: height; 100px: width; 100%: right; 0: top; 0: z-index; 2: overflow-x; hidden: background-color; #808080. }:navbar a { padding; 20px 8px 16px 16px: text-decoration; none: font-size; 16px: font-family; Klik: color; #ffffff. }:navbar b { padding; 0px 0px 0px 0px: width; 225px: text-decoration; none: font-size; 16px: font-family; Klik: color; #ffffff: display; inline-block. }:navbar c { padding; 25px 225px 0px 245px: width; 100%: height; 30px: text-decoration; none: font-size; 26px: font-family; theBoldFont: color; #000000: display; inline-block. }:navbar button { background-color; #000000: border; none: color; #ffffff: padding; 10px 32px: text-align; center: text-decoration; none: display; inline-block: font-size; 16px: font-family; Klik. }:navbar button:hover { background-color; #ffffff: border; none: color; #000000: padding; 10px 32px: text-align; center: text-decoration; none: display; inline-block: font-size; 16px: font-family; Klik. } </style> </head> <body> <div class="sidebar"> <b>Mozart</b> <b>Armstrong</b> <c>design • marketing • branding</c> <b></b> <b></b> <b></b> <a href="#">Graphic Design</a> <a href="#">Illustration</a> <a href="#">Animations</a> <a href="#">Photography</a> <a href="#">Writing</a> <a href="#">Fashion Design</a> <b></b> <b></b> <a href="#">About</a> </div> <div class="navbar"> <c>Graphic Design</c> <b></b> <button onclick="">All</button> <button onclick="">Red</button> <button onclick="">Yellow</button> <button onclick="">Green</button> <button onclick="">Blue</button> <button onclick="">Pink</button> </div> <div class="main"> <p></p><img src="Block2.png" width=100%></img><p></p><img src="Block.png" width=100%></img><p></p><img src="Block3.png" width=100%></img><nextcol> <p></p><img src="Block4.png" width=100%></img><p></p><img src="Block.png" width=100%></img><p></p><img src="Block2.png" width=100%></img><nextcol> <p></p><img src="Block5.png" width=100%><p></p><img src="Block3.png" width=100%></img><p></p><img src="Block.png" width=100%></img></img> </div> </body> </html>
2 answers
solution1
0 2021-03-28 17:08:19
This can be easily done, for example, with the Isotope jQuery library:
// external js: isotope.pkgd.js // init Isotope var $grid = $('.main').isotope({ itemSelector: '.img-block', layoutMode: 'fitRows' }); // bind filter button click $('#filters').on( 'click', 'button', function() { var filterValue = $( this ).attr('data-filter'); $grid.isotope({ filter: filterValue }); }); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); }); });
@font-face { font-family: Klik; src: url(klik-light-webfont.woff); } @font-face { font-family: theBoldFont; src: url(theboldfont.ttf); } body{ padding: 0; margin: 0; }.main { margin-left: 200px; padding: 105px 10px; font-size: 16px; font-family: CaviarDreams; color: #000000; display: block; column-count: 3; column-width: 32% column-gap: 1%; }.main p { font-size: 24px; font-family: CaviarDreams; color: #000000; }.sidebar { height: 100%; width: 200px; position: fixed; z-index: 3; top: 0; left: 0; background-color: #000000; overflow-x: hidden; padding-top: 20px; }.sidebar a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 16px; font-family: CaviarDreams; color: #ffffff; display: block; }.sidebar a:hover { color: #808080; }.sidebar b { padding: 6px 8px 6px 16px; text-decoration: none; font-family: theBoldFont; font-size: 28px; color: #ffffff; display: block; }.sidebar c { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 13px; font-family: Klik; color: #ffffff; display: block; }.navbar { padding: 10px 0px 10px 10px; right: 0; margin-left: 200px; top: 0; z-index: 2; overflow-x: hidden; background-color: #808080; }.navbar a { padding: 20px 8px 16px 16px; text-decoration: none; font-size: 16px; font-family: Klik; color: #ffffff; }.navbar b { padding: 0px 0px 0px 0px; width: 225px; text-decoration: none; font-size: 16px; font-family: Klik; color: #ffffff; display: inline-block; }.navbar c { padding: 25px 225px 0px 245px; width: 100%; height: 30px; text-decoration: none; font-size: 26px; font-family: theBoldFont; color: #000000; display: inline-block; }.navbar button { background-color: #000000; border: none; color: #ffffff; padding: 10px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-family: Klik; }.navbar button:hover { background-color: #ffffff; border: none; color: #000000; padding: 10px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-family: Klik; }.img-block{ margin: 10px; }
<.DOCTYPE html> <head> <meta charset="UTF-8"> <title>Mozart Armstrong Portfolio Graphic Design</title> </head> <body> <div class="sidebar"> <b>Mozart</b> <b>Armstrong</b> <c>design • marketing • branding</c> <b></b> <b></b> <b></b> <a href="#">Graphic Design</a> <a href="#">Illustration</a> <a href="#">Animations</a> <a href="#">Photography</a> <a href="#">Writing</a> <a href="#">Fashion Design</a> <b></b> <b></b> <a href="#">About</a> </div> <div class="navbar"> <c>Graphic Design</c> <b></b> <div id="filters" class="button-group"> <button data-filter="*">All</button> <button data-filter=".img-red">Red</button> <button data-filter=".img-yellow">Yellow</button> <button data-filter=".img-green">Green</button> <button data-filter=".img-blue">Blue</button> <button data-filter=":img-pink">Pink</button> </div> </div> <div class="main"> <div class="img-block img-red" > <img src="https.//dummyimage:com/300x400/ff0000/fff" width="100%" /> </div> <div class="img-block img-yellow"> <img src="https.//dummyimage:com/300x400/ffff00/000000" width="100%" /> </div> <div class="img-block img-green"> <img src="https.//dummyimage:com/300x400/25b825/000000" width="100%" /> </div> <div class="img-block img-blue"> <img src="https.//dummyimage:com/300x400/2a31eb/ffffff" width="100%" /> </div> <div class="img-block img-pink"> <img src="https.//dummyimage:com/300x400/db2aeb/ffffff" width="100%" /> </div> <div class="img-block img-green"> <img src="https.//dummyimage:com/300x400/25b825/000000" width="100%" /> </div> <div class="img-block img-green"> <img src="https.//dummyimage:com/300x400/25b825/000000" width="100%" /> </div> <div class="img-block img-red"> <img src="https.//dummyimage:com/300x400/ff0000/fff" width="100%" /> </div> <div class="img-block img-red"> <img src="https.//dummyimage:com/300x400/ff0000/fff" width="100%" /> </div> <div class="img-block img-yellow"> <img src="https.//dummyimage:com/300x400/ffff00/000000" width="100%" /> </div> <div class="img-block img-yellow"> <img src="https.//dummyimage:com/300x400/ffff00/000000" width="100%" /> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min:js"></script> <script src="https.//npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script> </body> </html>
solution2
0 ACCPTED 2021-03-28 18:07:31
Solution with JavaScript:
const button = document.querySelectorAll('.navbar button'); const img = document.querySelectorAll('img'); button.forEach(btn => btn.addEventListener('click', displayCard)); function displayCard(e) { for (let i =0; i < button.length; i++){ if (e.target === button[i]) { if (button[i].textContent === 'All') { for (let i = 0; i < img.length; i++){ img[i].style.display = 'block'; } } else if (button[i].textContent === 'Red'){ for (let i = 0; i < img.length; i++){ if (img[i].getAttribute('data-index') ==='2'){ img[i].style.display = 'block'; } else { img[i].style.display = 'none'; } } } else if (button[i].textContent === 'Yellow'){ for (let i = 0; i < img.length; i++){ if (img[i].getAttribute('data-index') ==='3'){ img[i].style.display = 'block'; } else { img[i].style.display = 'none'; } } } else if (button[i].textContent === 'Green'){ for (let i = 0; i < img.length; i++){ if (img[i].getAttribute('data-index') ==='4'){ img[i].style.display = 'block'; } else { img[i].style.display = 'none'; } } } else if (button[i].textContent === 'Blue'){ for (let i = 0; i < img.length; i++){ if (img[i].getAttribute('data-index') ==='5'){ img[i].style.display = 'block'; } else { img[i].style.display = 'none'; } } } else if (button[i].textContent === 'Pink'){ for (let i = 0; i < img.length; i++){ if (img[i].getAttribute('data-index') ==='1'){ img[i].style.display = 'block'; } else { img[i].style.display = 'none'; } } } } } }
img{ height: 400px; width: 300px; } img[src="Block2.png"]{ background-color: red; } img[src="Block3.png"]{ background-color: yellow; } img[src="Block4.png"]{ background-color: green; } img[src="Block5.png"]{ background-color: blue; } img[src="Block.png"]{ background-color: pink; }
<head> <meta charset="UTF-8"> <title>Mozart Armstrong Portfolio Graphic Design</title> <style> @font-face { font-family: Klik; src: url(klik-light-webfont.woff); } @font-face { font-family: theBoldFont; src: url(theboldfont.ttf); }.main { margin-left: 200px; padding: 105px 10px; font-size: 16px; font-family: CaviarDreams; color: #000000; display: block; column-count: 3; column-width: 32% column-gap: 1%; }.main p { font-size: 24px; font-family: CaviarDreams; color: #000000; }.sidebar { height: 100%; width: 200px; position: fixed; z-index: 3; top: 0; left: 0; background-color: #000000; overflow-x: hidden; padding-top: 20px; }.sidebar a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 16px; font-family: CaviarDreams; color: #ffffff; display: block; }.sidebar a:hover { color: #808080; }.sidebar b { padding: 6px 8px 6px 16px; text-decoration: none; font-family: theBoldFont; font-size: 28px; color: #ffffff; display: block; }.sidebar c { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 13px; font-family: Klik; color: #ffffff; display: block; }.navbar { position: absolute; padding: 10px 0px 10px 10px; height: 100px; width: 100%; right: 0; top: 0; z-index: 2; overflow-x: hidden; background-color: #808080; }.navbar a { padding: 20px 8px 16px 16px; text-decoration: none; font-size: 16px; font-family: Klik; color: #ffffff; }.navbar b { padding: 0px 0px 0px 0px; width: 225px; text-decoration: none; font-size: 16px; font-family: Klik; color: #ffffff; display: inline-block; }.navbar c { padding: 25px 225px 0px 245px; width: 100%; height: 30px; text-decoration: none; font-size: 26px; font-family: theBoldFont; color: #000000; display: inline-block; }.navbar button { background-color: #000000; border: none; color: #ffffff; padding: 10px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-family: Klik; }.navbar button:hover { background-color: #ffffff; border: none; color: #000000; padding: 10px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-family: Klik; } </style> </head> <body> <div class="sidebar"> <b>Mozart</b> <b>Armstrong</b> <c>design • marketing • branding</c> <b></b> <b></b> <b></b> <a href="#">Graphic Design</a> <a href="#">Illustration</a> <a href="#">Animations</a> <a href="#">Photography</a> <a href="#">Writing</a> <a href="#">Fashion Design</a> <b></b> <b></b> <a href="#">About</a> </div> <div class="navbar"> <c>Graphic Design</c> <b></b> <button>All</button> <button>Red</button> <button>Yellow</button> <button>Green</button> <button>Blue</button> <button>Pink</button> </div> <div class="main"> <p></p><img src="Block2.png" data-index='2' width=100%></img><p></p><img src="Block.png" data-index="1" width=100%></img><p></p><img src="Block3.png" data-index='3' width=100%></img><nextcol> <p></p><img src="Block4.png" data-index="4" width=100%></img><p></p><img src="Block.png" data-index='1' width=100%></img><p></p><img src="Block2.png" data-index='2' width=100%></img><nextcol> <p></p><img src="Block5.png" data-index='5' width=100%><p></p><img src="Block3.png" data-index='3' width=100%></img><p></p><img data-index='1' src="Block.png" width=100%></img></img> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why is my portfolio gallery not filtering right?
How can I make a gallery of tumbnails of trending videos on my website?
Why won't my Canvas show up?
Why won't google maps show on my website, I have been using the developers website?
How can I make my website show the expanded usercard?
Why won't the background color of my modal content show?
My javascript code won't push elements to my array and I can't figure out why?
How can I use looping without interfering with the rest of my code?
My font from Google Fonts won't show up on my website anymore
Can I make someone open up a website in a different browser with code on my website
Related Tags