magnific-popup


Toggle verticalFit on an open image?


I need Magnific to open up the image with verticalFit = true to start. The image is portrait aspect and needs to fit within the viewport. But if the user clicks on the image, Magnific should turn verticalFit = false so that the image expands to full size so that the user can pan around and see details.
It seems like the easiest way to accomplish this would be to toggle verticalFit on/off each time the user clicks on the image.
HTML:
<link rel="stylesheet" href="magnific-popup.css">
<a class="image-popup-vertical-fit" href="path-to-some-full-sized-image"><img src="path-to-thumbnail-image"></a>
<script type="text/javascript" src="jquery.magnific-popup.min.js"></script>
Javascript to link the HTML anchor tag with Magnific via the class "image-popup-vertical-fit":
<script type="text/javascript">
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeBtnInside: false,
closeOnContentClick: false,
image: {
verticalFit: true
}
});
});
</script>
There is a partial thread over on GitHub from a year ago by another user but it doesn't really explain how it's being done.
Solution
jQuery(document).on('click', '.mfp-img', function(){
var mfp = jQuery.magnificPopup.instance; // get instance
mfp.st.image.verticalFit = !mfp.st.image.verticalFit; // toggle verticalFit on and off
mfp.currItem.img.removeAttr('style'); // remove style attribute, to remove max-width if it was applied
mfp.updateSize(); // force update of size
});
Explanation
Based on the links you provided (thank you, you set me in the right direction to solve this), I compiled and tested the above code. I'm basically setting a live click listener on the mfp-img class which contains the images inside the popup. Once clicked, the code toggles the verticalFit option between true and false for the whole popup. Note that you should have jQuery 1.7 or above for the on handler to work, otherwise, convert the on handler to a live handler if you're using jQuery lower than 1.7.
Note that you need to set the option below while initializing the popup otherwise the custom click handler coded above will not work:
navigateByImgClick: false

Related Links

How to give a fixed size to image in magnific-popup pluggin
magnific popup Inline Lightbox Gallery how to specify item in array from html link
how to make browser back close magnific-popup
Simple Magnific Popup Gallery not working
Magnific Popup onload calling a url
callbacks not firing when opening a magnific popup from another one
Magnific Popup - taller mfp-bottom-bar causes max image height issue
How to generate a (magnific popup)-gallery without a-tags
Add data to items in Magnific Popup
How to set the divs to make Magnific Popup animations work
how to display map in mobile devices using magnific popup?
Magnific Popup - Counter in Videogallery
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

Categories

HOME
asp.net-core
keras
heroku
json.net
iot
relayjs
google-oauth
jsrender
callback
acquia
constraint-programming
amazon-cloudformation
slurm
hex-editors
zebra-printers
google-static-maps
ab-testing
crystal-reports-2008
grails3
errorlevel
orleans
mps
kvc
jndi
claims-based-identity
p-value
fopen
applozic
replaceall
vision
tasklet
flink-streaming
media-queries
stormpath
textmate
web-mining
opshub
sfdc
reactive-cocoa-5
appcompat
apache-fop
errordocument
boost-multi-index
nstextview
nsarray
color-profile
pycaffe
yt-project
time-and-attendance
deadbolt-2
grails-tomcat-plugin
httplistener
react-native-listview
pyke
energy
hsv
unity-networking
cannon.js
metaclass
citrus-pay
clipperlib
truevault
directoryservices
dia
pick
bitcoinj
eol
android-2.2-froyo
concurrent-collections
opcache
dotnetnuke-5
tws
interface-orientation
flashvars
trusted
armcc
javaspaces
postgresql-performance
inotifycollectionchanged
locate
jmock
sortable-tables
gamequery
.nettiers
port-number
misv

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App