Need to conceal certain images in Isotope, but ensure they can easily be revealed when necessary?

I have a collection of various images on my website coded with isotope. My question is, how can I hide specific images that I don't want to display initially, but have them appear when needed? I have managed to create a "show all" list using the code ":not(.new, .black)", but before the user clicks on "show all," all images are shown without any filtering. Here's my code:


   <div class="container">
           <section>
               <ul class="portfolio_filters"></a>
                     <li><a href="#" data-filter=":not(.new,.black,industrial,.mix).all">Show all</a></li>
                     <li><a href="#" data-filter=".new">New Logos</a></li>                                      
                     <li><a href="#" data-filter=".black ">Black & White</a></li>                            
                     <li><a href="#" data-filter=".industrial">Industrial</a></li>                            
                     <li><a href="#" data-filter=".mix">Mix</a></li>                                   
                </ul>
           </section>

Image link


            <section class="portfolio_masonry">

                <div class="row isotope_portfolio_container">

                   <div class="new col-sm-4 col-md-4">
                          <div class="portfolio_item"> <a href="images/portfolio/lenses.jpg" class="lightbox">  <img src="images/portfolio/lenses.jpg" alt="Community & Non-Profit">
                               <div class="overlay">
                                    <div class="desc">
                                         <h4>Lenses to Their World</h4>
                                         <span class="cross"></span> </div></a>
                               </div>
                               </a> </div>
                     </div>

Here is my isotopes code


//------ISOTOPE-------------------------------------    

// cache container
var container = jQuery('.isotope_portfolio_container');
// initialize isotope
 container.isotope({
});
jQuery('.portfolio_filters a[data-filter="*"]').addClass('active');
// filter items when filter link is clicked
jQuery('.portfolio_filters a').click(function(){
  jQuery('.portfolio_filters a').removeClass('active');
  jQuery(this).addClass('active');
  var selector = jQuery(this).attr('data-filter');
  container.isotope({ filter: selector });
  return false;
});

How can I hide certain images on the start page without clicking on one of the lists, and then make them visible in the selected lists? Thank you in advance.

Answer №1

It seems like your goal is to conceal certain images when the page first loads, and then reveal them once filtering begins or all are shown using filter navigation, am I correct?

To achieve this, consider adding a .invis class to the container element that holds your image and related information.

For example:

<div class="new col-sm-4 col-md-4 invis">

Answer №2

If you're interested in filtering, check out the page on Isotope's Filtering feature (). By adding a filter like '.new', only items with that specific class will be displayed when the page first loads.

$container.isotope({ filter: '.new' });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method to ensure a TALL table header is repeated on every page in Chrome?

First time poster =) I am currently facing an issue while trying to print a long table and have the table header repeat on each page. The problem arises when the height of the <thead> reaches a certain threshold, specifically 242px in Chrome 87.0.42 ...

Is HTML5 capable of supporting a multi-file uploader system in browsers?

Can you tell me which web browsers currently support the ability to select multiple files in an upload form, as introduced in the HTML5 spec? And does Adobe AIR also support this feature? As a bonus question, I'm curious if there are any JavaScript l ...

What are the steps for sharing and sending content using email?

I have a website and I'm looking for a way to post content via email, similar to popular social networks like Facebook and Flickr. For example, I'd like to send a message to '[email protected]'. The title would be stored in a MySQ ...

Although there may be some issues with tslint, the functionality is operating smoothly

I am in the process of learning tslint and typescript. Currently, I am facing an issue that I need help with. Could you provide guidance on how to resolve it? Despite conducting some research, I have been unable to find a solution. The relevant code snippe ...

Issue with validating alphanumeric value with multiple regex patterns that allow special characters

I have created a regular expression to validate input names that must start with an alphanumeric character and allow certain special characters. However, it seems to be accepting invalid input such as "sample#@#@invalid" even though I am only allowing sp ...

Encountering an issue with retrieving the nth element using Python Selenium

<div class="booking-classes"> <h3 style="text-align: center;"> <p><a href="https://foreupsoftware.com/index.php/booking/20290#/teetimes" style="background-position:0px 0px;"><b> ...

Getting the dimensions of an image using a path in JavaScript

I am trying to display a div with an image, its name, size, and download link using jQuery. Here is the code I have created: var image = 'image/example.png' $('#download').attr("href", result2); $('.image').attr("src", re ...

Creating a blueprint for my AJAX setup to effectively incorporate a callback function

I'm currently working with AJAX to fetch timezone information in a function, but I need it to return the result. I've come to realize that AJAX is asynchronous, so I require a callback function. Although I have seen examples, I am struggling to u ...

Customize the appearance of disabled dates in the eonasdan-datetimepicker styling

I am seeking to customize the default styles for the "eonasdan-datetimepicker" (https://github.com/Eonasdan/bootstrap-datetimepicker) by implementing a basic hover message feature. The CSS attributes currently applied to disabled dates are as follows: .bo ...

Upon loading a website, the Chrome browser will automatically set the zoom level to 80%

Recently, I've encountered a perplexing issue with Chrome where my website is automatically zoomed out from 100% to 80%. It seems that browsers cache zoom settings based on the domain and apply them when users revisit the site. However, in this case, ...

Incorporating a unique font into your SAPUI5 application

While experimenting with an expense app design, I decided to incorporate a receipt-like font for a unique look and feel. After discovering the FakeReceipt font, I placed my woff and woff2 files in the same directory as my style.css file, and it worked like ...

How to determine the status of a drop-down menu after updating its value using a cookie?

I have created a code snippet (shown below) that examines the state of ContentID in order to display or hide a DIV: <select id="ContentID" name="ContentID"> <option selected="selected" value="00">Menu</option> ...

jQuery script for reversing the collapse/expand feature

Here is a test showcasing an expand/collapse jQuery script. Currently, the div is collapsed on page load and you need to click it to see the content. Is there a way to change this so that the div is expanded on load and collapses upon clicking? <style ...

Add some TD(s) after the td element

The HTML code I currently have is as follows: <tr> <td class="success" rowspan="1">Viability</td> <td data-rowh="-Checksum">Viability-Checksum</td> </tr> <tr> ...

Ways to resolve the array to string conversion issue in PHP

In my PHP project, I am dealing with a dynamic array and trying to store the array result in a variable. However, I encountered an error: array to string conversion while coding. <?php require_once('ag.php'); class H { var $Voltage; ...

The CSS transition fails to function correctly once a specific function is executed

When I hover over a div, the background color changes due to a transition effect. However, if I click on a button that triggers myFunction2 to change the background color of the div before hovering over it, the transition effect no longer works. functi ...

Navigating within an ionic framework

I am facing an issue with a simple form in my application. When I try to enter user details, the Android keyboard hides the email field and mobile number field, making it impossible for me to scroll the page upwards. Can anyone suggest a solution? <i ...

Which HTML element does each script correspond to?

Are there any methods to identify the script used in certain HTML elements? For instance, if I wish to determine the script responsible for creating a drop-down menu, I can locate the HTML and CSS for the menu but not the JavaScript (or other scripts). I ...

The columnFilter plugin in Datatables is failing to initialize

I have a pre-existing table that needs to be customized and initialized properly. <table id="currencies-table" class="table table-striped table-bordered table-hover form-data-table"> <thead> <tr> <th style="width: 10px;" ...

What is the best way to incorporate the loupe jQuery image magnifier into an enlarged fancybox popup image?

Click here to view the code I've been working on. $(document).ready(function () { $("#single").fancybox(); $("#demo-2").loupe(); }); I am trying to enhance the enlarged image popup from FancyBox by adding an image magnifier like loupe. This ...