Installation FANCYBOX ou SIMILAIRE PS 1.7

[_duken_]

Bonjour,

Je travaille avec Prestashop depuis peu de temps et certaines choses m’échappe un peu.

J'ai prestashop 1.7.5.2 installé avec le théma WAREHOUSE mis à jour. Je dois créer une galerie de photos de style fancybox, comportant des miniatures. Lorsque vous cliquez sur une miniature, ell s'ouvre comme un pop-up et l'on doit pouvoir passer à la photo suivante avec les flèches droite ou gauche.

Le problème est que je recherche une solution depuis plusierus jours mais je ne trouve rien adapté a 1.7.

Quelqu'un peut-il me passer un bon tuto qui explique bien pour PS 1.7 comment installer Fancybox ou similaire pas a pas.
Ou une autre solution similaire spécifique pour PS 1.7., Ou un module gratuit ou de paiement (s'il n'y a pas d'autre moyen).

Merci beaucoup.

Salutations.

[Yanel]

peux tu donner un exemple sous forme d'un lien pour mieux comprendre ?

[doekia]

c'est plutot un problème de ton thème qu'un problème prestashop. Si il implémente une gallery fancybox, il devrait avoir intégré le code avec.

D'autant... qu'il y a tellement de parfum de fancybox que si tu n'utilise pas celui consacré ça ne marchera pas non plus.

Voir avec l'auteur du thème donc

[_duken_]

Salut,

 

Bien  sure! https://mdd.eu/es/seating/frank/

Les photos du bas en faisant click.

 

ou https://maisondescarnets.hypotheses.org/3054

en faisant click sur exemple d'une gallerie.

Effet lightbox..

 

Merci d'avance.

[_duken_]

2 minutes ago, doekia said:

c'est plutot un problème de ton thème qu'un problème prestashop. Si il implémente une gallery fancybox, il devrait avoir intégré le code avec.

D'autant... qu'il y a tellement de parfum de fancybox que si tu n'utilise pas celui consacré ça ne marchera pas non plus.

Voir avec l'auteur du thème donc

Merci pour le conseil. Je me mets en contact avec aussi.

[doekia]

Mais, mais, ... tu as des bouts de ton wordpress qui fuitent dans ton prestashop.

https://mdd.eu/wp-includes/js/utils.min.js?x55738

par exemple

[_duken_]

11 minutes ago, doekia said:

Mais, mais, ... tu as des bouts de ton wordpress qui fuitent dans ton prestashop.

https://mdd.eu/wp-includes/js/utils.min.js?x55738

par exemple

La page de MDD n'est pas ma page.

C'est un d'exemple.

J'ai essayer d'implanté ce que je veut faire par CSS avec le suivant code,

Mais il n'y a pas moyen de le faire fonctionner.

C'est tellement simple a faire, et tellement dure a faire fonctionner sur PS...

CSS:

.galeria {
    width: 90%;
    margin: auto;
    list-style: none;
    padding: 20px;
    box-sizing: border-box;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.galeria li {
    margin: 5px;
}

.galeria img {
    width: 150px;
    height: 100px;
}

/*Estilos del modal*/

.modal {
    display: none;
}

.modal:target {
    
    display: block;
    position: fixed;
    background: rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal h3 {
    color: #fff;
    font-size: 30px;
    text-align: center;
    margin: 15px 0;
}

.imagen {
    width: 100%;
    height: 50%;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagen a {
    color: #fff;
    font-size: 40px;
    text-decoration: none;
    margin: 0 10px;
}

.imagen a:nth-child(2) {
    margin: 0;
    height: 100%;
    flex-shrink: 2;
}

.imagen img {
    width: 500px;
    height: 100%;
    max-width: 100%;
    border: 7px solid #fff;
    box-sizing: border-box;
}

.cerrar {
    display: block;
    background: #fff;
    width: 25px;
    height: 25px;
    margin: 15px auto;
    text-align: center;
    text-decoration: none;
    font-size: 25px;
    color: #000;
    padding: 5px;
    border-radius: 50%;
    line-height: 25px;
}

HTML:

    <h1>Galería de imágenes con efecto lightbox solo con CSS</h1>
    
    <ul class="galeria">
        <li><a href="#img1"><img src="http://www.paisajesimagenes.com/wp-content/uploads/Descripci%C3%B3n-de-paisajes..jpg"></a></li>
        <li><a href="#img2"><img src="http://neo-deco.es/wp-content/uploads/2013/01/Paisaje-de-monta%C3%B1a.jpg"></a></li>
        <li><a href="#img3"><img src="http://www.paisajesimagenes.com/wp-content/uploads/Descripci%C3%B3n-de-paisajes..jpg"></a></li>
        <li><a href="#img4"><img src="http://neo-deco.es/wp-content/uploads/2013/01/Paisaje-de-monta%C3%B1a.jpg"></a></li>
    </ul>

    <div class="modal" id="img1">
        <h3>Paisaje 1</h3>
        <div class="imagen">
            <a href="#img4"><</a>
            <a href="#img2"><img src="http://www.paisajesimagenes.com/wp-content/uploads/Descripci%C3%B3n-de-paisajes..jpg"></a>
            <a href="#img2">></a>
        </div>
        <a class="cerrar" href="">X</a>
    </div>
    
    <div class="modal" id="img2">
        <h3>Paisaje 2</h3>
        <div class="imagen">
            <a href="#img1"><</a>
            <a href="#img3"><img src="http://neo-deco.es/wp-content/uploads/2013/01/Paisaje-de-monta%C3%B1a.jpg"></a>
            <a href="#img3">></a>
        </div>
        <a class="cerrar" href="">X</a>
    </div>
    
    <div class="modal" id="img3">
        <h3>Paisaje 3</h3>
        <div class="imagen">
            <a href="#img2"><</a>
            <a href="#img4"><img src="http://www.paisajesimagenes.com/wp-content/uploads/Descripci%C3%B3n-de-paisajes..jpg"></a>
            <a href="#img4">></a>
        </div>
        <a class="cerrar" href="">X</a>
    </div>
    
    <div class="modal" id="img4">
        <h3>Paisaje 4</h3>
        <div class="imagen">
            <a href="#img3"><</a>
            <a href="#img1"><img src="http://neo-deco.es/wp-content/uploads/2013/01/Paisaje-de-monta%C3%B1a.jpg"></a>
            <a href="#img1">></a>
        </div>
        <a class="cerrar" href="">X</a>
    </div>

 

[doekia]

Pour diagnostiquer mon cancer, j'ai envoyer mon fils pour passer l'IRM. Bilan je suis totalement guéri. Un miracle selon le corps médical

[_duken_]

1 minute ago, doekia said:

Pour diagnostiquer mon cancer, j'ai envoyer mon fils pour passer l'IRM. Bilan je suis totalement guéri. Un miracle selon le corps médical

Désoler.

Je comprend...

Je cherche un module.