I want a simple way to display a picture in html within a google maps infobox from a variable in javascipt. Currently the infobox displays the image link:
var address = xmldata.getElementsByTagName('postalCode')[0].firstChild.data;
var picture = xmldata.getElementsByTagName('viewItemURL')[0].firstChild.data;
var info_text = picture + '<br />' + address;
I have tried
var info_text = address + '';
try this:
var info_text = address + '<img src="'+picture+'" alt="some alt text" />';
Related
I am trying to do image light box using JavaScript. Here is my html code
<div id="lightbox2">
</div>
<div id="lightbox">
<button onclick="lgBox('www.w3schools.com/howto/img_fjords_wide.jpg')"><img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" alt=""></button>
</div>
I am sending current clicked link as a parameter in lgBox function.
Here is my Js function.
function lgBox(url){
var u = url;
alert(u);
document.getElementById("lightbox2").innerHTML="<img src='u' />";
document.getElementById("lightbox").style.display="none";
}
It shows the url in alert box properly that I passed.
But why this link is not working here "<img src='u' />";
Thanks in advance.
The method what you are using is wrong as it places the string u as it is in the src tag. You want to replace this u with the actual value of that variable. See below:
function lgBox(url){
var u = url;
alert(u);
//this is wrong and will throw an error in console (404)
document.getElementById("lightbox2").innerHTML="<img src='u' />";
document.getElementById("lightbox").style.display="none";
}
Instead of the above you should do something like this
function lgBox(url){
var u = url;
alert(u);
//ES6 template literals or if this is not supported then you can use
//concatenation also.
document.getElementById("lightbox2").innerHTML=`<img src=${u} />`;
document.getElementById("lightbox").style.display="none";
}
You need to concat the var u to the string with + like this:
'<img src="' + u + '" />'
In your code:
function lgBox(url){
var u = url;
alert(u);
document.getElementById("lightbox2").innerHTML='<img src="' + u + '" />';
document.getElementById("lightbox").style.display="none";
}
You simply passe the u string in the html tag, you have to actually concatenate the url like this :
document.getElementById("lightbox2").innerHTML = '<img src="' + u + '" />';
Good day.I deduce 50 blocks. Receive information from a file in JSON format.
I get a link to a photo from JSON. I give it to the page. I need to change all the photos large on the small size photos in just one click.
Please tell me how to change the link everywhere at once?
var image = data["info"][i]["img"]["big"];
block += '<img src="' + image + '"/>';
//image - link to photo
If all the images are displayed inside a single element like this
<div id="gallery">
<img ... >
<img ....>
.....
</div>
Then you could regenerate the entire contents of the div:
var str = "";
for (var i = 0; i < data["info"].length; i++) {
str += '<img src="' + data["info"][i]["img"]["small"] + '"/>';
}
document.findElementById("gallery").innerHTML = str;
I have a foreach loop in Razor which takes images from the Multiple Media Picker in Umbraco. The Response.Write just allows me to see that the images are displaying fine (which they are) so you can ignore this bit.
My question is, how do I populate the image tag with the image URL using the Javascript function? (see below which currently doesn't work).
Razor View/CSHTML
var imagesList = portfolioItem.GetPropertyValue<string>("Images").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
var imagesCollection = Umbraco.TypedMedia(imagesList);
foreach (var imageItem in imagesCollection)
{
Response.Write("<img src='"+ #imageItem.Url +"' />");
}
Javascript
openInfoWindow = function (name, imagesCollection, location, mw, url, marker) {
var infoText = "<img src='" + imagesCollection + "' alt='" + imagesCollection + "'title='" + imagesCollection + "' />";
}
try using jquery, if u use razor to set the url as an invisible input value. Then use jquery to pull that value out and add it to the img tag itself by using the following:
var inputVal = $("input").val();
$("#my_image").attr("src",inputVal );
if you put the invisble input value as a variable you can set the img atr ursing jquery like I've shown above.
Hello I have function which take text with my own tag and convert this tag to a:
//<link src="" title=""> -> title
function ProceedLinkTag(text) {
var items = text.filter("link");
items.each(function () {
var currentElement = $(this);
var title = currentElement.attr("title");
var source = currentElement.attr("src");
var newElement = $("<a>" + title +"</a>");
newElement.attr("href", source);
$(this).replaceWith("<a href='" + source + "'>" + title + "</a>"); //don't work
});
}
It work fine(it is detect my own tag even without close tag), I don't get any errors, but it is don't replaceWith().
Try it:
var text = "<link src='http://lenta.ru/' title='title'>";
ProceedLinkTag($(text));
alert(text);
I also try use it with close tag:
var text = "<link src='http://lenta.ru/' title='title'/>";
ProceedLinkTag($(text));
alert(text);
But it don't work too.
#sqykly find error:
Text in my instance was not a part of document. I change it and now it work.
I've got a simple JavaScript client that pulls from a REST API to present some book data, however I seem unable to call the function createBookRow(bookid) and return the appropriate html string to the document ready function where it is called,
The output is currently being produced correctly as verified by the append to .row-fluid on the html page, ideas or suggestions welcome
function createBookRow(bookid)
{
$.get('http://mysite.co.uk/atiwd/books/course/'+bookid+'/xml', function(xml){
$(xml).find('book').each(function(){
var $book = $(this);
var id = $book.attr("id");
var title = $book.attr("title");
var isbn = $book.attr("isbn");
var borrowedcount = $book.attr("borrowedcount");
var html = '<div class="span3"><img name="test" src="http://covers.openlibrary.org/b/isbn/'+isbn+'-L.jpg" width="32" height="32" alt=""></p>' ;
html += '<p> ' + title + '</p>' ;
html += '<p> ' + isbn + '</p>' ;
html += '<p> ' + borrowedcount + '</p>' ;
html += '</div>';
$('.row-fluid').append($(html));
});
});
}
$(document).ready(function()
{
$.get('xml/courses.xml', function(xml){
$(xml).find('course').each(function(){
var $course = $(this);
var id = $course.attr("id");
var title = $course.text();
var html = '<div class="span12"><p>' + title + '</p><row id="'+id+'" >'+createBookRow(id)+'</row></div>' ;
$('.row-fluid').append($(html));
$('.loadingPic').fadeOut(1400);
});
});
});
The line
var html = '<div class="span12"><p>' + title + '</p><row id="'+id+'" >'+createBookRow(id)+'</row></div>' ;
should be just
var html = '<div class="span12"><p>' + title + '</p><row id="'+id+'" ></row></div>' ;
createBookRow(id);
createBookRow(id) function is making a get request to get some details, which happens asynchronously. Unless you explicitly mention it is a synchronous call(which is not advised).
I guess the functionality you need is to render some rows for course and in between you need books details displayed. In that case you need to explicitly say where your book row needs to be appended.
$('.row-fluid').append($(html));
The above code will always append book row at the end.
You aren't returning anything in the code you provided. You just append some HTML to a jQuery object. Try adding a return statement
return html;