magnific-popup


Magnific Popup - taller mfp-bottom-bar causes max image height issue


I am customizing the title of the Magnific popup/lightbox to include more than one row of content by using the 'change' callback, and modifying the content of
this.content
within the callback. It is working correctly, except for the fact that if the image within the popup is very tall, or the window re-sizes to a smaller height, the calculation that Magnific is doing to adjust the 'max-height' of the image seems to only take into account a single row of text for the title.
Does anyone know what is needed to adjust the max-height calculation of the image to take into account a taller title box?
Thank you
** Edit
A quick hack to jquery.magnific-popup.js around line 461 in the "updateSize:" callback has allowed me to get around this problem. It seems reasonable to for this popup/lightbox to accept a max height in percentage so that it doesn't fill the screen.
Here's my change, I'd appreciate some feedback if possible. Thanks!
updateSize: function(winHeight) {
if(mfp.isIOS) {
// fixes iOS nav bars https://github.com/dimsemenov/Magnific-Popup/issues/2
var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
var height = window.innerHeight * zoomLevel;
mfp.wrap.css('height', height);
mfp.wH = height;
} else {
mfp.wH = winHeight || _window.height();
// ########################################
// CHANGE IS RIGHT HERE TO FORCE 80% height
// ########################################
mfp.wH *= 0.8;
}
// Fixes #84: popup incorrectly positioned with position:relative on body
if(!mfp.fixedContentPos) {
mfp.wrap.css('height', mfp.wH);
}
_mfpTrigger('Resize');
},
You can limit the max height of the image in the resize callback, which will allow more room for the title:
$('a.magnific').magnificPopup({
type: 'image',
callbacks: {
resize: function() {
var img = this.content.find('img');
img.css('max-height', parseFloat(img.css('max-height')) * 0.95);
}
}
});
I'd like to add my contribution. As I wanted to include both titles and descriptions to images. This meant that I couldn't fit all this information in the viewport space. The description was cut off and I was left with a scrollbar.
#alexantd - I tried your callback addition which only works when the window is being resized.
#ajhuddy - Your solution worked perfectly for me. I was able to fit the text in fine. Though the image was considerably small with a lot of space at the top.
I adjusted the padding as to regain 40px space to display a slightly larger image. Here's my CSS to do so. The CSS below allowed me to reduce images to 0.85 (85%).
.mfp-img {
padding: 0px 0px 40px !important;
}
.mfp-close {
margin-top: -40px;
}
else b.wH=a||v.height()**,b.wH*=.9**;b.fixedContentPos

Related Links

how to manually open and close the popup using Magnific-Popup
How to customize arrows and close button?
no closing “X” with inline content
How to prevent close
Magnific-Popup Loading iframe from non-video players URL
Magnific popup - put arrows inside of an image
magnific closeOnContentClick does not work
How can style popup iframe in Magnific Pop-Up?
Gallery with mixed content types
Title for iframe/video in magnific popup
Magnific Popup: Close floats to the right
Calling magnific-popup on button element instead of an anchor
Implement query.magnific-popup.js in dreamweaver cs5. Syntax error in original code
Magnific-popup event binding to popup content
Magnific Popup - Error when opening a you tube video
Magnific-Popup, Limit items to direct siblings

Categories

HOME
xamarin
log4j
push-notification
path-finding
office365api
react-router
webstorm
q
yarn
retrofit
session-variables
facebook-php-sdk
quicklook
handsontable
u-sql
quickbooks
flask-wtforms
worldwind
fatal-error
windows-7-x64
samoa
grails3
immutable.js
ml
android-widget
spark-jobserver
internet-explorer-9
fluentvalidation
ejabberd-module
quote
delicious-api
stormpath
noraui
vsts-build-task
form-data
wallpaper
y86
fusionpbx
android-ble
espeak
unspecified
user-controls
unoconv
ncalc
g-code
grid.mvc
spring-security-kerberos
cubic-spline
pnotify
boost-multi-index
datastax-startup
domain-model
jxcore
csound
tactic
diagnostics
libusb-win32
windows-iot-core-10
akka-cluster
pearson
gcsfuse
migradoc
parallel-data-warehouse
ableton-live
heidisql
sts-springsourcetoolsuite
asp.net-4.5
paypal-express
lttng
packagist
spim
reactive-banana
msys
google-places
spidermonkey
citrus-pay
content-length
muse
sankey-diagram
nsight
dundas
jsapi
truevault
sorl-thumbnail
nstableviewcell
jscript.net
cdt
phalanger
java-metro-framework
googlemock
reactfx
marmalade
resty-gwt
meteor-velocity
fmod
floating-point-precision
geos
ivyde
access-rights
batterylevel
eclipse-memory-analyzer
padarn
random-seed
spring-validator
kyotocabinet
gil
nsnetservice
cisco-jtapi
gnustep
doh
infobox
coredump
locationlistener
yetanotherforum
calling-convention
gdlib
modelstate
firefox-5
aquaticprime
mediarss
ugc
wsdl.exe

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App