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

What is the best way to test if a Magnific Popup is currently “open”
Apply callback to all instances of Magnific Popup?
Magnific Popup show background image while loading fullres image
Popup - It should load an .aspx page
Modal dialog. - Confusing
Toggle verticalFit on an open image?
Does Magnific Popup support custom events/buttons
I can't get the overflowY option to work in magnific popup
magnific popup group do not working
Magnific-popup: how to get image url from <img src=“…”>?
Styling magnific-popup arrows
magnific popup modal closes on click
Magnific popup: getting “The image could not be loaded”
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

Categories

HOME
bluetooth
mediawiki
path-finding
alfresco
xmpp
spring-cloud-stream
cmd
paw-app
fsm
wamp
in-app-purchase
podio
facebook-php-sdk
rascal
modelica
resize
zend-framework3
event-handling
percona
clojurescript
foselasticabundle
aurigma
normalizr
oxyplot
custom-wordpress-pages
ml
mps
bootstrap-tour
emgucv
smb
minitab
xacml
socialengine
javascriptcore
catch-all
lxd
uiswipegesturerecognizer
normal-distribution
nssegmentedcontrol
bower-install
libvpx
objectlistview
android-fingerprint-api
squib
graphenedb
sfdc
grid.mvc
jvm-languages
checkboxlist
galleria
aurelia-validation
directory-structure
spring-mongodb
google-cdn
parallel-data-warehouse
probability-density
gstreamer-0.10
moveit
ubuntu-10.04
ready-api
hover-over
bgp
yaws
dataview
xpath-1.0
browser-link
javax.sound.midi
citrus-pay
sframe
drawbitmap
twirl
event-bubbling
lustre
kineticjs
geonetwork
csquery
terminfo
xojo
project-planning
mesa
funcunit
doskey
android-2.2-froyo
viadeo
html5-notifications
ms-project-server-2010
odata4j
cassini-dev
quickdialog
bigcouch
work-stealing
nsdatecomponents
xmemcached
cinema-4d
table-footer
file-comparison
calling-convention
disclosure
sql-server-profiler
visitor-statistic
site.master
bespin
virtual-functions
thread-local-storage
grid-system
uiq3

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