Forum : Zoombox

Bonjour,

Je développe actuellement une partie de site web. Je souhaite utiliser Zoombox pour agrandir une div lors d'un clic sur une icone. Cependant, mon code ne fonctionne pas et je n'arrive à comprendre pourquoi.

Le html :

<div class="panel panel-default"><!--style="width:350px;"-->
                            <div class="panel-heading header">
                                <span class="pull-right">
                                    <i class="fa fa-search-plus box-icon zoomBox" id="ZA1" title="" style="margin-right:10px;"></i>
                                    <i class="fa fa-minus box-icon reduce" id="RA1" title="Réduire la boîte"></i>
                                    <i class="fa fa-plus box-icon PA" id="PA1" title="Agrandir la boîte"></i>
                                </span>
                                <span class="pull-left">
                                    <i class="fa fa-briefcase"></i>
                                </span>
                                <h4 class="panel-title">Boite à outils</h4>                             
                            </div>
                            <div class="panel-body zoombox" id="A1">
                                <p>- Liens internes</p>
                                <p>- Liens notes</p>
                                <p>- LDA</p>    
                            </div>

                        </div>

Le JS :

$(document).ready(function(){
    $("#ZA1").click(function(){
        $("#A1").zoombox();
    });
});

Je veux utiliser zoombox sur #A1 lors du clique sur #ZA1.

Merci d'avance

Lartak

Réponse acceptée

Avec le code ci-dessus ?
Je viens de tester et ça fonctionne bien de mon côté.

Lartak

Bonjour.
Zoombox ne sert pas à afficher ou cacher une div, mais à afficher du contenu dans une modal.
Le plugin ne te sera donc pas utile pour ce que tu veux faire.

sytrys59

Auteur

Je me suis peut être mal fait comprendre. Je veux afficher la div dans un modal (comme quand on clique sur une photo et qu'elle passe dans une lightbox au premier plan). Au niveau métier, il faut prendre en compte que les users font des réunions et qu'ils ont besoin de pouvoir agrandir chaque panel. La réduction est faites ailleurs et fonctionne.

sytrys59

Auteur

Hm je vais essayer ça. Sinon ce n'est pas possible de faire un modal sur bootstrap ?

Lartak

Ok.
Dans ce cas là, tu peux enlever la classe zoomBox et pour le code Javascript, remplaces par exemple par :


jQuery(document).ready(function ($) {
    $('#ZA1').on('click', function () {
        var $clone = $('#A1').clone().html();
        $.zoombox.html($clone, {theme: 'prettyphoto'});
    });
});

sytrys59

Auteur

Ta solution fonctionne bien. Parcontre quand je quitte la light box, ma div disparait de la page ... :/

Lartak

Mais quand tu rouvres la lightbox après l'avoir fermé, le code html apparait bien, c'est uniquement pendant que tu fermes la lightbox que le code html disparaît et c'est normal c'est le plugin qui supprime le contenu.

sytrys59

Auteur

Mais pour que le contenu réaparaisse après avoir quitter la lightbox, je dois reload la page. Il faudrait que tout le contenu reste sur la page après la fermeture de la lightbox

sytrys59

Auteur

Bizarre :/ Du miens, le contenu de la div s'affiche sur la box mais disparait de la page. Et quand je quitte la light box il ne réapparait pas ..

Lartak

Tu peux vérifier ici.

Zoombox

10 réponses