I have an HTML Dom looking like this:
<div class="mydiv" id="mydivId">
<img src="../xyz.png" class="gwt-Image imgWrapper" draggable="false">
</div>
I'm trying to change the img Source, so i made the following to access the image without success:
Image imageElement = (Image) Document.get()
.getElementById("mydivId")
.getElementsByTagName("img").getItem(0);
How can i get the <img> dom element as Image then change its Source?
Get the ImageElement with
ImageElement image = (ImageElement) DOM.getElementById("mydivId").getFirstChildElement();
or create an Image widget by wrapping the existing img element like in
Image img = Image.wrap(DOM.getElementById("mydivId").getFirstChildElement());
As mentioned by Saeed Zarinfam it gets easier if you assign an unique id to the image itself.
You have to assign an id to your image tag:
<div class="mydiv" id="mydivId">
<img src="../xyz.png" class="gwt-Image imgWrapper" draggable="false" id="myImgId">
</div>
Then you can access to it using following code:
Element elem = DOM.getElementById("myImgId");
Window.alert(elem.getAttribute("src"));
Or if you do not want to assign an id to your image tag, you can use following code:
Element elem = DOM.getElementById("mydivId");
Window.alert(elem.getFirstChildElement().getAttribute("src"));
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 have the following issue with mithril
Image is display properly when it is a proper img tag
`<img src="images/erp/C:%5CProgram%20Files%20(x86)%5CMYTEST%5Cbitmaps%5C10001.jpg" class="scale">`
But same image not rendered at all when it is set as background-image url
`background-image: url("images/erp/C:%5CProgram%20Files%20(x86)%5CMYTEST%5Cbitmaps%5C10001.jpg");`
Based on this issue the cause is a bug in mithril.sj the string C:\Tmp\a\field.png is converted into "C:Tmpa\f ield.png"
This javascript:
view: function (ctrl) {
return [m("button", [m("img[src='C:\\Tmp\\a\\field.png\']"),"btn img"]),
m("div", {'style': { 'background-image' : 'url(\"field.png\")'}},"div a"),
m("div", {'style': { 'background-image' : 'url(\"C:\\Tmp\\a\\field.png\")'}},"div b")];
}
is rendered to this html
<button><img src="C:\Temp\mith\field.png">img inside a btn</button>
<div style="background-image: url("field.png");">no path</div>
<div style="background-image: url("C:Tmp\a\f ield.png");">with path</div>
I have custom editor toolbar plugin which inserts html tags. The tag opens with div. Every time when page is saved or published the editor adds a new p tag above it.
here is the image
IMG tag drifts after publish I see a new p tag is inserted.
The Img being replaced by an html before saving
<p>
<div class="ssimage_code">
<img src="src_path0" alt=""/ >
<img src="src_path1" alt="" / >
</div>
</p>
I want to see if it gets solved by replacing a p tag instead of a img tag.
How do I access the parent tag from Node?
getParent does not work
Code
ed.serializer.addNodeFilter('img', function(nodes, name, args) {
var i = nodes.length, node;
while (i--) {
node = nodes[i];
if ((node.attr('class') || '').indexOf('slider_toimg') !== -1) {
self.imgToslidercode(node, args);
}
}
});
imgToslidercode:function(node,args){
insertcode = '';
node.replace(insertcode);
}
What I am looking here is?
node.getParent().replace(insertcode);
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');
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.