Skip to content

Instantly share code, notes, and snippets.

@geetfun

geetfun/post-images-new-tab-version-1.html.liquid

Last active May 20, 2018 21:45
Show Gist options
  • Save geetfun/ab6b2a8c9f37f9c47e759c4207dcb748 to your computer and use it in GitHub Desktop.
Save geetfun/ab6b2a8c9f37f9c47e759c4207dcb748 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. geetfun revised this gist May 20, 2018. 1 changed file with 1 addition and 25 deletions.
    26 changes: 1 addition & 25 deletions post-images-new-tab-version-1.html.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -2,11 +2,6 @@
    .post img:hover {
    cursor: pointer;
    }
    @media (min-width: 992px) {
    .modal-lg {
    max-width: 70%;
    }
    }
    </style>

    <script type="text/javascript">
    @@ -17,23 +12,4 @@
    newWindow.focus();
    });
    });
    </script>

    <div class="modal" id="image-modal">
    <div class="modal-dialog modal-lg">
    <div class="modal-content border-0">
    <div class="modal-header">
    <h5 class="modal-title">View Image</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">
    <img src="" class="img-fluid">
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
    </div>
    </div>
    </div>
    </script>
  2. geetfun created this gist May 20, 2018.
    39 changes: 39 additions & 0 deletions post-images-new-tab-version-1.html.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    <style type="text/css">
    .post img:hover {
    cursor: pointer;
    }
    @media (min-width: 992px) {
    .modal-lg {
    max-width: 70%;
    }
    }
    </style>

    <script type="text/javascript">
      $(function() {
    $(document).on("click", ".post img", function(e) {
    var $this = $(this);
    var newWindow = window.open($this.prop("src"), '_blank');
    newWindow.focus();
    });
    });
    </script>

    <div class="modal" id="image-modal">
    <div class="modal-dialog modal-lg">
    <div class="modal-content border-0">
    <div class="modal-header">
    <h5 class="modal-title">View Image</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">
    <img src="" class="img-fluid">
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
    </div>
    </div>
    </div>