-
Notifications
You must be signed in to change notification settings - Fork 14.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add full-screen image display feature
- Loading branch information
1 parent
702b06c
commit ddbc2c2
Showing
4 changed files
with
141 additions
and
0 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 |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| {{ $src := (.Page.Resources.GetMatch (printf "**%s*" (.Get "src"))) }} | ||
| {{ $clickToZoom := .Get "clicktozoom" }} | ||
| <figure{{ with .Get "class" }} class="{{ . }} {{ if $clickToZoom }}clickable-zoom{{ end }}"{{ end }}> | ||
| {{- if .Get "link" -}} | ||
| <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}> | ||
| {{- end }} | ||
| <img src="{{ if $src }}{{ $src.RelPermalink }}{{ else }}{{ .Get "src" }}{{ end }}" | ||
| {{- if or (.Get "alt") (.Get "caption") }} | ||
| alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}" | ||
| {{- end -}} | ||
| {{- with .Get "width" }} width="{{ . }}"{{ end -}} | ||
| {{- with .Get "height" }} height="{{ . }}"{{ end -}} | ||
| /> <!-- Closing img tag --> | ||
| {{- if .Get "link" }}</a>{{ end -}} | ||
| {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}} | ||
| <figcaption> | ||
| {{ with (.Get "title") -}} | ||
| <h4>{{ . }}</h4> | ||
| {{- end -}} | ||
| {{- if or (.Get "caption") (.Get "attr") -}}<p> | ||
| {{- .Get "caption" | markdownify -}} | ||
| {{- with .Get "attrlink" }} | ||
| <a href="{{ . }}"> | ||
| {{- end -}} | ||
| {{- .Get "attr" | markdownify -}} | ||
| {{- if .Get "attrlink" }}</a>{{ end }}</p> | ||
| {{- end }} | ||
| </figcaption> | ||
| {{- end }} | ||
| </figure> |
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 |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| // The page and script is loaded successfully | ||
| $(document).ready(function() { | ||
| // Function to handle hover over <figure> elements | ||
| function handleFigureHover() { | ||
| // Only change cursor to zoom-in if figure has 'clickable-zoom' class | ||
| if ($(this).hasClass('clickable-zoom') && !$(this).hasClass('figure-fullscreen-content')) { | ||
| $(this).css('cursor', 'zoom-in'); | ||
| } | ||
| } | ||
|
|
||
| // Attach hover event to <figure> elements with 'clickable-zoom' class | ||
| $('figure.clickable-zoom').hover(handleFigureHover, function() { | ||
| // Mouse out - revert cursor back to default | ||
| $(this).css('cursor', 'default'); | ||
| }); | ||
|
|
||
| // Attach click event to <figure> elements with 'clickable-zoom' class | ||
| $('figure.clickable-zoom').click(function() { | ||
| var $figure = $(this); | ||
|
|
||
| // Check if the figure has 'clickable-zoom' class | ||
| if ($figure.hasClass('clickable-zoom')) { | ||
| var $img = $figure.find('img'); // Get the <img> element within the clicked <figure> | ||
|
|
||
| // Toggle 'figure-zoomed' class to scale the image | ||
| $img.toggleClass('figure-zoomed'); | ||
|
|
||
| // Create a full-screen overlay | ||
| var $fullscreenOverlay = $('<div class="figure-fullscreen-overlay"></div>'); | ||
|
|
||
| // Clone the <img> element to display in full-screen | ||
| var $fullscreenImg = $img.clone(); | ||
| $fullscreenImg.addClass('figure-fullscreen-img'); | ||
|
|
||
| // Append the full-screen image to the overlay | ||
| $fullscreenOverlay.append($fullscreenImg); | ||
|
|
||
| // Create a close button for the full-screen overlay | ||
| var $closeButton = $('<span class="figure-close-button">×</span>'); | ||
| $closeButton.click(function() { | ||
| // Remove the full-screen overlay when close button is clicked | ||
| $fullscreenOverlay.remove(); | ||
| $('body').css('overflow', 'auto'); // Restore scrolling to the underlying page | ||
|
|
||
| // Remove 'figure-zoomed' class to reset image scale | ||
| $img.removeClass('figure-zoomed'); | ||
| }); | ||
| $fullscreenOverlay.append($closeButton); | ||
|
|
||
| // Append the overlay to the body | ||
| $('body').append($fullscreenOverlay); | ||
|
|
||
| // Disable scrolling on the underlying page | ||
| $('body').css('overflow', 'hidden'); | ||
|
|
||
| // Close full-screen figure when clicking outside of it (on the overlay) | ||
| $fullscreenOverlay.click(function(event) { | ||
| if (event.target === this) { | ||
| // Clicked on the overlay area (outside the full-screen image) | ||
| $fullscreenOverlay.remove(); | ||
| $('body').css('overflow', 'auto'); // Restore scrolling to the underlying page | ||
|
|
||
| // Remove 'figure-zoomed' class to reset image scale | ||
| $img.removeClass('figure-zoomed'); | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| }); |