We Keep Coding

Javascript Image/Text Object

I was trying to give an object an Image but I doesn`t give it back . What did I wrong ? ^^
var bank = {
money:"$",
currency:"Dollar",
sum:50,
src: "Logo.png"
};
document.getElementById("test").innerHTML= " Your amount is" + bank.sum + " "+ bank.money + "("+ bank.currency+")" + bank.src;

You are not using an image anywhere as far as I can tell. You can't just give an "image" to javascript. You can store the URL to an image in javascript, and then you can assign this to an HTML <img>tag.
In html the tag would look like <img id="testimage" src="Logo.png/>. Then you could use javascript to change the image source. You could do it like
var image = document.getElemenyById("testimage");
image.src = bank.src;
Or, if you want to add an image to the body completely in Javascript, you could do that as well.
as you have commented on your answer, I guess this is the way you actually want to do it
var img = document.createElement("img"); // creates <img>
img.src = bank.src; // sets the source to the source of the 'bank'
document.getElementsByTagName("body")[0].appendChild(img); // adds it to the body
You could of course add it to your (div?) which you are using the your question.
document.getElementById("test").appendChild(img);

Try adding the image in an <img> element like this:
document.getElementById("test").innerHTML= " Your amount is" + bank.sum + " "+ bank.money + "("+ bank.currency+")" + " `<img src= '"+bank.src+"' />` ";

Is it possible to box an object like this ?
var screenX1 = {
image:"image001.png",
links: {
link {
area:[45, 143, 106, 158];
reference to screenx2
}
link {
area:[45, 143, 106, 158];
reference to screenx3
}
},
};
var screenx2 = {
......

Add img tag for show image like below.
document.getElementById("test").innerHTML="Your amount is " + bank.sum + " "+ bank.money + " ("+ bank.currency+")" + "<img src='"+bank.src+"' />";

Dynamically add array contents as new elements - JQuery

edit: Problem solved! I was modifying the page before it was loaded so the script didn't actually do anything. I fixed it now and it works. Thanks for the help, I'll have to chalk this one up to being new to jQuery and it's weirdness.
Long story short I'm trying to make a webpage that dynamically takes Article titles, thumbnail images, descriptions, and links to them, and creates a nicely formatted list on the page. I'm trying to accomplish this in jQuery and HTML5.
Here is the sample data that I'll be using to dynamically populate the page. For now formatting isn't important as I can do that later after it works at all.
<script>
var newsTitles = ["If It Ain't Broke, Fix It Anyways"];
var newsPics = ["images/thumbnail_small.png"];
var newsDescs = ["August 14th 2015<br/><b>If It Ain't Broke</b><br/>Author: Gill Yurick<br/><br/> Sometimes, a solution isn't the only one. So how do we justify changes to systems that don't need to be fixed or changed? I explore various systems from other successful card games and how their approaches to issues (be they successes or failures in the eyes of the deisgners) can help us create EC."];
var newsLinks = ["it_aint_broke-gill_popson.html"];
var newsIndex = 0;
var newsMax = 1;
The section of code where I'm trying to use the contents of the arrays above to dynamically fill elements.
<td style="height:500px;width:480px;background-color:#FFF7D7;padding:20px" colspan=2 id="article">
<h1>Articles</h1>
<!-- the column for each news peice add an element with the thumbnail, the title and teh desc -->
<script>
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href="" newsLinks[i] + "">" + newsTitles[i] + "</h3>", "<img src=""newsPics[i] + "">","<p>" + newsDesc[i] + "</p>", ); $("div").append("hello");
}
</script>
<div id="articleList">
HELLO
</div>
</td>
Here is what it ends up looking like, I can post more info if needed as I am aware this may not be clear enough to fully explain my problem but I am unable to determine that. Thank you in advance.

try this
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href=""+ newsLinks[i] + "">" + newsTitles[i] + "</h3>, <img src=""+newsPics[i] + "">, <p>" + newsDescs[i] + "</p>" ); $("div").append("hello");
}
Concatation issue + typo for newsDescs

The following string is invalid html and is missing a +
"<h3 href="" newsLinks[i] + "">"
You need to use proper quotes for html attributes, not &quote;
Try
"<h3 href='" + newsLinks[i] + "'>"
OR
"<h3 href=\"" + newsLinks[i] + "\">" // `\` used to escape same type quote
Personally I prefer opening/closing html strings with single quotes but either will work
Note tht you should be getting a syntax error thrown in dev tools console which would have helped you locate problems

for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href='" + newsLinks[i] + "'>" + newsTitles[i] + "</h3>");
$("#articleList").append("<img src='" + newsPics[i] + "'>","<p>" + newsDesc[i] + "</p>" );
}

Concatenation with jquery

Not sure how to write this the correct way. i can make it work but when i view source it looks like this
<img "="" "style="width:30%; height:30%;" src="correctsource"></img>
as you can see at the beggining of the image tag their is two extra quotes & a equal sign.
Here is my code
var img = $(this).attr('src');
//grab the visible div and the div with class edititable within it and append image
$(".open:visible").find('.edititable').append('<img src="' + img + '" "style="width:30%; height:30%;" ">');

Change to:
foo.append(
$("<img />", {
src: img,
style: "width: 30%; height: 30%"
})
);
It's easier to avoid mistakes with mismatched quotes this way, and generally improves readability too

Try this, you had too many double quotes in the string.
$(".open:visible").find('.edititable').append('<img src="' + img + '" style="width:30%; height:30%;">');

remove last double quotes then it will work.You added one extra .
that is write like
.................height:30%;">');

Close, your string simply was formatted incorrectly. You had an extra " infront of style. Tech you wrote it as
$(".open:visible").find('.edititable').text('<img src="' + img + ' " style="width:30%; height:30%;" ">');
Relevant fiddle: http://jsfiddle.net/6cLYf/

Shutter reloaded for Next-Gen gallery -- smaller images and the title from alt attribute

Sorry if this question is out of the place, but I didn't find any information about it at other places on the net... :-(
So, I have a Shutter-box javascript Lightbox, that I need to modify.
The Shutterbox script is here (already customised a bit): http://pastebin.com/g5qTF86H
The page where it is used: http://www.mrsherskin.com/collections/subconscious-levitation
1). By default this script doesn't take the alt of the images it takes for lightboxing, just the title attribute of it. I would like to set up a variable in this script to put the image's alt attribute as a title above the picture. I would use this jQuery script for it inserted in the showImg initialisation, but I don't know how could I set up a variable that inserts this alt tag read from the respective images:
var ImgTitle = jQuery('<div id="img-title"><h1 class="entry-title">Alt title</h1></div>');
jQuery(ImgTitle).appendTo('#shWrap');
2.) I would like to accommodate the size of the shown image so that 2-3 lines of description text could fit under it. Unfortunately I didn't find the part of the script that calculates the size of the lightboxed image, where to change it?
Any help please?
Thank you in advance.

Thanks so much for the answer about how to get the image alt attribute, it worked perfectly for me! I was a little confused about where to put the code that you provided, so in case any one else had the same issue I hope I can help clarify.
Find the following code snippet (should be around line 68 in shutter-reloaded.js which is in the shutter folder of the NextGen Gallery plugin):
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T}
Change that line to the following:
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}
Directly above that line you just changed, add the following:
ALT = jQuery(L).children('img').attr('alt');
I then found the following line:
NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';
And changed it to this:
NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].alt + '</div><div id="shCaptionLine">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';
Hope this helps!
-RG

OK, I found the solutions:
(1) I fetched the alt of the images under shutterbox rel-links by this jQuery method:
ALT = jQuery(L).children('img').attr('alt');
Added it to the shutterLinks object:
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}
Then inserted this variable in a new jQuery object, under the make function:
var ImgTitle = jQuery('<div id="img-title"><h1>' + shutterLinks[ln].alt + '</h1></div>');
jQuery(ImgTitle).prependTo('#shWrap');
(2) I found the part which scales down the large images (if image size is bigger than viewport size), and added to the end a shrink by 30 px
TI.style.width = (TI.width - 30) + 'px'; // add side padding
TI.style.height = (TI.height - 30) + 'px'; // add bottom padding
Update suggested by Rachel:
To put this code, follow these steps:
Find the following code snippet (should be around line 68 in shutter-reloaded.js which is in the shutter folder of the NextGen Gallery plugin):
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T}
Change that line to the following:
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}
Directly above that line you just changed, add the following:
ALT = jQuery(L).children('img').attr('alt');
Then find the following line:
NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';
And change it to this:
NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].alt + '</div><div id="shCaptionLine">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';

escaping double and single quotes in jquery tooltip

I am using a dynamic jquery carousel to show thumbnail images in the home page....The carousel is working fine...and i want to add a tooltip to each image....for this i am using jquery tooltip....on hover tooltip should display the original image,uploaded by and so on...
The javascript that adds the tooltip to each image is as follows...
function mycarousel_getItemHTML(url)
{
var url= url.split(",");
return '<img src="' + url[0] + '" width="75" height="75" alt="" />';
};
url[5]=original img src
url[1]=title
url[6]=category name
url[2]=no of views
url[3]=uploaded by
url[0]=thumbnail img source
the above javascript gives me the following error
missing ) after argument list
how can i escape single and double quote properly...Please help me...-

I think the onmouseover portion is wrong, and you want:
onmouseover="Tip(\'<img src=\\\''+url[5]+'\\\' /><br/><b>'+url[1]+'</b><br />Category:'+url[6]+'<br/>Views:'+url[2]+'<br/>Uploaded by:'+url[3]+'\')"
Let me know if that doesn't work - my head's hurting from trying to be a JavaScript interpreter. I think that's on the right lines though.
p.s. I fixed your <img> tag - I think in general <img> tags should be self-closing <img... />, not <img...></img>.

Assuming the HTML " entity gets interpreted properly (and reformatting so people can see what's going on.):
function mycarousel_getItemHTML(url)
{
var url= url.split(",");
// wrapping attributes in double-quotes, so use double-quote
// entity within attribute values:
return '<a href="' + url[4] + '" ' +
'onmouseover="Tip(\'<img src="' + url[5]+'"/><br/>' +
'<b>' + url[1] + '</b><br />' +
'Category:' + url[6] + '<br/>' +
'Views:' + url[2] + '<br/>' +
'Uploaded by:' + url[3] + '\')" ' +
'onmouseout="UnTip()">';
};
Note: you should probably entity-encode all the < to < inside the onmouseover attribute too. That might leave less scope for browsers to bork the tooltip