Fancybox Redimensionner pour s'adapter contenu, sans titre
J'utilise Fancybox sur mon site web pour afficher des photos. J'ai ajouter (via JavaScript) boutons sociaux et de facebook commentaires de façon dynamique dans la zone de titre après le chargement de la photo. Le problème que j'ai, c'est que si je le laisse redimensionner comme d'habitude, il redimensionne essayer d'adapter le titre de contenu sur l'écran (qui peut être assez longue grâce à des commentaires).
Ma question est la suivante: est-il possible d'avoir fancybox redimensionner pour s'adapter à la photo sur l'écran, mais de permettre à la zone de titre de déborder hors de l'écran?
J'ai résolu le problème en définissant minHeight à 683, ce qui l'empêche de faire de la photo super minuscule et à l'ajustement des observations sur l'écran. Le problème ici c'est qu'il a l'air bien sur un écran 1080p, mais rien de plus petit signifie que la photo est trop grande et sort de l'écran.
Si je ne suis pas à l'expliquer, et bien, s'il vous plaît consulter sur mon site: http://www.thejoecole.com/gallery/Places/Garden_of_the_Gods-1/photo-8#8
Droit maintenant, le contenu est redimensionnée pour s'adapter un peu les commentaires, mais est retenu par le minHeight. Ce que je voudrais, c'est pour la photo beaucoup plus grande, le remplissage de la majorité de l'écran, avec seulement un peu de la zone de titre ci-dessous, et alors les utilisateurs peuvent faire défiler vers le bas pour afficher les commentaires, etc.
OriginalL'auteur Joe Cole | 2013-03-04
Vous devez vous connecter pour publier un commentaire.
Vous voudrez peut-être essayer ceci:
Utiliser JS pour calculer la largeur et la hauteur de la fenêtre, et de définir les dimensions de l'image de façon dynamique, à l'aide de la fonction de rappel
beforeShow
etonUpdate
:Vous pouvez également jeter un oeil à ces question similaire(s):
content d'avoir pu aider
Cole je crois que la bonne méthode serait de marquer cette réponse comme correcte (Samuel, serait d'obtenir le crédit), puis d'ajouter votre méthode finale de la question comme une modification.
Pas de soucis, c'est une vieille réponse qui n'a pas aider beaucoup de gens.
OriginalL'auteur Samuel Liew
Vous pouvez utiliser le remplissage et/ou de la marge option pour définir un espace en haut de la fancybox, de sorte que la photo semble plus centré à l'écran.
http://fancyapps.com/fancybox/#docs
Avez-vous un lien vers une image avec beaucoup de commentaires?
thejoecole.com/gallery/Places/Garden_of_the_Gods-1/photo-8#8 Mais maintenant, j'ai un min-height et width définie, donc il ne fait pas les redimensionner que les petites. Cependant, la photo elle-même fonctionne hors de l'écran sur les petits écrans (comme 720p), et il n'est pas aussi grand qu'il pourrait l'être sur des écrans plus grands (1080). En gros, j'ai besoin d'un moyen de changer la fonction de redimensionnement de ne prendre que la photo elle-même en compte au lieu de la photo+titre.
On dirait que vous devez définir la hauteur minimum de façon dynamique en fonction de la somme de l'utilisateur de la fenêtre à la taille de la hauteur de la commentaires.
Je vais vous aider à commencer une prime sur la question de tirer à plus de gens.
OriginalL'auteur Samuel Liew
J'ai vérifié votre site, qui btw est assez sympa, pour vérifier le dimensionnement de problème. J'ai remarqué certaines choses donc, ici sont mes suggestions pour l'explication.
La fancybox se comporte comme un div conteneur de sorte qu'il s'adapte aux enfants divs contenu.
fancybox-skin
a deux enfants immédiats divsfancybox-outer
etfancybox-title fancybox-title-inside-wrap
La
fancybox-title fancybox-title-inside-wrap
aheight: auto;
ensemble. Aussi, il garde le réglage de commentaires figurant à l'intérieur, en augmentant sa hauteur, ce qui provoque des problèmes pour votre hauteur de l'image. Pour corriger cet ensemble son style commeheight: 200px;
. Essayez de mettre!important
si cela ne fonctionne pas. Depuis tout cela est dynamique, vérifiez css et javascript à la fois.Mise à jour
Que par votre commentaire, la hauteur est réglée sur auto chaque fois que vous appelez fancybox.mise à jour(). Si vous avez besoin de modifier votre fancybox options, pour éviter d'auto redimensionnement. Voici ce que vous pouvez faire :
Vous devriez regarder dans les options ici pour fancybox 2.0+ .
Merci de prendre un coup d'oeil à cette question, même si elle ne résout pas le problème. J'ai reçu la prime de toute façon. Si vous avez d'autres idées que de travail, de poster une nouvelle réponse, et si cela résout le problème, je vais ajouter beaucoup plus de bienfaits.
C'est dommage que la hauteur est automatique à chaque fois fancybox.mise à jour() est appelée. J'aimerais simplement ignorer auto redimensionnement, mais j'en ai besoin pour dimensionner correctement en premier, puis afficher le titre, puis éviter l'ajustement automatique de la taille... et il ne semble pas tout fancybox options le permettent.
Je vous remercie pour votre gentil commentaire sur mon site. C'est un hobby amusant, qu'est la photographie. J'ai trouvé une solution qui fonctionne pour moi et me permet encore de dynamique de la largeur/hauteur (uniquement sur la charge initiale, pas si la fenêtre est redimensionnée). J'ai utilisé une combinaison de la technique et des autres et je voudrais avoir quelques ressources pour vous donner en retour pour votre aide. Malheureusement, tout ce que j'ai à donner est mon abondante grâce. Je vous remercie.
OriginalL'auteur user568109
J'ai trouvé une solution qui fonctionne pour moi.
C'est fortement basée hors de toutes les réponses postées ici, alors merci pour cela. Je voudrais vous donner toutes une prime si possible.
Ce que j'ai fait cette.
Ensemble
.fancybox-title{height:0px !important;}
dans le CSS, et ajouter un supplément de style (pour être utilisé plus tard) directement ci-dessous:.fancybox-title-autoheight{height:auto !important;}
Ensuite, dans la fancybox jquery appel, définissez
autoResize: false
, etmin-Height: $(window).height()-100
, <--la 100 est simplement la marge je voulais faire dans l'ordre pour l'utilisateur d'avis qu'il n'y a plus de contenu au-dessous de l'image.Enfin, dans l'afterShow de la fonction, définie
$(".fancybox-title").addClass("fancybox-title-autoheight");
Cette tailles de la photo correctement lorsque l'origine de l'ouverture, et permet des observations indiqué ci-dessous que je le voulais. Le seul problème restant est lorsque la fenêtre est redimensionnée. J'ai essayé de supprimer les autoheight classe, l'appel de mise à jour, puis en ajoutant l'attribut CSS, mais il ne semble pas fonctionner. Pour l'instant, c'est une solution acceptable pour moi.
Admirez le résultat (peut-être besoin de vider votre cache, j'ai travaillé très récemment): http://www.thejoecole.com/gallery/Places/Garden_of_the_Gods-1/photo-8#8
Merci à tous ceux qui ont participé! Si il est possible de cocher plusieurs réponses correctes, faites le moi savoir et je vais faire en sorte que les idées originales j'ai compilé peut obtenir de la reconnaissance.
OriginalL'auteur Joe Cole
si vous fancybox est déjà ouvert et souhaitez redimensionner puis code ci-dessous va vous aide.
De référence à partir de : Redimensionner Fancybox
OriginalL'auteur Vipin Kumar R. Jaiswar