magnific-popup


Magnific-popup: how to get image url from <img src=“…”>?


Is it possible to force magnific-popup to get image url from 'src' attribute of img tag? This way there would be no need to wrap img with a tags.
I tried the code below, but it doesn't work. Returned error is 'undefined' url.
<script type="text/javascript">
$(document).ready(function(){
$('div.gallery').magnificPopup({delegate: 'img'.attr('src') , type: 'image', gallery:{enabled:true}
});
});
</script>
Anyways, is there any option to do with 'img' only, without 'a' tags?
Thanks!
<script type="text/javascript">
$(document).ready(function(){
$('div.gallery').magnificPopup({delegate: 'img' , type: 'image', gallery:{enabled:true},
callbacks: {
elementParse: function() { this.item.src = this.item.el.attr('src'); }
}
});
});
</script>
elementParse http://dimsemenov.com/plugins/magnific-popup/documentation.html#api
I actually have not worked, and I found how to do .
Now the script when clicking pictures increases and creates a gallery of them .
<script type="text/javascript">
$(document).ready(function() {
$('#text').magnificPopup({
delegate: 'img',
type: 'image',
gallery: {
enabled: true
},
callbacks: {
elementParse: function(qw) {
qw.src = qw.el.attr('src');
}
}
});
});
</script>
The accepted answer didn't work for me, either. I ended up using the data-mfp-src attribute, which overrides the value in the href one (as mentioned here: http://dimsemenov.com/plugins/magnific-popup/documentation.html#content-types).
Instead of adding the attribute manually (duplicating the src of the image), I just copied the src value in data-mfp-src attributes for all images before the magnificPopup call. Something like this:
var popupImages = $('div.withPopups img');
popupImages.each(function(){
$(this).attr('data-mfp-src', $(this).attr('src'));
});
popupImages.magnificPopup({type: 'image'});

Related Links

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
Magnific-Popup Loading iframe from non-video players URL
Magnific popup - put arrows inside of an image
magnific closeOnContentClick does not work

Categories

HOME
maven
multithreading
wso2
reserved
appx
onedrive
rubygems
alpha
qore
autotools
synchronization
slick-slider
python-unittest
kibana-4
metatrader4
spring-kafka
quicklook
mapserver
timeout
vb.net-2010
gz
dtrace
jsprit
telephony
seaborn
angular-ui
invantive-sql
oracle-coherence
shared-hosting
alpine
visual-composer
jasonette
zurb-foundation-6
crystal-reports-2010
poltergeist
uninstall
web-api-testing
fluentvalidation
jaxb2
libssl
nouislider
airconsole
form-data
force-layout
catalog
http-digest
overlap
restlet
hue
gulp-sourcemaps
glew
eigenvalue
checkboxlist
modelmapper
skeleton-css-boilerplate
fault
darcs
snmptrapd
django-scheduler
redundancy
vtigercrm
instant
vmware-tools
slicknav
impresspages
testng-dataprovider
captivenetwork
pagerank
unity-networking
r-tree
responsive-images
myo
sonarqube5.1.2
proj4js
winddk
internet-connection
document-classification
project-planning
aapt
jubula
system.net.webexception
picturefill
viadeo
multiprocessor
ivyde
dir
sqlperformance
mhtml
sublist
cisco-jtapi
pysimplesoap
jquery-ui-layout
code-cleanup
transactionscope
gnu-prolog
stage
doh
hirefire
xtype
meego

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