Написал скрипт для просмотра аватарок
Для тех, кто хочет рассмотреть поближе
Как пользоваться
Навести курсор на аватарку, нажать Alt
Установка
Скачать расширение Tamperermonkey
Нажать на иконку расширения. Выбрать "Создать новый скрипт".
Заменить код на этот. Нажать "Файл > Сохранить".
// ==UserScript==
// @name DTF Avatar Zoom
// @namespace http://tampermonkey.net/
// @version 2025-02-02
// @description Зуммирование аватарок 🔎🙋♂️
// @author Demon59901
// @match https://dtf.ru/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=dtf.ru
// @grant none
// ==/UserScript==
const { default: PhotoSwipe } = await import('https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/photoswipe.esm.min.js')
function openLightbox(avatar) {
const media = avatar.querySelector('[src]')
if (!media) return
const src = media.getAttribute('src').split('/-/')[0]
if (media.tagName === 'IMG') {
const image = new Image()
image.onload = () => {
const slide = {
src: image.src,
msrc: src + '/-/preview/72x/',
w: image.naturalWidth,
h: image.naturalHeight,
}
const pswp = new PhotoSwipe({ dataSource: [slide], returnFocus: false, padding: { top: 60, bottom: 60 } })
pswp.init()
}
image.onerror = () => {
console.error('Ошибка загрузки полной версии изображения.')
image.onerror = null
image.src = src + '/-/preview/500x/'
}
image.src = src
} else if (media.tagName === 'VIDEO') {
const slide = {
html: `<video src="${src}" style="max-width: 100%; max-height: 100%;" controls loop muted preload="auto"></video>`,
w: media.videoWidth || 800,
h: media.videoHeight || 600,
}
const pswp = new PhotoSwipe({ dataSource: [slide], returnFocus: false, padding: { top: 60, bottom: 60 } })
pswp.init()
}
}
function enableZoom() {
document.querySelectorAll('.author__avatar:not(.zoom-enabled)').forEach(avatar => {
avatar.classList.add('zoom-enabled')
avatar.addEventListener('mouseenter', e => {
const onKeyDown = e => {
if (e.key === 'Alt') {
document.removeEventListener('keydown', onKeyDown)
openLightbox(avatar)
}
}
document.addEventListener('keydown', onKeyDown)
avatar.addEventListener('mouseleave', () => {
document.removeEventListener('keydown', onKeyDown)
}, { once: true })
})
})
}
const pageObserver = new MutationObserver(enableZoom)
pageObserver.observe(document.querySelector('.view'), { childList: true, subtree: true })
document.addEventListener('DOMContentLoaded', enableZoom)
7 комментариев