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
osgi
atom-editor
mediawiki
cmd
jsrender
gps
disassembler
yum
networkx
primary-key
wheelnav.js
dax
zebra-printers
msp430
ef-migrations
text-rendering
lldb
visjs
riot.js
abi
angular2-aot
apache-commons-io
windows-error-reporting
web-api-testing
msys2
data-manipulation
http-digest
overlap
unspecified
galen
quadratic-programming
estimote
mime
unixodbc
taffy
dotcover
komodoedit
datastax-startup
tizen-native-app
mu
brightcove
sybase-asa
dynamics-sl
mediaelement
abcpdf9
visual-c++-2008
firmata
elements
fody
transmitfile
nsfilemanager
storekit
qpid
bluemix-app-scan
photobucket
python-3.2
jmeter-maven-plugin
mutation-observers
purge
riak-cs
nsight
modalpopup
rake-task
offloading
p4java
jubula
wp-query
android-2.2-froyo
resty-gwt
c18
file-locking
excel-2003
cos
html-editor
free-variable
selected
anonymous-methods
regsvr32
osql
enter
netbeans-6.9
psi
invite
table-footer
appendto
cxxtest
coda-slider
dentrix
jquery-ui-droppable
castle-monorail
temporal-database
pascal-fc

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