Responsive Filterable Lightbox Gallery [ HTML CSS JQUERY ] | JQUERY Magnific Popup Tutorial

create a filterable responsive lightbox gallery using html, css and jquery.
jquery magnific popup library tutorial.
responsive filterable lightbox gallery tutorial step by step.
* SOURCE CODE *
DONWLOAD THE SOURCE CODE FROM GOOGLE DRIVE:
drive.google.com/file/d/1zqQZ...
download the images from here:
www.freepik.com/search?dates=...
jquery cdn link:
cdnjs.com/libraries/jquery
magnificPopup cdn link:
cdnjs.com/libraries/magnific-...
New To My Channel Subscribe Now And See More Stuff Like This:
/ @mrwebdesigneranas
#FilterableGallery
#LightBoxGallery
#responsiveGallery
#Lightbox
#HMTL5
#CSS3
#JQUERY
#MagnificPopup

[@ant7lop]

Thank you very much, Finally I made work. you are the man. very grateful for kind people like you!!! :)

[@scyrusTangoSalsa]

Exactly what I was looking for, well done!

[@ant7lop]

quick question, how I provide an original image and when people click on it, it show a different image. I want to provide floor plan thumbnails like you have right now, but when they click they can see the entire floor plan. please let me know if you can add it to this tutorial or if you have another to fallow. thank you in advance

[@almoftarypro7862]

Man you are an absolute legend.

[@shahabspeakss]

thanks man you did a great work

[@prasadbagul2146]

Excellent Sir Love Your All Videos ❤❤❤

[@panditl134]

Thank you from india 🇮🇳

[@TrinhNguyen-kn3hf]

thanks you, i very need all code like it.

[@janithjayasinghe9462]

How to use this method to view specific product details of ecommerce website?

[@bolivarobi3499]

Thank you for this practice. however I have a question related to a situation I met dealing with gallery filter. in fact when I apply a filter in the gallery photos are well updated but the display in the popup still shows photos in the same order as though we were in the "all" filter. I think I also saw that "side effect" in your presentation exactly when you set the cake filter while sliding, an orange juice appeared. Please, do you have any clue about how to get rid of it?

[@paradoxtop2497]

A good gallery, but I would also like to solve this problem with a filter, since it’s bad when, when you click on images, when they end up in a category, images are taken from other categories, and not just from the one you are currently in. Maybe someone solved this problem? Or the author will share with the decision?

[@crush_ka_bhai]

Osm

[@shivamdubey4783]

sir i did exatly how you did but it is showing image could not be loaded when i click on image

[@aleksandrsrudkevics6384]

Супер

[@neighbizsaptyltd7237]

Thank you from South Africa great help

[@hassanBinTariq443]

legend

[@paradoxtop2497]

Author, can you solve the problem with the filter? It’s bad when, when you click on images and scroll through them in an enlarged view, when the images in a category end, images begin to be taken from other categories (sections), and not just from the one you are currently in.

[@MrWebDesignerAnas]

you are right! its just bug from lightbox gallery framework

[@paradoxtop2497]

@@MrWebDesignerAnas Thanks for the answer. It can be fixed ?

[@pramodghodke8005]

Hi sir please help... What's the code changes for we want to remove ALL option..but keep all the rest options as they are sorting.... Actually when the categories are more then height of ALL section increases so much .. so want to remove all and kepp all other categories sorted

[@MrWebDesignerAnas]

just remove or disable the all button from the code!

[@pramodghodke8005]

@@MrWebDesignerAnas but sir what will be the active filter then.. first one right ?... To how to make it active filter... Which class to be add to first categories

[@ant7lop]

sorry! quick question, do you have a zip folder for all the images?, your link only allowed 3 images per day and they are not the same, it would be easy if you provide a place where I can download and only change the name to match your. please let me know. I am new to this and I love your tutorial, great job

[@MrWebDesignerAnas]

You can even download images from here as well.
www.pexels.com/
pixabay.com/
unsplash.com/

[@ant7lop]

@@MrWebDesignerAnas thank you very much. working on it. :)

[@ant7lop]

@@MrWebDesignerAnas thank you very much, I am 80% about to finish it. thanks again.

[@burgasdragonheirsilentgods]

Great !!

[@Lina-cy9ln]

Very nice work. I will do it. Thanks

[@arafathossion8568]

Thank You very much.

[@riazul2]

Can you speak for give us understanding. Why you use "." This. Discribe complete js please. We need it.

[@servicerceo]

good work bro!

[@LPWP_Creation]

🎉🎉🎉🎉

[@alysakavy1280]

verr nice thank bro

[@MrWebDesignerAnas]

No problem

[@krazykalai5057]

why use used show(400), and ('.') also coudnt understand.. if u give the explanation it would be better for understanding

[@NaveenKumar-kv3ul]

Excellent

[@manishdangi5491]

sir in magnififc popup, the image size is showing too small,how can i increase it??

[@MrWebDesignerAnas]

it shows the original size of the images! did you perhaps used smalled sized images for your project?

[@riazul2]

Bro please explain we need we can't make it

[@abirayana8797]

Sir pls give a lightbox menu items 🙏

[@harshsingh1025]

First of all thank you so much
But I have a problem in magnific popup not working

[@MrWebDesignerAnas]

did you write the exact code for pop up? try to download the source code for more details

[@harshsingh1025]

@@MrWebDesignerAnas 😊done ✅

[@subhendugupta7026]

Are you sure Is this a Responsive Code ? Please Reply! Btw... I'm new subscriber 🤩😊☺️

[@MrWebDesignerAnas]

its sure is! is there any part you are facing difficulty? please let me know if there is!

[@riazul2]

Pleas speak to understand us.