Image Popup using jQuery from Scratch | Krishnaa Kumar | Skillshare

Image Popup using jQuery from Scratch

Krishnaa Kumar, Your Best Mentor :-)

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (14m)
    • 1. Introduction

      0:30
    • 2. jQuery Package

      0:49
    • 3. Overlay

      3:03
    • 4. Large Image

      2:19
    • 5. jQuery Code

      2:29
    • 6. Close Button

      2:40
    • 7. jQuery Close Button

      2:35

About This Class

Hi Everyone,

In this class, we will create image popup using jQuery absolutely from scratch.  Make sure, you have some basic knowledge of jQuery and CSS.  If you don't have, then you can simply follow along because creating such image popup is very easy.

I am going to use Sublime Text as my text editor and will test web page on localhost using XAMPP.  After finishing the class, you can download the project and modify it as per your need.

Transcripts

1. Introduction: higher we would this class. You will learn how you can create an image pop up using J equity. This will be for a lot put when it will click on this image, you'll get this image pop up. You can also close this image pop up using this letter X Here on the page load. You can also load this image. Woke up like this. Make sure you have some basic knowledge off security, and CIA says if you don't have, you can simply follow along because skating such Mitch pop up is very, very easy. Seeing the class, How will I stay? 2. jQuery Package: Hi, guys. What's the whole? Never download the decree. File the decree website. Have to click on this button. When you click on this burden, you'll get this bitch. And on this page you have to select this packet, which is for the production. When you click on this link, you'll get this bitch This your decree file, you know, to press control us when a keyboard to save this file, click on Save Britain to save the file. When you're done with the downloading, you'll get the decree filing this decree folder. So this is all what you need to download the decree filed in the next video. We'll start with decoding process. See the next video? How Aleister. 3. Overlay: Hi, everyone. In this, we will start with recording process This simple estimate structure in the heart section, we have to wear the referenced org query file, which is in this world. Er in de equity. Just copy the name and make use off script element here. Or you can say script back. Make use off source attribute. And the location is decree folder the fine limp and dot Yes, save it. No, you didn't tell me in the radius Holder. I already got blue images. Do the time deal image. And this is the original image. Meteors off Magellan entail. Source will be images from got gpt. Save it. Goto browser. You're fresh shirt and this is the output. Now, in this case, after what you will be But I will click on this image. I want to show the marginal image with the dog background. Let's go to court file, make use off development. And I didn't this case will be early. Just say of this No in your day style shoot to have the dog background go to file new file and save it as my started or CSS no me toe link this file using the link back now Select this development which has the idea off early. So it will be hash bully Background color will be hash people zero for the dog background How it will be 100% where it will be 100% position will be fixed. Top will be zero right Boobie Zito Bottom will be zero left will be zero You see of this? What about the profession? Nice make use off capacity Hill and subject pointed. Save it Nice Good dessert index off one So we're gonna be the well apart in the next video We'll work with the original image sooner Next Rodeo How when I stray? 4. Large Image : Hi, everyone. So far we're done with the early part. This will work with the original image. What? The court file good to development to. There will be image element and the sorts will be images big dot Deputy, you the i d off only I m g save it. Photo browser. You're pressured. And this is the output. It is quite large. So we have to fix this. Well, the style shoot. Select the image element. This one. So first we have to take the idea of this. Do you and the image element do the height off? Poor defectors, We're told 600 pixels. Save this photo closer Refresher. No, it's and you so far there to make use off tradition element and make it absolute Stopfel be 10% what I will be 10% from, like, make it 20 and from left to make it 27. Good browser. No pressure. So this is the output next fixed image. Make yourself margin property and make it nice. Make use off that index and naked. I see it perfect. So far, we're done with the real image. In the next year, they will start working with the Duke ready so that when we click on this image, we'll get this image with this only background. See in the next video, how a nice do. 5. jQuery Code: Hi, everyone. This real work with the Jake record so that we'll click on this image will get this image. With this will a background we need to wear the property here, which will be display none. So initially this or is Nellie Mitch And the only part will be hidden. Ciric Good browser to fresh it. So this is the output now in the esteem and file. Make use off script AG and give this to mill the idea off. Come, make use up the document. Ready function. Just tell you this word. Take this idea and make use off ligament. I just don't know this. We don't know this on the click of his time, Neil, We want to show this overly and this original image. And the idea for this is only make use off. Fared in function and started Do slow Just balutis. Perfect. Save it. Go to Rosa Crusher. Click on the image. So this is a holy No copies, Mr Tail and make it Really I am G and the image element which is this so first of all, official the with a background than the original image. Save it. Pressure it. Click on the image. And this is the So far we're done with the critical. The next we will try to where? There But in here to hide this image. See the next video. Have a nice day. 6. Close Button: Hi, everyone. In this, we will try. To where? The button? Here To hide this image. We don't really need a button. You can simply make it off development with the letter X so that when we click on that letter the same, it should be hidden. Let's go to court file makers of Development Hill and give it the idea off. Close button and it will be a Xa later. Save it. No go to style. Shoot. Select the close. But an I. D. Do tear it off. 30 pixels. There should be white, which will with people left background color will be triple zero, which is black for two. It will be board. Save it. Go to ground zero Refresher. So this is a Burton, or you can see our text make use off extra line center here. Nice. Make deposition absolute. Give a desert index off three. Now click on the image. And this is the Alberta. You wanted to some of the hill there to make yourself margin left property and set it to 9 45 pixels. Save it. We want to tell. So we have to make use off margin top. Make it 50 pixels negative. Make it 1 70 Make it 1 68 I think that will be perfect. Just make it to 65. Great. So we got Overton, or you can see our text, which is X In the next year, they will work with the jittery code so that when we click on this, wouldn't this image should be heard and see the next video? Have a nice day. 7. jQuery Close Button: Hi. Everyone in the city will try too hard. This image on cyclical this letter X But first of all, we have to hide this on the page, Lord, to make use off display property and subject to none. See? What? What about, uh, go fresh it. So we have only time will heal. No, Go to index file or you can see the estimate file. And here, make yourself flows. Burton. I d food in function and started toe slow. And he has you both. Save it. Go to browser your flash shoot, Click on the image and this is your little X. And this is the image. No, just copy this on Mr To the place. This with the bills, but a 90 and start off Fuding We could food oak. Copy this, Mr Hill and him. Save it. Go to Gaza, refresh it. Click on this image and click on this letter X. You can see the medias gone. If you want to load this original image on the page load, you can make use off river function here. So it will be tongue 0.3 the function and even Philby. Click. Just dilute this. Save it go to Gaza, refresh it. You can see nor getting image on the big load. Circulatory issue Worthy showed image on the click of a thumbnail are only paid you. Look, we're done with the project and this is a lot put. See the next video. Have a nice day.