I have a construction:
<div id="div">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
<image x="2cm" y="2cm" width="5cm" height="5cm" id="img" xlink:href="pic.jpg"></image>
</svg>
</div>
I want to get pic.jpg url and I need to begin from the most outer div, not exactly from the source <image> element:
var div = document.getElementById("div");
var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];
var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0];
var url = img.getAttribute('xlink:href'); // Please pay attention I do not use getAttributeNS(), just usual getAttribute()
alert(url); // pic.jpg, works fine
My question is what is the right way to get such kind of attributes from element like SVG and its children?
Because before I tried to do this way and it also worked fine in Chrome (I didn't try other browsers):
var svg = div.getElementsByTagName('svg')[0]; // I do not use NS
var img = svg.getElementsByTagName('image')[0];
var url = img.getAttribute('xlink:href'); // and do not use getAttributeNS() here too
alert(url); // pic.jpg, works fine
But when I tried to use getAttributeNS() I got blank result:
var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];
var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0];
// Please pay attention I do use getAttributeNS()
var url = img.getAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href');
alert(url); // but I got black result, empty alert window
The correct usage is getAttributeNS('http://www.w3.org/1999/xlink', 'href');
Related
I'm implementing a fancybox into my project and I'm writing a script to automatically wrap an anchor around the images with the url to the image and a "data-fancybox" attribute to let the fancybox script do its thing. However, I'm only getting the url to the very first image, since they all share the same class. There is a dynamic figure id that seems to be the one to get.
My question is - how do I use this figure id to fetch the appropriate img src?
The html is like this:
<figure id="XXXXXXX">
<div>
<img src="image.jpg" />
</div>
</figure>
... other stuff ...
<figure id="YYYYYYY">
<div>
<img src="image2.jpg" alt="">
</div>
</figure>
My code right now is as follows (which works, but only returns the first image url):
$(document).ready(function() {
var src = $("figure img").attr("src");
var a = $("<a/>").attr( { href:src , "data-fancybox":"" } );
$("figure img").wrap(a);
});
I know I can use
var id = $("figure").attr("id");
to get the id I need, but I'm pretty new to coding so I'm not sure how I implement this and use it to get the correct url. Any help is appreciated!
If your goal is to make your images clickable, then you can do smth like this:
$('figure img').each(function() {
$(this).parent().css({cursor: 'pointer'}).attr('data-fancybox', 'gallery').attr('data-src', this.src);
});
DEMO - https://jsfiddle.net/1jznsL7x/
Tip: There is no need to create anchor elements, you can add data-fancybox and data-src attributes to any element and it will work automagically.
I created an img element string with base64 source. when tried to display it in sap.ui.richtexteditor.RichTextEditor, I got nothing. How to display it? see my code.
// controller
var template = {};
var image ="<img src="data:image/bmp;base64,/9j/4AAQSkZJRg...">";
template.body = image;
var oViewModel = new JSONModel(template);
this.getView().setModel(oViewModel, "template");
//view
<rte:RichTextEditor id="rte" value="{template>/body}" editorType="TinyMCE4" customToolbar="true" showGroupFont="true" showGroupInsert="true"
showGroupLink="true" height="360px"/>
why dont use the Image Control?
<Image src='data:image/png;base64,iVBORw0KGgoA...........=='/>
i am using featherlight.js for image galleries and used this code for captions:
$.featherlightGallery.prototype.afterContent = function() {
var caption = this.$currentTarget.find('img').attr('alt');
this.$instance.find('.caption').remove();
$('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
};
now a client wants to add a second caption which contains only copyright-information on the right side of gallery-images. is it possible to have two captions, one named .caption and the second maybe .copyright?
I already tried with "data-caption=" and a simple copy of the above js-initial but it failed.
any ideas?
thank you in advance and merry christmas!
You could use a data attribute.
$.featherlightGallery.prototype.afterContent = function() {
var caption = this.$currentTarget.find('img').attr('alt');
this.$instance.find('.caption').remove();
$('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
var copyright = this.$currentTarget.find('img').data('copyright');
this.$instance.find('.copyright').remove();
$('<div class="copyright">').text(copyright).appendTo(this.$instance.find('.featherlight-content'));
};
Then in your markup add
<img src="..." alt="my caption text" data-copyright="my copyright text">
and in your css
.copyright {
float: right;
}
or something to suit.
If you need it to be conditional you can check for the defined-ness and/or length of the data-copyright attribute.
Referring to a few source, and i put this into a button event,
given,
<textarea id="content" name="content" style="width:400px;height:100px;">
<p><span style="font-weight:bold;font-size:36pt;">Some text <u>here</u> to go.</span></p>
</textarea>
var range = document.createRange();
var start = document.getElementById('tinymce');
var textNode = start.getElementsByTagName('p')[0].firstChild;
range.setStart(textNode, 1);
range.setEnd(textNode, 1);
window.getSelection().addRange(range);
but it produce error in chrome console :
Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
suppose i have tinymce element that generated by tinymce at first place.
any expert can help me on that?
The error is caused by the fact that the tinymce id is not present in the current top level document but on the iFrame's document. So you have to first access the iFrame and get the document element.
var frame= document.getElementById('content_ifr');
var doc = frame.contentWindow.document;
var range = doc.createRange();
var start = doc.getElementById('tinymce');
find a working fiddle HERE
My objective is to load dynamically various landscape panoramic images into the jScrollPane container and reinitialise so that the scrollbar would be re-calculated based on the current img dimensions.
My problem is that although I'm injecting the img src and then calling the api.reinitialise() method, it's not updating. Therefore the img loads, but the scrolling pane is still the same width.
I'm assume it has something to do with jScrollPane not being able to retrieve the new img dimensions in time to reinitialise with the right width.
HTML
<div class="px-content">
<img src="" />
</div>
JS
var scrollPane = $('.px-content').jScrollPane({hideFocus: true, showArrows: true, autoReinitialise: true});
var api = scrollPane.data('jsp');
var loadImage = function(id){
var image, $paneContent, $img;
imageSource= this.get(id); // returns an image URL
$paneContent = this.jspAPI.getContentPane();
$img = $paneContent.find('img').attr('src', imageSource);
api.reinitialise();
}
loadImage(0); // loads correctly
loadImage(1); // loads img correctly, but pane doesn't refresh to new width
Any ideas? Happy to try anything.
Seb.