Add image popup to your site using Magnific Popup

in #utopian-io7 years ago (edited)

What Will I Learn?

  • Adding image popup
  • Single image popup
  • Gallery image popup

Requirements

  • Internet connection
  • Browser
  • Text editor

Difficulty

  • Basic

Tutorial Contents

Download the library

Before we begin, we must download the library from GitHub:

  1. Open https://github.com/dimsemenov/Magnific-Popup.
  2. Click Clone or download, it will open pop up.
  3. Click Download ZIP.
    magnific.png
  4. Extract the .zip file and open dist directory.
    Screenshot (49).png
Download sample image

For this tutorial, we need some image for testing. You can use any image on your computer or you can download this sample image. Original Image Source.

  • 1.jpg
    1.jpg
  • 2.jpg
    2.jpg
  • 3.jpg
    3.jpg
Starting project
  1. Create empty directory for our project. Then, you need to copy two files from dist directory to this empty directory. Those files are jquery.magnific-popup.min.js and magnific-popup.css.
    Screenshot (50).png
  2. Create new .html file in our project directory, example index.html.
    Screenshot (51).png
  3. Open index.html using text editor, write basic html layout, and load our .css and .js library. Magnific Popup require jQuery to function properly, so we will load jQuery using CDN. Always remember, required library should placed on top of library that depends on it.
    <!DOCTYPE html>
    <html>
        <head>
            <title>Magnific Popup</title>
            <link href="magnific-popup.css" rel="stylesheet">
        </head>
        <body>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
            <script src="jquery.magnific-popup.min.js"></script>
        </body>
    </html>
    
  4. Open index.html using browser and check the console. If there is no error, we can continue to next step.
    Screenshot (52).png
  5. Before continue to next step, move all the sample image to our project directory.
    Screenshot (57).png
Single image popup
  1. Edit our index.html. Add three a right below our body and give class name for each tag.
    <a class="gallery" href="1.jpg">
        <img src="1.jpg" width="200px" height="200px">
    </a>
    <a class="gallery" href="2.jpg">
        <img src="2.jpg" width="200px" height="200px">
    </a>
    <a class="gallery" href="3.jpg">
        <img src="3.jpg" width="200px" height="200px">
    </a>
    
  2. To initialize the popup, add this script before closing body.
    <script>
        $(document).ready(function () {
            $('.gallery').magnificPopup({
                type: 'image'
            });
        });
    </script>
    
  3. Refresh index.html on your browser and it should display this.
    Screenshot (53).png
  4. Try to click one of the image and it will display the popup.
    Screenshot (56).png
Gallery image popup

In previous step, you can notice if we want to open another image while the popup still open, we must close the popup first, then click on another image. Now, we will add previous and next function to our popup.

  1. Edit our index.html. Make one div as parent and move all the a to inside this div. We also need to move the class name to our div and I will add title to our a.
    <div class="gallery">
        <a href="1.jpg" title="1st image">
            <img src="1.jpg" width="200px" height="200px">
        </a>
        <a href="2.jpg" title="2nd image">
            <img src="2.jpg" width="200px" height="200px">
        </a>
        <a href="3.jpg" title="3rd image">
            <img src="3.jpg" width="200px" height="200px">
        </a>
    </div>
    
  2. Modify our script code by adding delegate and gallery options when initialize.
    <script>
        $(document).ready(function () {
            $('.gallery').magnificPopup({
                type: 'image',
                delegate: 'a',
                gallery: {
                    enabled: true
                }
            });
        });
    </script>
    
  3. Refresh index.html on your browser and it will display same output but when you hovering the mouse cursor to the image preview, it will show the image title as we added.
    title.png
  4. Try to click 1st image and it should display the popup. But, now we got our previous and next button. Try to click next button and it should display the 2nd image. It will also print our image count number and the title.
    Screenshot (55).png
  5. You can also use left and right arrow for navigate to another image while the popup still open and press esc to close the popup.
Final index.html code
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link href="magnific-popup.css" rel="stylesheet">
    </head>
    <body>
        <div class="gallery">
            <a href="1.jpg" title="1st image">
                <img src="1.jpg" width="200px" height="200px">
            </a>
            <a href="2.jpg" title="2nd image">
                <img src="2.jpg" width="200px" height="200px">
            </a>
            <a href="3.jpg" title="3rd image">
                <img src="3.jpg" width="200px" height="200px">
            </a>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="jquery.magnific-popup.min.js"></script>
        <script>
            $(document).ready(function () {
                $('.gallery').magnificPopup({
                    type: 'image',
                    delegate: 'a',
                    gallery: {
                        enabled: true
                    }
                });
            });
        </script>
    </body>
</html>



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Hey @mytosin I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Suggestions

  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

  • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Cool! I follow you.

Congratulations @mytosin! You received a personal award!

1 Year on Steemit

Click here to view your Board

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @mytosin! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 2 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Vote for @Steemitboard as a witness to get one more award and increased upvotes!