Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
    <title>Starter Template - Materialize</title>

    <!-- CSS -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  </head>
  
  <body>
    <nav class="light-blue lighten-1" role="navigation">
      <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
        <ul class="right hide-on-med-and-down">
          <li><a href="#">Navbar Link</a></li>
        </ul>
        <ul id="nav-mobile" class="sidenav">
          <li><a href="#">Navbar Link</a></li>
        </ul>
        <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      </div>
    </nav>
    
    <div class="section no-pad-bot" id="index-banner">
      <div class="container">
        <h1 class="header center orange-text">Starter Template</h1>
        <div class="row center">
          <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
        </div>
        <div class="row center">
          <a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light orange">Get Started</a>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col s4">
            <img class="materialboxed" width="100%" src="https://materializecss.com/images/sample-1.jpg" data-external="https://pp.userapi.com/c848616/v848616996/3f346/Err-8yJvG60.jpg"/>
         </div>
       </div>
    </div>

    <footer class="page-footer orange">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">Company Bio</h5>
            <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
          </div>
          <div class="col l3 s12">
            <h5 class="white-text">Settings</h5>
            <ul>
              <li><a class="white-text" href="#!">Link 1</a></li>
              <li><a class="white-text" href="#!">Link 2</a></li>
              <li><a class="white-text" href="#!">Link 3</a></li>
              <li><a class="white-text" href="#!">Link 4</a></li>
            </ul>
          </div>
          <div class="col l3 s12">
            <h5 class="white-text">Connect</h5>
            <ul>
              <li><a class="white-text" href="#!">Link 1</a></li>
              <li><a class="white-text" href="#!">Link 2</a></li>
              <li><a class="white-text" href="#!">Link 3</a></li>
              <li><a class="white-text" href="#!">Link 4</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
        Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
        </div>
      </div>
    </footer>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
    <script>
       $(document).ready(function(){
        $('.materialboxed').materialbox();
      });
    </script>
  </body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                (function($, anim) {
    'use strict';

    let _defaults = {
      inDuration: 275,
      outDuration: 200,
      onOpenStart: null,
      onOpenEnd: null,
      onCloseStart: null,
      onCloseEnd: null
    };
  
    /**
     * @class
     *
     */
    class Materialbox extends Component {
      /**
       * Construct Materialbox instance
       * @constructor
       * @param {Element} el
       * @param {Object} options
       */
      constructor(el, options) {
        super(Materialbox, el, options);
  
        this.el.M_Materialbox = this;
  
        /**
         * Options for the modal
         * @member Materialbox#options
         * @prop {Number} [inDuration=275] - Length in ms of enter transition
         * @prop {Number} [outDuration=200] - Length in ms of exit transition
         * @prop {Function} onOpenStart - Callback function called before materialbox is opened
         * @prop {Function} onOpenEnd - Callback function called after materialbox is opened
         * @prop {Function} onCloseStart - Callback function called before materialbox is closed
         * @prop {Function} onCloseEnd - Callback function called after materialbox is closed
         */
        this.options = $.extend({}, Materialbox.defaults, options);
  
        this.overlayActive = false;
        this.doneAnimating = true;
        this.placeholder = $('<div></div>').addClass('material-placeholder');
        this.placeholder.css({ display: "block", position: "relative" }); // for the progress bar to be same width of img
        this.originalWidth = 0;
        this.originalHeight = 0;
        this.originInlineStyles = this.$el.attr('style');
        this.caption = this.el.getAttribute('data-caption') || '';

        this.animOutHeightOriginalPicResize = false; // Animation of the return size to the preview. Otherwise, the animation saves the size of the full image.

        this.originalPic = null;
        this.originalPicWidth = null;
        this.originalPicHeight = null;
        this.external = this.el.getAttribute('data-external') || '';
        this.progress = $('<div style="position: absolute; bottom: 0px; margin: 0;"></div>').addClass('progress');
        this.indeterminateProgress = $('<div></div>').addClass('indeterminate');
        // Wrap interminate in progress
        this.indeterminateProgress.before(this.progress);
        this.progress.append(this.indeterminateProgress);
  
        // Wrap img in placeholder
        this.$el.before(this.placeholder);
        this.placeholder.append(this.$el);
  
        this._setupEventHandlers();
      }
  
      static get defaults() {
        return _defaults;
      }
  
      static init(els, options) {
        return super.init(this, els, options);
      }
  
      /**
       * Get Instance
       */
      static getInstance(el) {
        let domElem = !!el.jquery ? el[0] : el;
        return domElem.M_Materialbox;
      }
  
      /**
       * Teardown component
       */
      destroy() {
        this._removeEventHandlers();
        this.el.M_Materialbox = undefined;
  
        // Unwrap image
        $(this.placeholder)
          .after(this.el)
          .remove();
          
        this.$el.removeAttr('style');
      }
  
      /**
       * Setup Event Handlers
       */
      _setupEventHandlers() {
        this._handleMaterialboxClickBound = this._handleMaterialboxClick.bind(this);
        this.el.addEventListener('click', this._handleMaterialboxClickBound);
      }
  
      /**
       * Remove Event Handlers
       */
      _removeEventHandlers() {
        this.el.removeEventListener('click', this._handleMaterialboxClickBound);
      }
  
      /**
       * Handle Materialbox Click
       * @param {Event} e
       */
      _handleMaterialboxClick(e) {
        // If already modal, return to original
        if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating)) {
          this.close();
        } else {
          this.preopen();
        }
      }
  
      /**
       * Handle Window Scroll
       */
      _handleWindowScroll() {
        if (this.overlayActive) {
          this.close();
        }
      }
  
      /**
       * Handle Window Resize
       */
      _handleWindowResize() {
        if (this.overlayActive) {
          this.close();
        }
      }
  
      /**
       * Handle Window Resize
       * @param {Event} e
       */
      _handleWindowEscape(e) {
        // ESC key
        if (e.keyCode === 27 && this.doneAnimating && this.overlayActive) {
          this.close();
        }
      }
  
      /**
       * Find ancestors with overflow: hidden; and make visible
       */
      _makeAncestorsOverflowVisible() {
        this.ancestorsChanged = $();
        let ancestor = this.placeholder[0].parentNode;
        while (ancestor !== null && !$(ancestor).is(document)) {
          let curr = $(ancestor);
          if (curr.css('overflow') !== 'visible') {
            curr.css('overflow', 'visible');
            if (this.ancestorsChanged === undefined) {
              this.ancestorsChanged = curr;
            } else {
              this.ancestorsChanged = this.ancestorsChanged.add(curr);
            }
          }
          ancestor = ancestor.parentNode;
        }
      }
  
      /**
       * Animate image in
       */
      _animateImageIn() {
        let animOptions = {
          targets: this.el,
          height: [this.originalHeight, this.newHeight],
          width: [this.originalWidth, this.newWidth],
          left:
            M.getDocumentScrollLeft() +
            this.windowWidth / 2 -
            this.placeholder.offset().left -
            this.newWidth / 2,
          top:
            M.getDocumentScrollTop() +
            this.windowHeight / 2 -
            this.placeholder.offset().top -
            this.newHeight / 2,
          duration: this.options.inDuration,
          easing: 'easeOutQuad',
          complete: () => {
            this.doneAnimating = true;
  
            // onOpenEnd callback
            if (typeof this.options.onOpenEnd === 'function') {
              this.options.onOpenEnd.call(this, this.el);
            }
          }
        };
  
        // Override max-width or max-height if needed
        this.maxWidth = this.$el.css('max-width');
        this.maxHeight = this.$el.css('max-height');
        if (this.maxWidth !== 'none') {
          animOptions.maxWidth = this.newWidth;
        }
        if (this.maxHeight !== 'none') {
          animOptions.maxHeight = this.newHeight;
        }
  
        anim(animOptions);
      }
  
      /**
       * Animate image out
       */
      _animateImageOut() {
        console.log(this.originalPic + " " + this.el.src);
        if (this.external !== '') { // Switch original preview pic to full pic
          this.animWidth = this.originalPicWidth;
          this.animHeigth = this.originalPicHeight;
          if (this.animOutHeightOriginalPicResize == true) this.animHeigth = this.originalPicHeight;
          else this.animHeigth = this.originalHeight;
        } else {
          this.animWidth = this.originalWidth;
          this.animHeigth = this.originalHeight;
        }
        let animOptions = {
          targets: this.el,
          width: this.animWidth,
          height: this.animHeigth,
          left: 0,
          top: 0,
          duration: this.options.outDuration,
          easing: 'easeOutQuad',
          complete: () => {
            /*this.placeholder.css({
              height: '',
              width: '',
              position: '',
              top: '',
              left: '0'
            });*/
            this.placeholder.removeAttr('style'); // Delete placeholder style attribute
            this.placeholder.css({ display: "block", position: "relative" }); // for the progress bar to be same width of img
  
            // Revert to width or height attribute
            if (this.attrWidth) {
              this.$el.attr('width', this.attrWidth);
            }
            if (this.attrHeight) {
              this.$el.attr('height', this.attrHeight);
            }
  
            this.$el.removeAttr('style');
            this.originInlineStyles && this.$el.attr('style', this.originInlineStyles);

            if (this.external != '') this.el.src = this.originalPic; // Replace pic
  
            // Remove class
            this.$el.removeClass('active');
            this.doneAnimating = true;
  
            // Remove overflow overrides on ancestors
            if (this.ancestorsChanged.length) {
              this.ancestorsChanged.css('overflow', '');
            }
  
            // onCloseEnd callback
            if (typeof this.options.onCloseEnd === 'function') {
              this.options.onCloseEnd.call(this, this.el);
            }
          }
        };
  
        anim(animOptions);
      }
  
      /**
       * Update open and close vars
       */
      _updateVars() {
        this.windowWidth = window.innerWidth;
        this.windowHeight = window.innerHeight;
        this.caption = this.el.getAttribute('data-caption') || '';
      }
  
      /**
       * Open Materialbox
       */

      preopen() {
        this._updateVars();
        if (this.external !== '') { // Switch original preview pic to full pic
          this.progress.insertAfter(this.$el); // Show progress while new src loads OR
          //this.placeholder.append(this.progress); // Show preload in image
          this.img = new Image();
          this.img.src = this.external;
          this.img.onload = event => {
            this.originalPicWidth = this.el.getBoundingClientRect().width;
            this.originalPicHeight = this.el.getBoundingClientRect().height;
            this.originalPic = this.el.src; // Save original pic
            this.el.src = this.external; // Replace pic
            this.open();
            this.progress.remove(); // Remove progress in image
          };
          this.img.onerror = event => {
            console.log("Preload error");
            this.progress.remove(); // Remove progress in image
          };
        } else {
          this.open();
        }
      }

      open() {
        this.originalWidth = this.el.getBoundingClientRect().width;
        this.originalHeight = this.el.getBoundingClientRect().height;
  
        // Set states
        this.doneAnimating = false;
        this.$el.addClass('active');
        this.overlayActive = true;
  
        // onOpenStart callback
        if (typeof this.options.onOpenStart === 'function') {
          this.options.onOpenStart.call(this, this.el);
        }

        if (this.external !== '') {
          this.placeholderWidth = this.originalPicWidth;
          this.placeholderHeight = this.originalPicHeight;
        } else {
          this.placeholderWidth = this.el.width;
          this.placeholderHeight = this.el.height;
        }
  
        // Set positioning for placeholder
        this.placeholder.css({
          //width: this.placeholder[0].getBoundingClientRect().width + 'px',
          //height: this.placeholder[0].getBoundingClientRect().height + 'px',
          width: this.placeholderWidth + 'px', // Original img width
          height: this.placeholderHeight + 'px', // Original img height
          position: 'relative',
          top: 0,
          left: 0
        });
  
        this._makeAncestorsOverflowVisible();
  
        // Set css on origin
        this.$el.css({
          position: 'absolute',
          'z-index': 1000,
          'will-change': 'left, top, width, height'
        });
  
        // Change from width or height attribute to css
        this.attrWidth = this.$el.attr('width');
        this.attrHeight = this.$el.attr('height');
        if (this.attrWidth) {
          this.$el.css('width', this.attrWidth + 'px');
          this.$el.removeAttr('width');
        }
        if (this.attrHeight) {
          this.$el.css('width', this.attrHeight + 'px');
          this.$el.removeAttr('height');
        }
  
        // Add overlay
        this.$overlay = $('<div id="materialbox-overlay"></div>')
          .css({
            opacity: 0
          })
          .one('click', () => {
            if (this.doneAnimating) {
              this.close();
            }
          });
  
        // Put before in origin image to preserve z-index layering.
        this.$el.before(this.$overlay);
  
        // Set dimensions if needed
        let overlayOffset = this.$overlay[0].getBoundingClientRect();
        this.$overlay.css({
          width: this.windowWidth + 'px',
          height: this.windowHeight + 'px',
          left: -1 * overlayOffset.left + 'px',
          top: -1 * overlayOffset.top + 'px'
        });
  
        anim.remove(this.el);
        anim.remove(this.$overlay[0]);
  
        // Animate Overlay
        anim({
          targets: this.$overlay[0],
          opacity: 1,
          duration: this.options.inDuration,
          easing: 'easeOutQuad'
        });
  
        // Add and animate caption if it exists
        if (this.caption !== '') {
          if (this.$photocaption) {
            anim.remove(this.$photoCaption[0]);
          }
          this.$photoCaption = $('<div class="materialbox-caption"></div>');
          this.$photoCaption.text(this.caption);
          $('body').append(this.$photoCaption);
          this.$photoCaption.css({ display: 'inline' });
  
          anim({
            targets: this.$photoCaption[0],
            opacity: 1,
            duration: this.options.inDuration,
            easing: 'easeOutQuad'
          });

          // Handle Exit triggers
          this._handleWindowScrollBound = this._handleWindowScroll.bind(this);
          this._handleWindowResizeBound = this._handleWindowResize.bind(this);
          this._handleWindowEscapeBound = this._handleWindowEscape.bind(this);
    
          window.addEventListener('scroll', this._handleWindowScrollBound);
          window.addEventListener('resize', this._handleWindowResizeBound);
          window.addEventListener('keyup', this._handleWindowEscapeBound);
        }
  
        // Resize Image
        let ratio = 0;
        let widthPercent = this.originalWidth / this.windowWidth;
        let heightPercent = this.originalHeight / this.windowHeight;
        this.newWidth = 0;
        this.newHeight = 0;
  
        if (widthPercent > heightPercent) {
          ratio = this.originalHeight / this.originalWidth;
          this.newWidth = this.windowWidth * 0.9;
          this.newHeight = this.windowWidth * 0.9 * ratio;
        } else {
          ratio = this.originalWidth / this.originalHeight;
          this.newWidth = this.windowHeight * 0.9 * ratio;
          this.newHeight = this.windowHeight * 0.9;
        }
  
        this._animateImageIn();

        // Handle Exit triggers
        this._handleWindowScrollBound = this._handleWindowScroll.bind(this);
        this._handleWindowResizeBound = this._handleWindowResize.bind(this);
        this._handleWindowEscapeBound = this._handleWindowEscape.bind(this);
  
        window.addEventListener('scroll', this._handleWindowScrollBound);
        window.addEventListener('resize', this._handleWindowResizeBound);
        window.addEventListener('keyup', this._handleWindowEscapeBound);
      }
  
      /**
       * Close Materialbox
       */
      close() {
        this._updateVars();
        this.doneAnimating = false;
  
        // onCloseStart callback
        if (typeof this.options.onCloseStart === 'function') {
          this.options.onCloseStart.call(this, this.el);
        }
  
        anim.remove(this.el);
        anim.remove(this.$overlay[0]);
  
        if (this.caption !== '') {
          anim.remove(this.$photoCaption[0]);
        }
  
        // disable exit handlers
        window.removeEventListener('scroll', this._handleWindowScrollBound);
        window.removeEventListener('resize', this._handleWindowResizeBound);
        window.removeEventListener('keyup', this._handleWindowEscapeBound);
  
        anim({
          targets: this.$overlay[0],
          opacity: 0,
          duration: this.options.outDuration,
          easing: 'easeOutQuad',
          complete: () => {
            this.overlayActive = false;
            this.$overlay.remove();
          }
        });
  
        this._animateImageOut();
  
        // Remove Caption + reset css settings on image
        if (this.caption !== '') {
          anim({
            targets: this.$photoCaption[0],
            opacity: 0,
            duration: this.options.outDuration,
            easing: 'easeOutQuad',
            complete: () => {
              this.$photoCaption.remove();
            }
          });
        }
      }
    }
  
    M.Materialbox = Materialbox;
  
    if (M.jQueryLoaded) {
      M.initializeJqueryWrapper(Materialbox, 'materialbox', 'M_Materialbox');
    }
  })(cash, M.anime);
              
            
!
999px

Console