Jump to content
_duken_

Installation FANCYBOX ou SIMILAIRE PS 1.7

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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>

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More