我有一个脚本来缩放/全屏图像。但这有一个大问题

问题描述 投票：0回答：1

感谢您花时间阅读我的文章，也许可以帮助我解决我遇到的小问题。

所以，长话短说，我是一名法国天文学家，我正在尝试为家人/朋友/我自己建立一个小型网站来存储和展示我不同的夜空图片。

有趣。

但是。 现在，我有一个 JavaScript 可以处理缩放、缩小、重置和全屏显示单个图像。但。从我得到的情况来看，它的工作方式（我对js不太擅长，而且据我所知，php / css不会做这个交易，我坚持下去），它有一个缺陷：如果我放置两个相同的图像容器（我将被迫在同一页面上执行此操作），它不“知道”要放大哪个图像。基本上，这是我的 html：

<div class="image-group">
    <div class="image-container">
        <img class="image" src="/Uploads/Images/IMG_7342_pipp_top_100r__651_regedited-2.jpg" alt="">
    </div>
    <div class="fullscreenImageContainer" onclick="closeFullscreen()">
        <span class="closeButton">X</span>
        <img class="fullscreenImage" src="/Uploads/Images/IMG_7342_pipp_top_100r__651_regedited-2.jpg" alt="">
    </div>
    <div class="zoombuttons">
        <button onclick="zoomIn(this)">Zoom +</button>
        <button onclick="zoomOut(this)">Zoom -</button>
        <button onclick="resetZoom(this)">Réinitialiser</button>
        <button onclick="openFullscreen(this)">Plein écran</button>
    </div>
</div>

还有我的 JS：

<sc   <script>
const image = document.getElementById('image');
    const container = document.getElementById('image-container');
let scale = 1;
let isDragging = false;
let startX, startY;
let posX = 0, posY = 0;

function zoomIn() {
    scale *= 1.1;
    updateImageTransform();
}

function zoomOut() {
    const initialScale = 1; // échelle initiale de l'image
    if (scale > initialScale) {
        scale = Math.max(initialScale, scale / 1.1); // Empêche le zoom d'aller en dessous de l'échelle initiale
        constrainPosition();
        updateImageTransform();
    }
}

function resetZoom() {
    scale = 1;
    posX = posY = 0;
    updateImageTransform();
}

function updateImageTransform() {
    image.style.transform = `translate(${posX}px, ${posY}px) scale(${scale})`;
}

function constrainPosition() {
    const imageRect = image.getBoundingClientRect();
    const containerRect = image.parentElement.getBoundingClientRect();

    const maxPosX = (imageRect.width - containerRect.width) / 2;
    const maxPosY = (imageRect.height - containerRect.height) / 2;

    posX = Math.min(Math.max(posX, -maxPosX), maxPosX);
    posY = Math.min(Math.max(posY, -maxPosY), maxPosY);
}

image.addEventListener('mousedown', (e) => {
    e.preventDefault();
    isDragging = true;
    startX = e.clientX;
    startY = e.clientY;
});

window.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    const dx = e.clientX - startX;
    const dy = e.clientY - startY;
    startX = e.clientX;
    startY = e.clientY;
    posX += dx;
    posY += dy;
    constrainPosition();
    updateImageTransform();
});

window.addEventListener('mouseup', () => {
    isDragging = false;
});

image.addEventListener('touchstart', (e) => {
    if (e.touches.length === 1) {
        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;
    }
    if (e.touches.length === 2) {
        const touch1 = e.touches[0];
        const touch2 = e.touches[1];
        initialDistance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
        initialScale = scale;
    }
});

image.addEventListener('touchmove', (e) => {
    e.preventDefault();
    if (e.touches.length === 1) {
        const dx = e.touches[0].clientX - startX;
        const dy = e.touches[0].clientY - startY;
        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;
        posX += dx;
        posY += dy;
        constrainPosition();
        updateImageTransform();
    }
    if (e.touches.length === 2) {
        const touch1 = e.touches[0];
        const touch2 = e.touches[1];
        const currentDistance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
        const delta = currentDistance - initialDistance;
        scale = Math.max(1, initialScale + delta * 0.01); // Ajustez le facteur de zoom
        constrainPosition();
        updateImageTransform();
    }
});

