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

$.magnificPopup.open() callbacks is not working
How do i setup magnific-popup
magnific-popup - re-initiate on ajax content
Magnific-popup cancels all requests on open
Magnific Popup fails to work with multiple galleries on a page
magnific-popup open in parent when calling from iframe
Magnific popup iframe closeOnBgClick does not work
Magnific Popup Text Links
Magnific popup - undefined is not a function when parsing markup
Adding onclose method in magnificPopup (that autoloads on pageload)
Popup does not work fine with final tiles grid gallery
Magnific Popup - Enable zoom animation when using $.magnificPopup.open
Magnific Popup appears below page on mobile
Magnific-popup - Source (not showing up again) after closing Popup
Magnific Popup plugin: Preloader not working on iframe
Close, open new magnific popup window via API

Categories

HOME
twitter
testng
oracle11g
google-api-php-client
vmware
sd-card
mean-stack
bookshelf.js
youtube-api-v3
rdf
sqlite3
v8
umd
multiple-records
google-translate
nano-server
visual-studio-2005
hapi
try-catch
jsprit
after-effects
solaris-10
reactive-cocoa
crystal-reports-2008
viewport
scichart
custom-wordpress-pages
one-hot-encoding
sylius
telerik-reporting
devops
trading
xpages-ssjs
fopen
fluentvalidation
xacml
libssl
airconsole
scorm2004
jspresso
winrt-xaml-toolkit
textmate
gammu
y86
catalog
ios5
overlap
appfabric
serve
mixture-model
mesos-chronos
preconditions
ncalc
powershell-dsc
node-gyp
android-mediaprojection
unixodbc
menuitem
dotnetzip
powercli
rdfs
nodebb
np-complete
cudafy.net
bind9
gnome-shell-extensions
parallel-data-warehouse
slicknav
adxstudio-portals
asp.net-4.5
jwplayer7
connect-by
essence
dlna
captivenetwork
rhino-servicebus
javax.sound.midi
pervasive-sql
eclipse-clp
t4mvc
marching-cubes
fscommand
camanjs
gui-test-framework
internet-connection
onactivityresult
zend-route
fluentautomation
wp-query
hippomocks
flexmojos
gnu-smalltalk
odata4j
batterylevel
hosts-file
online-compilation
wse3.0
gnu-prolog
data-loss
yui-datatable
actionview
xfbml
sudzc
h.323
wise
sproutcore-2
brewmp
anti-piracy
aquaticprime
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