70 lines
2.9 KiB
JavaScript
70 lines
2.9 KiB
JavaScript
// 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');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|