magnific-popup


Magnific popup - how to open it on mouseover?


Is there a way to trigger open Magnific Popup on a mouseover not on a mouse click?
I was trying to call the mouseover event on the link first, but it seems the Popup still requires a click. How to I make it so it opens up without a click?
<!-- Popup link -->
Show inline popup
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-hide">
Popup content
</div>
Javascript:
$('.open-popup-link').mouseover(function(){
$(this).magnificPopup({
type: 'inline'
});
});
Answering my own question. After a bit more research I found that I needed to open the popup directly via API. It works now:
$('.open-popup-link').mouseover(function(){
$.magnificPopup.open({
items: {
src: '.white-popup' // can be a HTML string, jQuery object, or CSS selector
}
})
});
Working example: https://codepen.io/pen/ZKrVNK
Taking it further with multiple links opening separate slides of a gallery, using event delegation:
http://codepen.io/pen/EmEOMa

Related Links

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
Simple Magnific Popup Gallery not working

Categories

HOME
amazon-ec2
google-play
angular-material
comparison
smarty
fft
alfresco
android-4.4-kitkat
wamp
in-app-purchase
gitpitch
ups
msp430
designer
try-catch
serilog
invantive-sql
reactcsstransitiongroup
excel-vba-mac
paging
object-detection
ehcache
telerik-reporting
zurb-foundation-6
devops
rundeck
p-value
one-to-many
dynamic-featured-image
kannel
traffic
typo3-6.2.x
saas
quote
react-chartjs
bcd
javascriptcore
galsim
usbserial
commit
atl
android-ble
event-driven
az-application-insights
particles.js
ibpy
isbn
estimote
chain-builder
pango
logparser
pnotify
elgg
diagnostics
crypt
libusb-win32
typed-lambda-calculus
boost-preprocessor
ifs
arrow-keys
nested-sets
login-control
player
ubuntu-10.04
packagist
fadeout
tform
prerequisites
tmuxinator
pundit
ami
lustre
tt-news
socketexception
gulp-less
castle
google-reader
typeof
funcunit
bundles
transcoding
concurrent-collections
viadeo
page-layout
soundtouch
jquery-mobile-dialog
android-screen-support
interface-orientation
venn-diagram
nsmanagedobject
netbeans-6.9
gnu-prolog
zpt
mod-auth
propagation
iphone-web-app
uimenucontroller
eqatec

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