Moving image to first position after hide other elements

Question

I need your help. When I fillter my image gallery and choose image that is on the second, third ... etc position, image is static, doesn't change position to the first from the left dynamically. ( see ...

Accepted Answer

Your code is pretty close to working, if I remove the grid class (on the thumbnails div) it would produce your desired behavior without any additional modifications, but you most likely want the grid behavior. Even though you’re hiding the img elements, their parent elements (a anchor elements) are not hidden. You should be able to hide/show the parent elements of the images (the a anchor elements) to get your desired behavior.As you can see from the modified js below, it’s just one extra .parent() call that was adjusted on your show/hide selectors:$('#portfolio').find('img').parent().show(); $('#portfolio').find('img').not(theFilter).parent().hide();Just one additional suggestion for future questions: typically it’s a lot easier for people to answer you question + see what you’re seeing by using the built in Javascript/HTML/CSS snippet tool built into StackOverflow (for images you can use something like the placeholder site I used below). $(document).ready( function () { $('.tabs').find('a').click( function (e) { var theFilter = $(this).data('filter'); e.preventDefault(); $('.tabs').find('a').removeClass('active'); $(this).addClass('active'); $('#portfolio').find('img').parent().show(); $('#portfolio').find('img').not(theFilter).parent().hide(); }); }); @font-face { font-family: "ISOCT3"; src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot"); src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg"); } body {} /** RESET **/ * { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; } html, body { height: 100%; } /** THUMBNAILS GLOBALS **/ .thumbnails { display: flex; flex-wrap: wrap; } .thumbnails a { height: 300px; margin: 2px; border-radius: 2px; overflow: hidden; } .thumbnails img { height: 100%; object-fit: cover; transition: transform .3s; } .thumbnails a:hover img { transform: scale(1.05); } /** THUMBNAILS GRID **/ .thumbnails.grid a { width: calc(25% - 4px); } .thumbnails.grid a.double { width: calc(50% - 4px); } .thumbnails.grid img { width: 100%; } /** RESPONSIVENESS **/ @media (max-width: 1500px) { .thumbnails.grid a { width: calc(33.33% - 4px); } } @media (max-width: 1000px) { .thumbnails.grid a { width: calc(50% - 4px); } .thumbnails.grid a.double { width: calc(100% - 4px); } } @media (max-width: 500px) { .thumbnails.grid a { width: calc(100% - 4px); } } .logo { font-family: ISOCT3; font-size: 38px; font-weight: bolder; margin: auto; padding-top: 28px; padding-bottom: 20px; max-width: 80%; color: #b8860b; text-align: center; letter-spacing: 3px; } @media only screen and (max-width: 800px) { .logo { font-family: ISOCT3; font-size: 24px; font-weight: bolder; display: block; color: #b8860b; padding-top: 25px; margin: 0px auto 15px auto; max-width: 90%; height: auto !important; letter-spacing: 2px; } } .logo_link { color: inherit; /* blue colors for links too */ text-decoration: inherit; /* no underline */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .group_link { background-color: #D29990; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; text-shadow: 0 -1px 1px saturate(darken($pink, 20%), 20%); text-decoration: none; color: #fff; padding: 5px 20px; line-height: 50px; @include border-radius(50%); display: inline-block; @include transition(all .2s ease-in-out); &:hover { background-color: saturate($pink, 20%); } } .nav_buttons { margin: 0 auto; padding-left: 20px; }

Advertisement

Answer