Web制作

Enlarged photo display/image gallery ~ Programming learning [Saturday] (Tuesday the day after paid acquisition)

Have you ever wanted to create a site where when you click on a photo, an enlarged photo appears?

MagnificPopup allows you to do just that.

There is a difference between after and before application.

First before application. It's just HTML code.

<body>
  <a class="popup" href="img1.jpg"><img src="img1-small.jpg" width="200" height="200"
   alt="image1"></a>
</body>

When you click on a small photo, the enlarged photo set as the link destination is certainly displayed, but you cannot return to the original page unless you click the ``arrow'' that returns to the previous page in the browser.

On the other hand, when applying MagnificPopup,

$('.popup').magnificPopup({
  type:'image',
});

After displaying the enlarged photo, you can return to the screen displaying the original small photo by simply clicking anywhere outside the photo.

In addition, MagnificPopup allows you to slide the image to the next image while it is enlarged, or use CSS to create a floating effect.

MagnificPopup is a rare field in programming where you can try out various functions and have fun learning it.

[Tuesday the day after paid leave]

After your paid day off, you may have accumulated a bit of email processing that came on your day off.

Also, since it's the first day at work after a holiday, it can be time-consuming as it requires physical and mental recovery.

However, the unique feeling of Monday morning will be alleviated from Sunday.

Japanese programming school / Attendance / reference / front end course

-Web制作

Copyright© サァーチpage , 2024 All Rights Reserved.