Opale immersif : changer l'arrière-plan des slides facilement

Modèles documentaires Opale
1

Bonjour,
en injectant quelques lignes de javascript dans le fichier skin.js, je parviens à insérer une image d’arrière-plan et je crée un petit effet de transparence pour plus d’immersivité.
J’ai créé une fonction qui s’exécute régulièrement pour corriger le problème d’un rectangle blanc qui s’affiche lors du défilement des slides.
Voici ce script :

// Skin-specific Javascript code


function changeBackground(b) {
    //   no-repeat center center fixed
    back = "url(" + back + ")"
        // document.getElementById('slideFrame').style.backgroundImage = back;
    document.getElementById('slideFrame').style.background = "no-repeat center center fixed " + back;
    document.getElementById('slideFrame').style.backgroundSize = "cover";
    // document.getElementById('root').style.backgroundImage = back;
    // document.getElementById('root').style.opacity = 0;
    document.getElementById('home').getElementsByTagName('div')[0].style.backgroundImage = back; // couverture
}

back = "https://letrois.info/wp-content/uploads/2021/10/VUE_1_WEB_ENGEL-2048x1376.jpg"
changeBackground(back)

document.querySelector('footer').style = 'display: none' // supprimer le footer

function semitransp(tag) {
    elements = document.getElementsByClassName(tag); // get all elements
    for (i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor = "#ffffffdf";
    }
}

function deleteOpacity(tag) {
    // lorsque la slide est un peu longue et qu'une partie du texte est caché sur le bas de l'écran en attente de s'afficher, opale affiche un rectangle blanc avec une opacité de 0.9, ce qui ne colle pas avec mon effet de transparence. Passer cette opacité à 0 règlerait le problème
    elements = document.getElementsByClassName(tag); // get all elements
    for (i = 0; i < elements.length; i++) {
        elements[i].style.opacity = "0";
    }
}

function changeBackground4ActiveImage() {
    elements = document.getElementsByClassName("ssSlide mainSlide"); // get all elements
    // Il s'agit d'une 
    for (i = 0; i < elements.length; i++) {
        if (elements[i].style.visibility != "hidden") {

            slides = elements[i].getElementsByClassName("ssBk");
            for (j = 0; j < slides.length; j++) {
                if (slides[j].style.opacity != "0") {
                    if (typeof(slides[j].getElementsByTagName("img")[0]) != "undefined") {
                        firstImage = slides[j].getElementsByTagName("img")[0]; // numéro de slide ?
                        // console.log(elements[i].section.div.div);
                        if (typeof(firstImage.src) != "undefined") {
                            console.log(firstImage.src);
                            back = firstImage.src;
                            changeBackground(back)
                        } else {
                            console.log("Pas d'image !");
                        }
                    } else {
                        console.log("Pas d'image !");
                    }
                }
            }

        }
    }
}

semitransp('ssBk');
semitransp('ssMask'); // slide de la slide : élément supérieur ou inférieur. => supprimé par le changement de slide !

var intervalId = window.setInterval(function() {
    deleteOpacity('ssMask');
    // changeBackground4ActiveImage();
}, 500);

Une autre idée serait de désactiver (ou modifierà l’effet de transition de fondu entre slides car avec une image en fond, le fondu s’applique à l’arrière-plan et non pas seulement au texte.

Enfin, le top serait de changer d’image d’arrière-plan en cours de slides, mais je ne sais pas comment faire. Peut-être en injectant du js dans des slides ?

2

Désactiver les blocs blancs qui font transition devrait être possible en css.

Pour ton deuxième besoin là je sèche. Il faudrait passer quelques heures à creuser. :slight_smile:

3

Merci Loïc.
J’ai mis à jour le script… à défaut d’avoir un écouteur de changement de slide, la fonction ci-dessus vérifie toutes les demi secondes s’il faut supprimer l’apparition des carrés blancs.
Pour supprimer le délai de transition, il est possible de modifier slideshow.css dans la partie commentée ANIMATION, et de réduire l’effet de transition à 0 sec.
Pour le changement de slides à chaque division, l’idée serait d’injecter un script js dans les étapes de divisions chargées de changer le fond d’écran en allant chercher une image qui contiendrait le numéro de la division (c’est-à-dire en le numéro de l’instance de la classe division). Dans ce cas, il est sans doute plus simple de placer ses fonds d’écran en ligne et de les atteindre via une url, car en local, il faudrait créer un skin et incorporer les images dans l’éditeur sans pourtant les afficher à l’endroit prévu.
Je n’ai pas eu le temps de mettre en œuvre cette idée avant mon intervention.

4

Pour supprimer les carrés blancs, pourquoi tu ne fais pas àa en css avec un simple display:none ou color:transparent ?

5

Le problème est que ls je se lance au début du chargement du diaporama, une seule fois, alors que les carrés blancs s’activent lorsqu’il y a un slide, le DOM est modifié à ce momen-là… à défaut de savoir comment surveiller ce type d’évènement, je suis obligé de lancer un script de vérification toutes les secondes ou moins.

6

Justement, c’est pour ça que je suggère de modifier la css et non pas le js pour éliminer les carrés blancs.
Ton js tu le fais dans le cadre d’un skin guidé je suppose.
Du coup dans les surcharges css de ton skin guidé, tu peux mettre :

.ssMask {
 display: none;
}

Ça éliminera les carrés blancs.

7

Merci pour l’idée, mais cela entraîne l’impossibilité de scroller pour moi ?

8

Non, ça ne change rien au comportement, ça élimine juste ces caches blancs. Si j’ai bien compris, c’est l’une des choses que tu cherches à faire. Après j’ai peut-être mal compris.

9

Avec Aurora et Opale 4.0.4, quand j’ajoute ton code à la fin de skin.css, cela empêche définitivement le mode slide des diapos.
Effectivement c’est une des choses que je cherche à faire, en tout cas plus proprement qu’avec un js lancé toutes les demi secondes.
Il n’y a pas vraiment de doc pour la partie dév, on se débrouille avec le code je crois ?

10

Ah, il y a peut-être du js qui va chercher le display de ces blocs, qui qui casse s’ils sont en display none.
Du coup tu peux tenter plutôt ça :

.ssMask {
 background-color:transparent;
}

Pas de doc spécifique externe sur le développement du générateur, à ma connaissance.