[Image Zoom Effect] Image zoom effect for Magnific Popup #image #zoom #ui

Image zoom effect for Magnific Popup.markdown

Image zoom effect for Magnific Popup

More info in documentation or Magnific Popup homepage.

Forked from Dmitry Semenov's Pen Show animated image only after it's loaded.

A Pen by David Young on CodePen.

License.

index.html

<figure>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Water_Dolphin.jpg/800px-Water_Dolphin.jpg" title="this a a lovely droplet" id="20160601t1739" style="width:600px;">
</figure>

<figure>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Water_Dolphin.jpg/800px-Water_Dolphin.jpg" title="this a a lovely droplet" id="20160601t1739" style="width:600px;">
</figure>

script.js

// build our blueprint object
var mmdMagnificPopup = function mmdMagnificPopupObject() {

    this.addImageLinks = function addImageLinks() {
        $("figure > img").each(function(idx, value) {

            mySrc = $(this).attr("src");
            caption = $(this).attr("title");
            imgLink = $(this).wrap($("<a>").attr("href", mySrc)).closest("a");

            if (typeof caption !== 'undefined' && caption !== false && caption !== "") {

                imgLink.magnificPopup({
                    type: 'image',
                    closeOnContentClick: true,
                    closeBtnInside: false,
                    mainClass: 'mfp-with-zoom mfp-img-mobile',
                    image: {
                        verticalFit: true,
                        titleSrc: function(item) {
                            return caption;
                        }
                    },
                    zoom: {
                        enabled: true
                    }
                });
            } else {
                imgLink.magnificPopup({
                    type: 'image',
                    closeOnContentClick: true,
                    closeBtnInside: false,
                    mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
                    image: {
                        verticalFit: true
                    },
                    zoom: {
                        enabled: true,
                        duration: 300 // don't foget to change the duration also in CSS
                    }
                });
            }
        });

    };
};

function MyObject() {
    this.name = 'testing';
}
MyObject.prototype = new mmdMagnificPopup();

// example usage
var testObject = new MyObject();
testObject.addImageLinks(); // alerts "some function"

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js"></script>

style.css

img {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}


/* This block of CSS adds opacity transition to background */

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
  opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}


/* padding-bottom and top for image */

.mfp-no-margins img.mfp-img {
  padding: 0;
}


/* position of shadow behind the image */

.mfp-no-margins .mfp-figure:after {
  top: 0;
  bottom: 0;
}


/* padding for main container */

.mfp-no-margins .mfp-container {
  padding: 0;
}


/* aligns caption to center */

.mfp-title {
  text-align: center;
  padding: 6px 0;
}

.image-source-link {
  color: #DDD;
}

body {
  -webkit-backface-visibility: hidden;
  padding: 10px 30px;
  font-family: "Calibri", "Trebuchet MS", "Helvetica", sans-serif;
}

styles

<link href="http://dimsemenov-static.s3.amazonaws.com/dist/magnific-popup.css" rel="stylesheet" />

hi,

Thanks for the wonderful plugin. Now we have default zoom-in and zoom-out functionality. Need your assistance, would like to add more zoom in functionality.

Thanks