image.addEventListener('touchend', (e) => {
    // Rien à faire lors de la fin du toucher
});</script>
<script>


window.addEventListener('load', function() {
    function adjustContainerSize() {
        const imageRect = image.getBoundingClientRect();
        const containerHeight = image.parentElement.clientHeight;
        const imageHeight = imageRect.height;
        const imageWidth = imageRect.width;

        const containerWidth = (imageWidth / imageHeight) * containerHeight;
        image.parentElement.style.width = containerWidth + 'px';
    }

    adjustContainerSize();

    window.addEventListener('resize', adjustContainerSize);
});   </script>
 <script>
     // Fonction pour ouvrir l'image en plein écran
    function openFullscreen() {
        const fullscreenImageContainer = document.getElementById('fullscreenImageContainer');
        fullscreenImageContainer.style.display = 'flex';
    }

    // Fonction pour fermer l'image en plein écran
    function closeFullscreen() {
        const fullscreenImageContainer = document.getElementById('fullscreenImageContainer');
        fullscreenImageContainer.style.display = 'none';
    }

    // Gestion de l'événement ESC pour fermer l'image en plein écran
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            closeFullscreen();
        }
    });
ript>
 <script>
     // Fonction pour ouvrir l'image en plein écran
    function openFullscreen() {
        const fullscreenImageContainer = document.getElementById('fullscreenImageContainer');
        fullscreenImageContainer.style.display = 'flex';
    }

    // Fonction pour fermer l'image en plein écran
    function closeFullscreen() {
        const fullscreenImageContainer = document.getElementById('fullscreenImageContainer');
        fullscreenImageContainer.style.display = 'none';
    }

    // Gestion de l'événement ESC pour fermer l'image en plein écran
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            closeFullscreen();
        }
    });
 </script>

我希望它做的是链接到正在发生的操作。如果我有两个，则操作将在单击按钮的那个中发生，而不是在下面的另一个中发生。 （出于演示目的，您可以在此处查看它是如何集成的：http://astrostuff.franceserv.com/Ref/Public/Post.php?ID=9D466F87-FC78-31C7-5C05-5AD6A55F6897）。

理想的情况是拥有多个图像组，如下所示：

<div class="image-group">
    <div class="image-container">
        <img class="image" src="/Uploads/Images/IMG_7342_pipp_top_100r__651_regedited-2.jpg" alt="">
    </div>
    <div class="fullscreenImageContainer" onclick="closeFullscreen()">
        <span class="closeButton">X</span>
        <img class="fullscreenImage" src="/Uploads/Images/IMG_7342_pipp_top_100r__651_regedited-2.jpg" alt="">
    </div>
    <div class="zoombuttons">
        <button onclick="zoomIn(this)">Zoom +</button>
        <button onclick="zoomOut(this)">Zoom -</button>
        <button onclick="resetZoom(this)">Réinitialiser</button>
        <button onclick="openFullscreen(this)">Plein écran</button>
    </div>
</div>

And another one

And another one

无交互冲突。

但说实话，这不是我的代码，我只有一些关于 js 中简单事情的基础知识，而且我不知道如何让它工作（长话短说，我尝试了一些方法，这些方法几乎都有效）一场灾难。所以如果有人有任何想法，我真的很感激对此的帮助:)！ 谢谢，祝你有美好的一天！

我删除了我尝试过的方法，所以遗憾的是我没有任何例子。但基本上，我尝试了类似的方法：

        <button onclick="zoomIn(this)">Zoom +</button>

<script>
    function zoomIn(button) {
        const imageGroup = button.closest('.image-group');
        const image = imageGroup.querySelector('.image');
        let scale = parseFloat(image.dataset.scale) || 1;
        scale *= 1.1;
        image.dataset.scale = scale;
        updateImageTransform(image);
    }
</script>
and it didn't work very well. ( it prevented the top image to interact with the bottom one, but the top image still react to the button of the bottom one. )
image image-gallery photo-gallery
1个回答
0
投票

我不太确定我要说什么，但我认为即使使用 javascript 也不是针对您的情况的最佳方法...

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.