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

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

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.

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.

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

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'});
    });
});

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

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.

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

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 ..

Tu peux vérifier ici.