14-Modals Setup

Key Objectives

• To draft some dynamic pop-ups/modals for the projects section.

Overview

Here we just want to get a modals section to pop up when we click on an image, this gives us a sort of gallery between projects. This is NOT required for your portfolio, but it does lead to a heightened understanding of adding more features to strengthen our project.

Steps

1. There is not a video for this module. Please let us know if you have questions about the code in this section.

2. You can see the finished pop-up code here or locally on your own branch.

3. If you look locally, jump onto the module-13-portfolio-modal-setup branch and run a git pull in the terminal window to be sure that you have the current version.

4. We installed Magnific Popup by running npm install magnific-popup --save.

5. Notice, it's now in the package.json file.

6. You will simply have to run npm install in the command line to get the package in your node_modules folder.

7. Then, we added a link to the CSS file in the head (this is in your index.html file):

        <!-- Bootstrap core CSS Modules-->
        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
        <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
        <link href="node_modules/animate.css/animate.min.css">
        <!-- Fonts -->
        <link href='https://fonts.googleapis.com/css?family=Belleza' rel='stylesheet'>
        <link href="" rel="stylesheet" type="text/css">
        <!-- Custom styles for this template -->
        <link rel="stylesheet" href="node_modules/animate.css/animate.min.css">
        <link rel="stylesheet" href="node_modules/magnific-popup/dist/magnific-popup.css">
        <link href="css/main.css" rel="stylesheet" type="text/css">
   </head>

   The line you are looking for mentions magnific-popup.

8. Like the other tools we've used, we also added the JS file at the bottom of the index.html file:

   <!--==========================
   Scripts Section
   ============================-->
        <!-- Bootstrap & jQuery Scripts - Note: jQuery must be first -->
        <script src="node_modules/jquery/dist/jquery.min.js"></script>
        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
        <!-- jQuery 3rd Party Scripts-->
        <script src="node_modules/wowjs/dist/wow.min.js"></script>
        <script src="node_modules/magnific-popup/dist/jquery.magnific-popup.min.js"></script>
        <!-- Custom scripts for this template -->
        <script src="js/main.min.js"></script>
   </body>

9. Next, we tried to find a simple way to get the library working. A little reading of the docs led to the discovery of a Codepen, assembled by the creator of Magnific Popup. The Codepen showcases the usage of the tool in a streamlined way, so we followed his example somewhat closely.

10. To see what we did, take special note of the following files/lines (the lines may be different in your project):

    • index.html -----> Lines 95-96.

      <div class="col-md-3" href="assets/img/robot1.jpg" title="CSS Creature">
            <a class="portfolio-item with-caption img-link mfp-title" style="background-image: url(assets/img/badge-blue.png);" href="assets/img/robot1.jpg" title="CSS Work">
                <div class="details">
                    <h4>Portfolio 1</h4>
                    <span>CSS Creature</span>
                </div>
            </a>
      </div>

      • Notice additional classes and a few other items.

      • That pattern gets repeated for all seven other portfolio items.

    • main.js -----> Lines 12-36.

      /*-------------------
      MAGNIFICO STARTER - 
      Code from a starter example by the creator. 
      https://codepen.io/dimsemenov/pen/hutrb
      -------------------*/
      $('.with-caption').magnificPopup({
        type: 'image',
        closeBtnInside: false,
        mainClass: 'mfp-with-zoom mfp-img-mobile',
      
        image: {
            verticalFit: true,
            titleSrc: function (item) {
                /*More could be done here......
                Also doesn't fit so good on iPad.
                */
                var caption = item.el.attr('title');
                return caption;
            }
        },
      
        /*This will let us click through images eventually....*/
        gallery: {
            enabled: true
        },
      });

      • This is a jQuery function that just gets a pop up running and closing.

    • portfolio.scss ----->

      .image-link {
            cursor: -webkit-zoom-in;
            cursor: -moz-zoom-in;
            cursor: zoom-in;
      }
      /* aligns caption to center */
      .mfp-title {
            text-align: center;
            padding: 2px 2px;
      }

      • Here we have a couple small additions to style the portfolio item when we hover.

      • Not a lot added, just enough to get started.

11. If you decide to make modals for your projects, this is a solid library to use. There are others, like animated modals, that are extremely good too.

12. Consider adding your own modals for your projects (or anything else) at some point.

13. Thanks so much! More to come soon....