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

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
Magnific Popup onload calling a url

Categories

HOME
java
testng
vbscript
webpack
cookies
pycharm
plone
onedrive
session
vmware
tesseract
at-command
react-redux
analysis
cmd
sharepoint-designer
youtube-api-v3
azure-storage-tables
portia
correlation
workload-scheduler
opentracing
transformation
evopdf
text-rendering
textfield
nodatime
pass-by-reference
kudan
jndi
hammerspoon
icloud-api
trading
vlsi
sparse-matrix
url-scheme
brunch
info.plist
rst2pdf
buck
facebook-apps
jaxb2
tasklet
flink-streaming
tinymce-4
.net-4.0
lxd
android-kernel
twitch
streamreader
opshub
elasticsearch-plugin
elmah
janrain
qwt
logfiles
python-webbrowser
svmlight
lowpass-filter
feeds
media-player
pearson
chord-diagram
jquery-filter
trash
fuzzy-search
fadeout
wapiti
historian
hsv
srand
atk4
citrus-pay
ideamart
sankey-diagram
nsight
unity3d-gui
rake-task
xc16
knuth
cdt
rdtsc
code-access-security
ceil
yorick
marmalade
uv-mapping
aqtime
gridfs
spring-io
limejs
cassini-dev
pvrtc
onsubmit
postgresql-performance
asyncfileupload
adk
boost-filesystem
fireworks
gnustep
appendto
mysql-error-1005
lpeg
sproutcore-2
gin
asp.net-profiles
libs
boost-smart-ptr
yagni
sector
.net-1.0
document-conversion

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