fancybox mettre le titre sur le dessus et d'y rester

Je travaille avec Fancybox 2.0 et je veux le titlebox pour apparaître au-dessus de l'image ou sur le dessus de l'image, pas en dessous.

Juste au-dessus de tout le contenu.

J'ai essayé de faire le fancybox-inner style position:absolute, mais alors la hauteur de la fancybox-wrap ne sera pas absolu pixels.

Quelqu'un pourrait-il m'aider à y parvenir?

InformationsquelleAutor SirCumz | 2012-05-08

fancybox jquery

10

Meilleur et le plus simple - l'utilisation des helpers:
```
helpers : {
            title : {
                type: 'inside',
                position : 'top'
            }
        }
```
- qui fonctionne avec v2.1.x, mais pas avec v2.0.x (la version utilisée par l'OP), néanmoins l'OP nécessaire not below the image or on top of the image. just above all content.
InformationsquelleAutor Amit Kvint
6

Ajouter le suivant fancybox CSS pour ces éléments...
```
.fancybox-title{position: absolute;top: 0;} 

.fancybox-skin{position: relative;}
```
Qui devrait mettre le titre en haut.

InformationsquelleAutor Chris Mackie

Ce code sur jsfiddle: http://jsfiddle.net/JYzqR/.

JS:

$(".fancybox").fancybox({
  helpers : {
    title: {
      type: 'inside',          
      position: 'top'
    }
  },
  nextEffect: 'fade',
  prevEffect: 'fade'
});

CSS:

.fancybox-title {
  padding: 0 0 10px 0;
}

HTML:

<a rel="gallery" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet augue et magna interdum hendrerit" class="fancybox" href="http://i.stack.imgur.com/oZFno.jpg"><img src="http://i.stack.imgur.com/eZSbk.jpg" alt=""/></a>
<a rel="gallery" title="Proin imperdiet augue et magna interdum hendrerit" class="fancybox" href="http://i.stack.imgur.com/tv3kk.jpg"><img src="http://i.stack.imgur.com/IWWbG.jpg" alt=""/></a>

<!-- External Resources -->
<!-- jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- fancybox --><script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

Lire "titre du Jeu en haut" il y http://fancyapps.com/fancybox/#examples

InformationsquelleAutor shilovk

2

De défaut Fancybox 2.0.6 CSS, remplacer ce qui suit:
```
.fancybox-title {
    position: absolute;
    top: -36px;
    left: 0;
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
    }

.fancybox-title-float-wrap {
    position: absolute;
    z-index: 8030;
    }
```
Cette des positions de l'en-tête en haut à gauche, où il a l'air de mieux à mon avis.
Voici un screengrab:
- Ne pouvez-vous pas poster un Violon ou au moins la FancyBox, l'initialisation de voir votre solution au travail?
- Télécharger FancyBox, d'ajuster la démo CSS comme mentionné ci-dessus, et c'est tout.
- Le point est d'avoir un exemple de travail en complément de votre réponse, mais là vous l'avez: Violon!
- +d de votre réponse, la solution la plus efficace! ps: j'ai mes moments 😉
InformationsquelleAutor neokio
1

De placer le titre en haut, par l'utilisation de Jquery, vous pouvez manipuler le CSS adéquat à l'aide de la Fancybox rappels, lorsque le contenu est chargé de la charge, en utilisant beforeLoad ou afterLoad, et quand la Fancybox est mise à jour, avec onUpdate.

Donc, vous avez quelques rappels disponibles pour mieux répondre à vos besoins: Lien vers FancyBox Docs

Permet de supposer que vous êtes le chargement de votre fancybox avec le code ci-dessous, et de manipuler le titre de poste, vous pouvez appeler la "onUpdate" et "postcharge" pour déclencher ce changement:

JQUERY EXEMPLE
```
$(document).ready(function() {
  $("#my_popup_id").fancybox({
    "onUpdate"  : function() {
      $(".fancybox-title").css({'top':'0px', 'bottom':'auto'});
    },
    "afterLoad" : function() {
      $(".fancybox-title").css({'top':'0px', 'bottom':'auto'});
    }
  });
});
```
Maintenant, l'exemple ci-dessus des lieux de la Fancybox titre sur le dessus, mais si vous en avez besoin à l'extérieur, loin de l'image, vous devez définir une valeur négative pour le "top", mais de prendre en considération le fait que le cadre ne peut pas occuper la totalité de l'écran, d'où les paramètres largeur et hauteur à ce nouvel exemple:

JQUERY EXEMPLE 2
```
$(document).ready(function() {
  $("#my_popup_id").fancybox({
    "autoSize"  : false,
    "width"     : '70%',
    "height"    : '70%',
    "onUpdate"  : function() {
      $(".fancybox-title").css({'top':'-30px', 'bottom':'auto'});
    },
    "afterLoad" : function() {
      $(".fancybox-title").css({'top':'-30px', 'bottom':'auto'});
    }
  });
});
```
Vérifier le lien fourni de la documentation, en particulier l'onglet "rappels".

ÉDITÉ:

Et ici, il est, le Violon lien!

NOUVELLE ÉDITION DE NOTES:

neokio remarqué une solution avec un simple tweak pour la Fancybox feuille de style, donc, en effet pour un simple titre de contrôle de la position, c'est la la meilleure approche.

Celui présent sur cette réponse, c'est utile pour certains plus complexes CSS manipulations.

ÉDITÉ: Et un Violon avec la solution présentée par neokio!
- Cette solutions d'œuvres, une baisse de vote devrait venir avec une idée de ce qui est mal! Ne peut pas apprendre si personne ne montre l'erreur!
InformationsquelleAutor Zuul

Neokio est sur la bonne voie, mais je pense que c'est un peu moins destructrice de l'original du code par simple ajout d'un nouveau style de classe à la feuille de style, puis de référencement qui.

//Put at bottom of jquery.fancybox.css, change as needed
.fancybox-title-top-wrap {
  position: absolute;
  top: -30px;
  left: 0;
  background: transparent; /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  text-shadow: 0 1px 2px #222;
  color: #FFF;
  padding: 2px 20px;
  font-size: 16px;
}

Alors utilisez simplement:

helpers: { title: 'top' }

Que vous ne perdez pas de l'origine des styles, et vous pouvez continuer à ajouter des styles que vous en avez besoin.

InformationsquelleAutor d3vkit

Chris Mackie réponse est le plus propre. Pas de coucher avec afterUpload etc. La seule chose que vous pouvez ajouter à pousser le haut de la FancyBox est la marges:

$(document).ready(function() {

      $('.fancybox').fancybox({
                    padding      : 0,
          margin       : [60, 60, 20, 60],
          autoSize     : false, 
          autoCenter   : true,
          fitToView    : true,
          openEffect   : 'fade',
          closeEffect  : 'fade',
          openSpeed    : 100,
          closeSpeed   : 100,
          width        : 900,
          height       : 600
     });

});

InformationsquelleAutor PKHunter

0

Remplacer fancybox du css par défaut en ajoutant de l'extrait de code ci-dessous après vous d'inclure fancybox.css
```
//set modal title above container (overriding default bottom)
.fancybox-title-float-wrap {
  bottom: auto;
  top: -35px;
}
```
ou, si vous utilisez un système de construction (utilisation GruntJS ici) avec de moins en MOINS, alors c'est aussi facile que de faire dans votre fancybox-personnalisé.de moins en moins.
```
@import "fancybox";
```
avec extrait ci-dessus; de cette façon, vous consolider vos patchs dans un seul endroit, par contre la dispersion autour de votre application.

InformationsquelleAutor virtualeyes

afterLoad   : function() {
    this.outer.prepend( '<a href="index.html"> <img src="img/logo.svg" class="logoShow"></a>' );

    }

Essayer de mettre ce code dans votre fancybox fonction. par exemple

$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox({
openEffect  : 'none',
closeEffect : 'none',
afterLoad   : function() {
    this.outer.prepend( '<a href="index.html"> <img src="img/logo.svg" class="logoShow"></a>' );
    }

});

et la définition de la classe "logoShow" css

InformationsquelleAutor amigatra

Vous devez vous connecter pour publier un commentaire.