Responsive Filterable Lightbox Gallery [ HTML CSS JQUERY ]

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

Рет қаралды 39,099

3 жыл бұрын

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

Пікірлер: 46

@ant7lop Жыл бұрын

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

@scyrusTangoSalsa 9 ай бұрын

Exactly what I was looking for, well done!

@almoftarypro7862 9 ай бұрын

Man you are an absolute legend.

@shahabspeakss 2 жыл бұрын

thanks man you did a great work

@prasadbagul2146 9 ай бұрын

Excellent Sir Love Your All Videos ❤❤❤

@panditl134 2 жыл бұрын

Thank you from india 🇮🇳

@TrinhNguyen-kn3hf 9 ай бұрын

thanks you, i very need all code like it.

@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

@bolivarobi3499 2 жыл бұрын

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 3 жыл бұрын

Osm

@neighbizsaptyltd7237 3 жыл бұрын

Thank you from South Africa great help

@aleksandrsrudkevics6384 3 жыл бұрын

Супер

@alysakavy1280 Жыл бұрын

verr nice thank bro

@MrWebDesignerAnas Жыл бұрын

No problem

@janithjayasinghe9462 Жыл бұрын

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

@Lina-cy9ln 4 ай бұрын

Very nice work. I will do it. Thanks

@hassanBinTariq443 2 жыл бұрын

legend

@pramodghodke8005 2 жыл бұрын

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 2 жыл бұрын

just remove or disable the all button from the code!

@pramodghodke8005 2 жыл бұрын

@@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

@shivamdubey4783 Жыл бұрын

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

@LPWP_Creation 3 ай бұрын

🎉🎉🎉🎉

@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 ?

@arafathossion8568 3 жыл бұрын

Thank You very much.

@burgasdragonheirsilentgods 3 жыл бұрын

Great !!

@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.

@servicerceo 3 жыл бұрын

good work bro!

@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!

@NaveenKumar-kv3ul 3 жыл бұрын

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 2 жыл бұрын

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

@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 ✅

@krazykalai5057 2 жыл бұрын

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

@abirayana8797 Жыл бұрын

Sir pls give a lightbox menu items 🙏

@riazul2 2 жыл бұрын

Bro please explain we need we can't make it

@riazul2 2 жыл бұрын

Pleas speak to understand us.