All geek questions in one place

How to implement or create a large-scale pop-up screen?

Introduction:
This is a question from an amateur-amateur-designer-beginner on how to create Magnific Popup correctly. So this may sound a little noobish, but that's because I'm new.

What I want to know:
I want to know how to create a Magnific Popup, which includes: the full HTML structure, where to put the scripts and which scripts are needed.

What I did before I came to StackOverflow:
He spent countless hours trying to implement Magnific Popup, but to no avail. The end result that I have is just an image, and when I click on it, it redirects me to the image link.

Sources:
This is the documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html .
This is what I'm trying to create: http://dimsemenov.com/plugins/magnific-popup/ - in the Lightbox Gallery section.

HTML structure I tried and failed:

<!DOCTYPE html> <html> <head> <!-- Magnific Popup core CSS file --> <link rel="stylesheet" href="magnific-popup/magnific-popup.css"> <!-- jQuery 1.7.2+ or Zepto.js 1.0+ --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Magnific Popup core JS file --> <script src="magnific-popup/jquery.magnific-popup.js"></script> </head> <body> <div class="popupgallery"> <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"/></a> <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"/></a> <a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"><img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75"></a> <a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"><img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75"></a> <a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"><img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75"></a> <a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"><img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75"></a> <a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who that, mommy?"><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75"></a> </div> <script type="text/javascript"> $(document).ready(function() { $('.popupgallery').magnificPopup({ type: 'image', closeOnContentClick: true, image: { verticalFit: false } }); }); </script> </body> </html>

Note:
I also tried putting the .js files before </body> , again, so as not to produce the intended results.
I think something is missing, I'm just not sure what. There are many things in the Magnific Popup documentation that I don’t understand, but I don’t think they are relevant.

I hope someone there will be kind enough to help me with this request.

Relevant queries:
I can't get magnific-popup animation to work
Popup not showing (high magnification)
https://stackoverflow.com/questions/16572007/instructions-on-implementing-magnific-popup

Thanks again! I would really appreciate your thoughts!

+4
source share
2 answers

Just add delegate: 'a' to your jquery function and make sure that the img tag contains the full res image and href contains the thumbnail.

 $('.popupgallery').magnificPopup({ type: 'image', delegate: 'a', closeOnContentClick: true, image: { verticalFit: false } });
+3
source

Try putting "http:" before the backslashes for the source .js file. Also try using the new jQuery version, for example:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </ script>
0
source

Source: https://habr.com/ru/post/1488800/

More articles:


All Articles