Fancybox nouvel Onglet

Version imprimable

16/04/2014, 17h43
MimiWoOlf

Fancybox nouvel Onglet

Bonjour à toutes et à tous,

J'utilise actuellement le plugin "Fancybox" qui est un plugin Jquery permettant d'afficher une page "par dessus" une autre. Cette nouvelle page utilise donc les mêmes fichiers que la page d'en "dessous" (CSS etc...).

Mon problème vient du fait que si j'ouvre mon lien dans un nouvel onglet (via clic droit ou clic + molette ) qui normalement doit s'ouvrir en fancybox, vu qu'il s'ouvre dans un autre onglet, la page est dépourvu de CSS, de JS etc...

Du coup si cette page est par exemple alimenté en ajax rien ne fonctionne.

J'ai vu quelque fois que le fait d'ouvrir dans un nouvel onglet amène sur une page about:blank qui n'affiche rien, c'est donc ce que j'aimerai faire pour éviter d'ouvrir le contenu de la fancybox dans un autre onglet.

Je vous remercie !
17/04/2014, 01h49
la.lune

La logique de Fancybox n'est pas de donner tout une page entière à moins de l’introduire dans un iframe, c'est une image ou un div contenant le contenu à afficher ou comme j'ai dis un iframe, et là c'est tout un contexte.
La question est la suivante que ce que tu met dans la propriété href, il faut les lier à la page en cours, ainsi même si tu clique pour ouvrir dans un nouvel onglet alors en fournissant par exemple

Code:

<a href="#lien1"> Clique moi</a>

du coup même si tu clique sur le lien pour l'ouvrir dans un nouvel onglet, la page encours ira avec.
22/04/2014, 12h12
MimiWoOlf

Bonjour,

Merci de ta réponse.

Pourtant on m'a conseillé de mettre href="about:blank"

Du coup si on ouvre dans un nouvel onglet on a une page blanche, ça me vas.

Par contre si on clique normalement dessus, ça affiche la fancybox, donc ça va chercher le lien qui se trouve par exemple dans data-lien-fancybox.

Mais je ne vois pas où paramétrer fancybox pour permettre cela.
22/04/2014, 12h18
Geoffrey74

Salut,

j'ai beau relire, je ne comprend pas vraiment ce que tu veux faire ...

Empêcher d'ouvrir la fancybox dans un nouvel onglet ?
Ou pouvoir l'ouvrir dans un nouvel onglet ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$('.iframe-ajax').live("click", function (e) {    
 
        // Supréssion de l'évenement par defaut
        e.preventDefault();
        var page = "";
        $.ajax({
            type : "GET",
            async: false,
            url : $(this).attr("dataset"),
            success: function (data){ 
                page = data;
                $.fancybox.showLoading();
            },
            complete: function () {
                $.fancybox({ 
                    content : page,
                    padding : '10px',
                    autoSize : true,
                    autoResize : true,
                    autoCenter : true,
                    transitionIn : 'fade',
                    transitionOut : 'fade',
                    centerOnScroll : true,
                    autoCenter : true,
                    autoResize : true
                });
                $.fancybox.hideLoading();
            }
        });  
    });

J'ai résolu le problème :)

Dans mes liens href j'ai mis un about:blank ( pour afficher une page blanche si on l'ouvre en nouvel onglet ) et j'ai mis l'attribut dataset="monlien" pour que je puisse le récupérer en js et afficher ma fancybox uniquement si je clique normalement ^^

Slt,

Je remplacerais:

Code:

<a href="#lien1"> Clique moi</a>

par
Code:

1 2 3 <a href="#" onclcik="maFonction()"> Clique moi</a> ou <a href="about:blank"" onclcik="maFonction()"> Clique moi</a> (à toi de voir)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script> function maFunction(){ $.ajax({ url : "url", cache : false,... }).done(function(xhr) { $.fancybox(xhr) }); } } </script>
De cette manière tu ne modifie que le bouton gauche de la souris

en espérant avoir bien compris ton problème
++