Sei un appassionato di auto e passi ore a sfogliare annunci su AutoScout24.it? Ti è mai capitato di voler osservare meglio un dettaglio nelle foto, magari un particolare dell’interno o una finitura esterna, ma di sentirti limitato dalla galleria immagini standard del sito che non permette uno zoom libero e un facile spostamento?
Capita spesso! La galleria di AutoScout24 apre le immagini a schermo intera, ti permette di scorrerle, ma le opzioni di zoom e, soprattutto, di “pan” (spostare l’immagine zoomata) sono limitate o inesistenti.
Ma non temere! Abbiamo creato una soluzione semplice e gratuita per te, sotto forma di un userscript che aggiunge queste funzionalità direttamente alla galleria immagini di AutoScout24.it.
In questo articolo, ti spiegheremo cos’è uno userscript e come installare quello che abbiamo messo a punto per rendere la tua esperienza di visualizzazione delle auto ancora migliore.
Cosa sono gli Userscript e perché hai bisogno di un Gestore?
Gli userscript sono piccoli programmi scritti in JavaScript che modificano il comportamento o l’aspetto delle pagine web mentre le visiti. Sono estremamente utili per personalizzare la tua navigazione, aggiungere funzionalità mancanti o bloccare elementi fastidiosi.
Per far funzionare gli userscript, il tuo browser ha bisogno di un “gestore” di userscript. Il gestore è un’estensione del browser che rileva quali script sono installati e li esegue automaticamente sulle pagine web per cui sono stati designati. Il più popolare e consigliato si chiama Tampermonkey. Per gli utenti di Firefox, anche Greasemonkey è un’ottima alternativa storica.
Guida all’Installazione: Passo Dopo Passo
Segui questi semplici passaggi per installare il gestore di userscript e il nostro script per AutoScout24:
Passo 1: Installa un Gestore di Userscript
Se hai già Tampermonkey o Greasemonkey installato, puoi saltare questo passo. Altrimenti, scegli il gestore in base al tuo browser e installalo:
- Apri il tuo browser (Chrome, Firefox, Edge, Opera, Brave, ecc.).
- Vai allo store delle estensioni/add-on del tuo browser. Puoi cercarlo tramite il menu del browser o semplicemente cercando “Chrome Web Store” per Chrome, “Componenti aggiuntivi per Firefox” per Firefox, ecc.
- Cerca “Tampermonkey” (consigliato per la maggior parte dei browser) o “Greasemonkey” (per Firefox).
- Trova l’estensione ufficiale (controlla l’autore e le recensioni per sicurezza) e clicca su “Aggiungi” o “Installa”.
- Conferma l’installazione se richiesto. Vedrai una nuova icona aggiungersi alla barra degli strumenti del tuo browser (di solito l’icona di Tampermonkey è un quadrato nero con due sfere che sembrano occhi verdi).
Passo 2: Crea e Installa il Nostro Script per AutoScout24
Ora che hai il gestore installato, è il momento di aggiungere lo script per AutoScout24. Segui attentamente questi passaggi:
- Copia il codice completo dello script che trovi qui sotto. Assicurati di copiare tutto, dall’inizio (
// ==UserScript==) alla fine (})();), inclusi tutti i commenti e i metadati. - Apri il pannello di controllo di Tampermonkey/Greasemonkey. Clicca sull’icona dell’estensione nella barra degli strumenti del tuo browser.
- Seleziona l’opzione “Crea un nuovo script” o simile (il nome esatto può variare leggermente a seconda del gestore e della versione).
- Nella finestra dell’editor che si apre, cancella tutto il codice predefinito presente. Di solito è uno script di esempio con istruzioni su come iniziare. Elimina tutto quello che c’è nell’editor.
- Incolla il codice dello script che hai copiato nel passaggio 1 esattamente com’è, dall’inizio alla fine.
- Salva lo script. Cerca l’opzione per salvare nella finestra dell’editor. Di solito si trova nel menu “File” -> “Salva”, oppure potrebbe esserci un pulsante con l’icona di un floppy disk o la scritta “Salva” o “File”.
- Verifica che lo script sia abilitato. Dopo aver salvato, verrai reindirizzato all’elenco degli script gestiti da Tampermonkey/Greasemonkey. Assicurati che lo script chiamato “AutoScout24 Zoom e Drag Galleria Integrata” sia attivo. Di solito c’è un interruttore, una casella di controllo, o è indicato da un pallino colorato (verde, in genere, per attivo). Se non lo è, cliccaci sopra per attivarlo.
// ==UserScript==
// @name AutoScout24 Zoom e Drag Galleria Integrata (Test Event Propagation)
// @namespace http://tampermonkey.net/
// @version 1.8
// @description Abilita zoom e drag (test con stopPropagation) per l'immagine nella galleria di AutoScout24.it applicando la trasformazione al tag <picture>.
// @author BETASEMLA
// @match https://www.autoscout24.it/annunci/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
let targetElement = null; // Sarà l'elemento <picture>
let scale = 1;
let isDragging = false;
let startX, startY, translateX = 0, translateY = 0;
// Selettori basati sulla struttura HTML fornita
const galleryContainerSelector = '.image-gallery-swipe';
const activeSlideSelector = '.image-gallery-slide.image-gallery-center';
// Selettore per l'elemento <picture> all'interno della slide attiva
const pictureInSlideSelector = 'picture';
// Funzione per applicare gli stili e gli eventi all'elemento <picture> corrente
function applyZoomAndDrag(element) {
// Rimuovi eventi e stili dal vecchio elemento se esiste
if (targetElement && targetElement !== element) {
targetElement.style.transform = ''; // Reset CSS transform
targetElement.style.transition = ''; // Reset CSS transition
targetElement.style.cursor = ''; // Reset cursor
targetElement.style.userSelect = ''; // Reset user-select
if (targetElement.dataset.zoomAndDragApplied) {
targetElement.removeEventListener("wheel", handleWheel);
targetElement.removeEventListener("mousedown", handleMouseDown);
// Non rimuoviamo i listener globali da window qui
delete targetElement.dataset.zoomAndDragApplied;
}
}
targetElement = element; // Ora targetElement è il tag <picture>
scale = 1; // Reset zoom
translateX = 0; // Reset position
translateY = 0; // Reset position
// Applica stili e transizioni al nuovo elemento <picture>
targetElement.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
targetElement.style.transition = 'transform 0.2s ease';
targetElement.style.cursor = 'grab';
targetElement.style.userSelect = 'none'; // Previene il trascinamento nativo del browser
// Aggiungi gli eventi specifici dell'elemento se non sono già stati aggiunti
if (!targetElement.dataset.zoomAndDragApplied) {
targetElement.addEventListener("wheel", handleWheel);
targetElement.addEventListener("mousedown", handleMouseDown);
// Mousemove e mouseup sono su window per un'esperienza di trascinamento più fluida
targetElement.dataset.zoomAndDragApplied = 'true'; // Segna l'elemento come processato
}
}
// Funzioni per gli eventi di zoom e drag
function handleWheel(event) {
if (!targetElement) return;
event.preventDefault();
const zoomFactor = Math.sign(event.deltaY) * -0.1;
const newScale = scale + zoomFactor;
scale = Math.max(0.5, Math.min(newScale, 5)); // Limita lo zoom tra 0.5x e 5x
// Regola la traslazione per zoomare verso il cursore
const rect = targetElement.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
const previousScale = scale - zoomFactor;
if (previousScale !== 0) {
translateX = translateX - (mouseX - rect.width / 2) * (newScale / previousScale - 1);
translateY = translateY - (mouseY - rect.height / 2) * (newScale / previousScale - 1);
}
targetElement.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
}
function handleMouseDown(event) {
if (!targetElement) return;
event.preventDefault();
isDragging = true;
startX = event.clientX;
startY = event.clientY;
targetElement.style.cursor = 'grabbing';
// Eventi mousemove e mouseup sono aggiunti a window per tracciare il mouse anche fuori dall'immagine
// Sono già aggiunti una volta sola all'avvio dello script
}
// Aggiungi listener globali all'avvio dello script
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
function handleMouseMove(event) {
if (isDragging && targetElement) {
// *** AGGIUNTO STOP PROPAGATION QUI ***
event.stopPropagation();
event.stopImmediatePropagation();
const deltaX = event.clientX - startX;
const deltaY = event.clientY - startY;
translateX += deltaX;
translateY += deltaY;
targetElement.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
startX = event.clientX;
startY = event.clientY;
}
}
function handleMouseUp() {
isDragging = false;
if (targetElement) {
targetElement.style.cursor = 'grab';
}
// Non rimuoviamo i listener globali qui, rimangono attivi per tutto il tempo
}
// Funzione per cercare l'elemento <picture> attivo nella galleria e applicare zoom/drag
function findAndApplyZoom() {
// Controlla se il contenitore della galleria è presente (significa che è aperta)
const galleryActive = document.querySelector(galleryContainerSelector);
if (galleryActive) {
// Cerca l'elemento <picture> all'interno della slide attiva/centrale
const currentPictureElement = document.querySelector(`${activeSlideSelector} ${pictureInSlideSelector}`);
if (currentPictureElement && currentPictureElement !== targetElement) {
applyZoomAndDrag(currentPictureElement);
} else if (!galleryActive && targetElement) {
// Se la galleria non è più attiva e avevamo un targetElement, resettiamo
if (targetElement.dataset.zoomAndDragApplied) {
targetElement.style.transform = '';
targetElement.style.transition = '';
targetElement.style.cursor = '';
targetElement.style.userSelect = '';
targetElement.removeEventListener("wheel", handleWheel);
targetElement.removeEventListener("mousedown", handleMouseDown);
delete targetElement.dataset.zoomAndDragApplied;
}
targetElement = null;
scale = 1;
translateX = 0;
translateY = 0;
}
} else if (targetElement) {
// Se la galleria non è attiva ma per qualche motivo avevamo un targetElement, resettiamo
if (targetElement.dataset.zoomAndDragApplied) {
targetElement.style.transform = '';
targetElement.style.transition = '';
targetElement.style.cursor = '';
targetElement.style.userSelect = '';
targetElement.removeEventListener("wheel", handleWheel);
targetElement.removeEventListener("mousedown", handleMouseDown);
delete targetElement.dataset.zoomAndDragApplied;
}
targetElement = null;
scale = 1;
translateX = 0;
translateY = 0;
}
}
// Usiamo un MutationObserver per rilevare i cambiamenti nel DOM
const observer = new MutationObserver(mutations => {
// Controlliamo periodicamente l'elemento attivo ogni volta che avvengono mutazioni
findAndApplyZoom();
});
// Inizia l'osservazione sul body
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['class', 'style'] });
// Esegui un controllo iniziale
setTimeout(findAndApplyZoom, 500);
})();
Passo 3: Utilizza lo Script su AutoScout24.it
Ora sei pronto per usare lo script!
- Vai su una pagina di annuncio qualsiasi su AutoScout24.it
- Clicca sull’immagine principale dell’auto per aprire la galleria fotografica a schermo intero di AutoScout24.
- Una volta che la galleria è aperta e vedi l’immagine ingrandita:
- Usa la rotellina del mouse per zoomare avanti (scorrendo in su) e indietro (scorrendo in giù). Noterai che lo zoom è centrato sulla posizione del tuo cursore!
- Dopo aver zoomato, clicca e tieni premuto il tasto sinistro del mouse sull’immagine e trascina per spostare la visuale (fare “pan”) sull’immagine ingrandita.
- Clicca fuori dall’immagine (sullo sfondo scuro) o usa il pulsante di chiusura della galleria di AutoScout24 per uscire dalla visualizzazione a schermo intero.
Disclaimer di Sicurezza: Il Tuo Controllo sullo Script
Capita che installare script da fonti esterne possa generare dubbi sulla sicurezza. Ci teniamo a rassicurarti: questo script è stato sviluppato con l’unico scopo di aggiungere funzionalità di zoom e trascinamento alla galleria immagini di AutoScout24.it. Non raccoglie dati personali, non invia informazioni a server esterni, e non contiene codice malevolo di alcun tipo.
Trattandosi di codice JavaScript “open source” (il codice è visibile sopra), chiunque abbia le competenze può esaminarlo riga per riga per verificarne l’innocuità. Inoltre, se hai ancora dubbi o semplicemente curiosità, puoi copiare l’intero codice dello script e incollarlo in strumenti di analisi del codice online o chiedere a modelli avanzati di intelligenza artificiale come Gemini o ChatGPT di analizzarlo e spiegarti cosa fa ogni parte, per avere un’ulteriore conferma che non ci siano intenti nascosti o pericolosi. La tua sicurezza e tranquillità sono la nostra priorità.
Una Precisazione su AutoScout24
È importante sottolineare che non siamo affiliati in alcun modo con AutoScout24.it. Non riceviamo alcuna sponsorizzazione o compenso per lo sviluppo o la condivisione di questo script. Abbiamo scelto di creare questa funzionalità specifica per il loro sito semplicemente perché, a nostro avviso, la possibilità di zoomare e spostare liberamente le immagini di un veicolo è una caratteristica fondamentale e molto importante durante la fase di valutazione e scelta di un’auto usata o nuova online. Poter vedere ogni dettaglio, anche il più piccolo, può fare la differenza nella decisione di contattare il venditore. Questo script nasce unicamente dal desiderio di aggiungere una funzionalità utile per gli utenti, migliorando un aspetto dell’esperienza di navigazione che sentivamo mancante.
Nota Importante: Possibili Aggiornamenti del Sito
Gli script come questo si basano sulla struttura HTML e sui nomi delle classi CSS utilizzati dal sito web in un determinato momento. Se AutoScout24.it decidesse di aggiornare significativamente la struttura della sua galleria immagini, è possibile che i selettori CSS utilizzati nel nostro script (.image-gallery-swipe, .image-gallery-slide.image-gallery-center, etc.) diventino obsoleti.
Se noti che lo script smette improvvisamente di funzionare (lo zoom e il trascinamento non si attivano più nella galleria), è molto probabile che sia successo questo. In tal caso, faccelo sapere e faremo del nostro meglio per aggiornare lo script con i nuovi selettori.
Conclusione
Con questo semplice userscript, puoi finalmente esplorare le immagini delle auto su AutoScout24.it con la libertà di zoomare e trascinare che meriti. Installa Tampermonkey, aggiungi lo script e goditi una visualizzazione dettagliata come mai prima!
Speriamo che questo script ti sia utile e migliori la tua esperienza su AutoScout24!
