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

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

Categories

HOME
amazon-ec2
kde
grep
programming-languages
razor
binary-tree
alpha
slurm
kibana-4
windows-azure-storage
decomposition
percona
clojurescript
after-effects
graphlab
code-review
riot.js
cultureinfo
angular2-aot
shopware
kannel
react-css-modules
.net-4.0
data-manipulation
windows-dev-center
language-concepts
wpf-controls
io-redirection
disassembling
dartium
serve
splice
squib
powershell-dsc
janrain
nomethoderror
galleria
osx-mavericks
appcompat
azure-application-gateway
apache-fop
domain-model
integrity
nstextview
drupal-6
magma
crypt
font-size
background-service
lua-5.1
qcustomplot
revolution-r
vhd
cakephp-3.1
sailfish-os
notify
npapi
xcode-6.2
gulp-less
markers
mechanize-ruby
app42
industrial
opcache
excel-2003
buster.js
qt-faststart
padarn
cassini-dev
isnullorempty
bluepill
getmessage
chrono
reddot
code-cleanup
gcj
disclosure
html-input
web-application-design
mirah
microsoft-virtualization
ti-dsp
virtual-functions
anti-piracy
nerddinner
procedural-music
signal-handling

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App