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

Magnific popup - how to open it on mouseover?
Magnific-popup - How to prevent “image source” from being displayed when 'data-source' not defined
how to add bullets in Lightbox gallery of magnific pop up?
Magnific popup specific size
Magnific popup scroll issue
Does it only work on wordpress?
Magnific Popup scroll issues with iframe and iOS
How to apply magnific pop to image preview after revoke the object url
How to override magnific popup inline markup
Magnific pop-up only links to you tube
Magnific Popup close button placed in invalid html?
Magnific Popup - Google Maps Embed API must be used in an iframe
Magnific Popup Plugin Not Showing when Previewed in Browser
Magnific Popup Wordpress
Magnific vs PhotoSwipe
How to adjust video size magnific popup

Categories

HOME
vim
atom-editor
server
smarty
xmpp
framework7
spring-cloud-stream
dxl
angular-ui-bootstrap
serverspec
networkx
django-imagekit
add
virtualization
dax
static-libraries
dtrace
fallback
ibm-odm
pc
transformation
text-rendering
introduction
realex-payments-api
tooltipster
linkerd
wtx
c++-amp
fabric8
react-chartjs
yadcf
caret
asset-pipeline
mapbox-gl
picasso
nssegmentedcontrol
overriding
android-ble
event-driven
streamreader
lumberjack
user-controls
outlook-api
total-commander
acoustics
node-sass
galleria
scorm
skeleton-css-boilerplate
youcompleteme
rails-routing
clean-architecture
return-value
fancybox-2
knockout-components
crypt
sqlbulkcopy
zendesk-app
sqldf
angular-strap
spring-android
livequery
wapiti
energy
kendonumerictextbox
lemon
pundit
rgeo
ideamart
arcanist
event-bubbling
appfabric-cache
mmc
census
angular-local-storage
gadt
tablelayout
coldbox
gui-test-framework
rdtsc
nsbutton
websocket4net
zend-route
article
starcluster
kgdb
meteor-velocity
apc
odata4j
cos
gwt-rpc
django-nonrel
xamlparseexception
comaddin
delphi-6
itmstransporter
pvrtc
broken-links
labwindows
netbeans-6.9
netdna-api
libc++
xmlspy
sql-server-profiler
lang
getresponsestream
nhibernate.search
ncqrs
nerddinner
scripting-languages
ubuntu-9.04

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