Autore Topic: [v11] Hover su immagini con gli effetti dell'Oggetto Galleria  (Letto 1426 volte)

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1867
    • lemonsong's world
L'Oggetto Immagine prevede alcuni effetti su passaggio del mouse. Volendo ampliare le possibilità, usando gli oggetti del programma, possiamo ricorrere agli effetti dell'Oggetto Galleria - SlideShow Classico e un po' di codice.

Esempio: http://lemonsong.altervista.org/test_slideshow_hover/

Inserire un Oggetto Galleria con queste impostazioni:

[ Guests cannot view attachments ]

Nella scheda Elenco inserire le due immagini: la prima rappresenterà lo stato normale, la seconda l'immagine all'hover.

Assegnare a ciascuna immagine l'effetto desiderato; nell'esempio abbiamo utilizzato "Zoom" per la prima immagine e "Casuale" per la seconda.

In Proprietà Pagina - Esperto - Prima della chiusura del tag HEAD incolliamo questo codice:

Citazione
<style>
#imObjectGallery_4 div[data-num] {
    display:none !important;
}
</style>
<script>
$(document).ready(function () {
    imObjectGallery_4_settings['autoplay'] = false;
    $("#imObjectGallery_4").hover(function () {
        $("#imObjectGallery_4 div[data-num='1']").trigger('click');
    },

    function () {
        $("#imObjectGallery_4 div[data-num='0']").trigger('click');
    })
});
</script>


Il valore in rosso è da personalizzare con il numero contenuto nell'id dell'Oggetto Galleria, individuabile ad esempio con "Ispeziona codice" nell'anteprima di WS.


Testato con la versione 11.0.2.14


Grazie stesil per l'aiuto.