CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3004356
user3004356

Reputation: 880

How to filter the images based on the prefix of image names in gallery

I have the following images displayed in gallery and I'm using lightbox to display this images. Now, I want to include a filter such that I have two buttons TH and TS. When I click on TH all images with prefix TH should be displayed and when I click on TS all images with prefix TS should be displayed in the gallery.
Below is the code - 

<div id="vlightbox">
        <a id="firstImage" title="Bath Mat" href="images1/TH1.jpg" class="vlightbox">
            <img alt="Bath_Mat" src="images1/TH1.jpg"/>
            <p class="para">
                BATH MAT RUG - PINK<br>
                <strong>Material Used:</strong>Cotton<br>
                <strong>Design:</strong> Square |<strong> Colour:</strong> Pink<br>
                <strong>Size:</strong> As per requirement
            </p>
        </a>
        <a title="Bathmat Cotton Yellow" href="images1/TS1.jpg" class="vlightbox"><img alt="Bathmat-Cotton-Yellow" src="images1/TS1.jpg" />
            <p class="para">BATH MAT RUG - YELLOW<br>
                <strong>Material Used:</strong>Cotton<br>
                <strong>Design:</strong>Stripes | <strong>Colour: </strong>Yellow <br>
                <strong>Size:</strong> As per requirement
            </p>
        </a>
</div>

How can I filter this images in the gallery ased on the prefix of the image names

Upvotes: 0

Views: 74

Answers (1)

phortx
phortx

Reputation: 919

$('a.vlightbox[href*="/TS"]');

Will give you all a-Tags with TS-images.

Replace TS with TH for the TH-images.

Upvotes: 1

Related Questions