Visualizzazione zoom a comparsa

La vista principale è costituita dall’immagine statica e dall’immagine ingrandita mostrata nella vista a comparsa. È inoltre costituito dall’area di navigazione evidenziata visualizzata sull’immagine statica e dal messaggio di suggerimento visualizzato sopra l’immagine statica.

Se le dimensioni dell’immagine visualizzata non corrispondono alle dimensioni della visualizzazione a comparsa dello zoom, il contenuto dell’immagine viene centrato all’interno dell’area di visualizzazione rettangolare della visualizzazione a comparsa.

Proprietà CSS della vista principale

L’aspetto della vista principale è controllato con il seguente selettore di classe CSS:

.s7flyoutviewer .s7flyoutzoomview

Esempio: per rendere trasparente la visualizzazione principale:

.s7flyoutviewer .s7flyoutzoomview {
 background-color: transparent;
}

Proprietà CSS della visualizzazione a comparsa

L’aspetto della visualizzazione a comparsa è controllato con il seguente selettore di classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

Esempio: per impostare una visualizzazione a comparsa su 600 x 400 pixel, con uno scostamento di 100 pixel a destra della visualizzazione principale 512 x 288 mostrata nell’esempio precedente:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom {
 left: 612px;
 top: 0px;
 width: 600px;
 height: 400px;
}

Proprietà CSS dell’evidenziazione nella vista principale

L’aspetto dell’evidenziazione nella vista principale è controllato con il seguente selettore di classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7highlight

È possibile controllare lo sfondo, il bordo, la trasparenza e attributi simili utilizzando CSS. Tuttavia, le dimensioni e la posizione dell’elemento DOM evidenziato sono gestite dalla logica del visualizzatore. Non è supportata la possibilità di bypassarla tramite CSS.

Esempio: per impostare l’evidenziazione verde con trasparenza del 40% e bordo rosso di un pixel:

.s7flyoutviewer .s7flyoutzoomview .s7highlight {
 background-color: green;
 opacity: 0.4;
 filter: alpha(opacity = 40);
 border: 1px solid red;
}

Proprietà CSS del cursore

Quando highlightmode è impostato su cursor, l’evidenziazione si trova nella vista principale viene sostituita da un’immagine a cursore a dimensione fissa, controllata dal selettore di classi CSS:

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

È possibile controllare l'immagine di sfondo e le dimensioni utilizzando CSS.

Le proprietà CSS applicabili includono:

Proprietà CSS della sovrapposizione

Quando il overlay è impostato su 1, l’area intorno al fotogramma di evidenziazione o all’immagine del cursore viene controllata con il selettore di classe CSS:

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay

Proprietà CSS del messaggio di suggerimento

L’aspetto del messaggio di suggerimento è controllato con il seguente selettore di classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7tip

È possibile configurare stile, dimensione, aspetto e offset verticale del font attraverso CSS. Tuttavia, l’allineamento orizzontale è gestito dalla logica del visualizzatore. Sovrascrittura tramite CSS utilizzando left o right proprietà non supportate.

Il messaggio di suggerimento può essere localizzato. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare un messaggio di suggerimento semitrasparente con un carattere bianco Arial® 12-px, uno scostamento di 50 pixel dal fondo della vista principale, della spaziatura e un bordo arrotondato:

.s7flyoutviewer .s7flyoutzoomview .s7tip {
bottom: 50px;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 12px;
padding-right: 12px;
background-color: #000000;
border-radius: 4px;
opacity: 0.5;
filter: alpha(opacity = 50);
}

Risorse Business.Adobe.com

Ecommerce Integrations Content Insights Asset Collections Content Management Headless Cms Digital Signage