Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
64 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,83 +1,81 @@ | ||
| $(window).on('load', function() { | ||
| jQuery(document).ready(function($) { | ||
| // Create a div for our popup image | ||
| $(document).ready(function() { | ||
| // Create a div for our popup image | ||
|
|
||
| $("body").append("<div class=\"imagepopup\"><img class=\"popup\"></div>"); | ||
| $("body").append("<div class=\"imagepopup\"><img class=\"popup\"></div>"); | ||
|
|
||
| // Disable the mousewheel when the div for our popup image is visible | ||
| // Disable the mousewheel when the div for our popup image is visible | ||
|
|
||
| $("div.imagepopup").bind("mousewheel", function() { | ||
| return false; | ||
| }); | ||
|
|
||
| // Initially hide the div for our popup image | ||
|
|
||
| hideImagePopup(); | ||
| $("div.imagepopup").bind("mousewheel", function() { | ||
| return false; | ||
| }); | ||
|
|
||
| // Show and update the contents of the div for our popup image | ||
| // Initially hide the div for our popup image | ||
|
|
||
| $("[imagepopup]").click(function() { | ||
| $("div.imagepopup").css("visibility", "visible"); | ||
| hideImagePopup(); | ||
|
|
||
| var imagepopup = $("div.imagepopup img.popup"); | ||
| // Show and update the contents of the div for our popup image | ||
|
|
||
| // Retrieve the size of our image and its padding | ||
| // Note: to use $(imagepopup).width() and $(imagepopup).height() to | ||
| // retrieve the size of our image is not good enough since | ||
| // our image won't be loaded yet, so we would effectively be | ||
| // retrieving the size of our previous image. Now, when it | ||
| // comes to the padding, it will always be the same for all | ||
| // our images, hence we can safely use $(imagepopup)... | ||
| $("[imagepopup]").click(function() { | ||
| $("div.imagepopup").css("visibility", "visible"); | ||
|
|
||
| var image = new Image(); | ||
| var imagepopup = $("div.imagepopup img.popup"); | ||
|
|
||
| image.src = $(this).attr("src"); | ||
| // Retrieve the size of our image and its padding | ||
| // Note: to use $(imagepopup).width() and $(imagepopup).height() to | ||
| // retrieve the size of our image is not good enough since our | ||
| // image won't be loaded yet, so we would effectively be | ||
| // retrieving the size of our previous image. Now, when it comes | ||
| // to the padding, it will always be the same for all our images, | ||
| // hence we can safely use $(imagepopup)... | ||
|
|
||
| var imageWidth = image.width; | ||
| var imageHeight = image.height; | ||
| var imagePaddingX = $(imagepopup).innerWidth()-$(imagepopup).width(); | ||
| var imagePaddingY = $(imagepopup).innerHeight()-$(imagepopup).height(); | ||
| var image = new Image(); | ||
|
|
||
| $(imagepopup).attr("src", $(this).attr("src")); | ||
| image.src = $(this).attr("src"); | ||
|
|
||
| $(imagepopup).css({ | ||
| "width": imageWidth, | ||
| "height": imageHeight, | ||
| "margin-top": -0.5*(imageHeight+imagePaddingY), | ||
| "margin-left": -0.5*(imageWidth+imagePaddingX) | ||
| }); | ||
| }); | ||
| var imageWidth = image.width; | ||
| var imageHeight = image.height; | ||
| var imagePaddingX = $(imagepopup).innerWidth()-$(imagepopup).width(); | ||
| var imagePaddingY = $(imagepopup).innerHeight()-$(imagepopup).height(); | ||
|
|
||
| // Hide the div for our popup image when clicking on it | ||
| $(imagepopup).attr("src", $(this).attr("src")); | ||
|
|
||
| $("div.imagepopup").click(function() { | ||
| hideImagePopup(); | ||
| $(imagepopup).css({ | ||
| "width": imageWidth, | ||
| "height": imageHeight, | ||
| "margin-top": -0.5*(imageHeight+imagePaddingY), | ||
| "margin-left": -0.5*(imageWidth+imagePaddingX) | ||
| }); | ||
| }); | ||
|
|
||
| // Ignore all key strokes, except the ESC key, when the div for our | ||
| // popup image is visible | ||
| // Hide the div for our popup image when clicking on it | ||
|
|
||
| $(document).keydown(function(event) { | ||
| if ($("div.imagepopup").css("visibility") === "visible") { | ||
| if (event.keyCode !== 27) | ||
| event.preventDefault(); | ||
| } | ||
| }); | ||
| $("div.imagepopup").click(function() { | ||
| hideImagePopup(); | ||
| }); | ||
|
|
||
| // Hide the div for our popup image if the ESC key is pressed when our | ||
| // div is visible | ||
| // Ignore all key strokes, except the ESC key, when the div for our popup | ||
| // image is visible | ||
|
|
||
| $(document).keyup(function(event) { | ||
| if ( ($("div.imagepopup").css("visibility") === "visible") | ||
| && (event.keyCode === 27)) { | ||
| hideImagePopup(); | ||
| } | ||
| }); | ||
| $(document).keydown(function(event) { | ||
| if ($("div.imagepopup").css("visibility") === "visible") { | ||
| if (event.keyCode !== 27) | ||
| event.preventDefault(); | ||
| } | ||
| }); | ||
|
|
||
| // Hide the div for our popup image | ||
| // Hide the div for our popup image if the ESC key is pressed when our div | ||
| // is visible | ||
|
|
||
| function hideImagePopup() { | ||
| $("div.imagepopup").css("visibility", "hidden"); | ||
| $(document).keyup(function(event) { | ||
| if ( ($("div.imagepopup").css("visibility") === "visible") | ||
| && (event.keyCode === 27)) { | ||
| hideImagePopup(); | ||
| } | ||
| }); | ||
|
|
||
| // Hide the div for our popup image | ||
|
|
||
| function hideImagePopup() { | ||
| $("div.imagepopup").css("visibility", "hidden"); | ||
| } | ||
| }); |