My javascript is pulling single Flickr images randomly on each refresh. I would like to also display the image title (preferably on rollover) too. Been looking for hours on how to do this but not getting anywhere (don't really know js).
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=63338473#N03&tags=webhomeug&format=json&jsoncallback=?", displayImages);
var count = 0;
var htmlString = "<ul>";
function displayImages(data){
if(count <= 0){
var ranNum = Math.floor(Math.random()*($(data.items).size()));
var img = (data.items[ranNum].media.m).replace("_m.jpg", "_b.jpg");
var link = data.items[ranNum].link;
var title = data.items[ranNum].title;
htmlString += '<img src="' + img + '" alt="' + title + '" title="' + title + '" class=vtip"/>';
count++;
displayImages(data);
}else{
htmlString += '</ul>'
$('#images').html(htmlString);
}
}
$("selectYourPhoto").attr("title");
Thanks for pointing me in the right direction.
The suggested code wasn't working for me, but after looking into the attr method I found this works perfectly...
$("div").text($("img").attr("title"));
Thanks again!
Related
i am using storelocater.js for multiple location in google map and show the information according to the location with image. i can show only one image but i want to show multiple images inside the information panel. link this
Here is my code
var panelDiv = document.getElementById('panel');
storeLocator.Panel.NO_STORES_IN_VIEW_HTML_ = '<li class="no-stores">The nearest outlet:</li>';
var Store = storeLocator.Store;
Store.prototype.generateFieldsHTML_ = function(fields) {
var html = '';
html += '<div class="store-data">';
if(this.props_['title']){
html += '<div class="title"><div class="img-list clearfix">' +
for (var i = 0; i <= this.props_[images].length; i++) {
console.log(this.props_[images[i]]);
// <img src=' + this.props_['images'] + '>
}
+ '</div></div>'
}
html += '</div>';
return html;
}
var data = new storeLocator.StaticDataFeed;
data.setStores([
new storeLocator.Store('store02', new google.maps.LatLng(27.67663,85.31093), null, {images: ["img/thapathalil.jpg","img/thapathalil.jpg","img/thapathalil.jpg"]})
]);
and it shows:
Uncaught SyntaxError: Unexpected token for...
how can i solve this?? how can i fetch location inside of "images"
THANKS in advance
Actually you got Uncaught SyntaxError: Unexpected token for... because you used the for..loop in the string concatenation statement, directly after the + sign.
Change this code :
html += '<div class="title"><div class="img-list clearfix">' +
for (var i = 0; i <= this.props_[images].length; i++) {
console.log(this.props_[images[i]]);
// <img src=' + this.props_['images'] + '>
}
+ '</div></div>'
To the following:
html += '<div class="title"><div class="img-list clearfix">';
for (var i = 0; i <= this.props_['images'].length; i++) {
console.log(this.props_['images'][i]);
html += '<img src=' + this.props_['images'][i] + '>';
}
html += '</div></div>'
Note:
You should separate the concatenation of strings to the html
variable and the for loop logic, using html += instead of just using concatenation with + sign on multiple lines.
Make sure to wrap the properties names between two '' while accessing your objects, like in this.props_[images] where it should be this.props_['images'] and in this.props_[images[i]] where it should be this.props_['images'][i].
And the first 2 lines of your html variable decalaration and the concatenation, var html = ''; html += '<div class="store-data">'; can be shortened to just var html = '<div class="store-data">';.
I think there is a typo. Change this:
console.log(this.props_[images[i]])
to
console.log(this.props_['images'][i])
And you should use
i < this.props_['images'].length
So try this:
for (var i = 0; i < this.props_['images'].length; i++) {
console.log(this.props_['images'][i]);
}
I don't know what is happening, but both my images and links are not working, even after declaring globally!?
if I write the src directly into src then everything seems fine , even alert pops the same url and img src! need help guys!
var combo0;
var combo1;
var combo2;
var combo3;
var random;
var images=["../IMAGES/park.jpg","../IMAGES/palace.jpg","../IMAGES/oriental.jpg"]
var weburls=["https://www.royalplaza.com.hk","https://www.caesars.com","http://www.venetianmacao.com/"]
function gethotel(){ // a= check-in b=check-out and c=no-of-rooms
var arraysofobjects=[
combo0=[
],
combo1=[
{hotelname:"The Royal Plaza",purl:"images[0]",rflag:"",weburl:"weburls[0]",description:"Locate"
,price:"HKD 1200"},
],
combo2=[
{hotelname:"The Royal Plaza",purl:"images[0]",rflag:"",weburl:"weburls[0]",description:"Located drive away."
,price:"HKD 1200"},
{hotelname:"Caesars Palace",purl:"images[1]",rflag:"",weburl:"weburls[1]",description:"Built in 1903, the treatments"
,price:"HKD 1900"}
],
combo3=[
{hotelname:"The Royal Plaza",purl:"images[0]",rflag:"",weburl:"weburls[0]",description:"Located in less ."
,price:"HKD 1200"},
{hotelname:"Caesars Palace",purl:"images[1]",rflag:"",weburl:"weburls[1]",description:"Built in 1903, tatments"
,price:"HKD 1900"},
{hotelname:"The Venetian Hotel",purl:"images[2]",rflag:"",weburl:"weburls[2]",description:"The Vor area."
,price:"HKD 2200"}
]
]
random=Math.floor((Math.random() * 4));
return arraysofobjects[random];
}
var object=gethotel();
for(var i=0; i<random;++i) {
var heading = '<h2>' + object[i].hotelname + '</h2>';
var description = '<p>' + object[i].description + '</p>';
var priceho='<h4>' + object[i].price + '</h4>';
//web url
var a = document.createElement('a');
var linkText = document.createTextNode("Offical website");
a.appendChild(linkText);
a.title = "official website";
a.href = object[i].weburl;
var hotel = '<img src="object[i].purl">' + '<div>'+ heading + description + priceho + '<a target="_blank" href=object[i].weburl>Official website</a>' +'</div>';
var str="Details";
var link=this.str.link("room.html");
document.getElementById("hotels").innerHTML+=hotel + link;
}
It looks like is may be because your weburl:"weburls[0]" property value has quotes around it. Try it like: weburl:weburls[0].
I assume that you have an array elsewhere in your code named weburls, and the above property is supposed to be setting the weburl property equal to the value of the 0-indexed item in weburls.
With the quotes it means after this line a.href = object[i].weburl;, a.href is literally equal to "weburls[0]". You should be able to perform an inspection on the DOM to confirm this.
Update
The code in the for loop seems that it could be replaced with this:
var heading = '<h2>' + object[i].hotelname + '</h2>';
var description = '<p>' + object[i].description + '</p>';
var priceho='<h4>' + object[i].price + '</h4>';
var hotel =
'<img src="' + object[i].purl + '" />' +
'<div>' + heading + description + priceho +
'<a target="_blank" href="' + object[i].weburl + '">Official website</a>' +
'</div>';
document.getElementById("hotels").innerHTML += hotel;
I've searched around and found no pure js solution to my issue that I can apply to my code.
It's a script that prints an array of images, but for now it only prints 1 array.
Pertinent code in html:
<div id="imgViewer"></div>
<script>
var imgViewerImages = ['img/imgViewer/1.png','img/imgViewer/2.png','img/imgViewer/3.png','img/imgViewer/4.png','img/imgViewer/5.png','img/imgViewer/6.png'];
</script>
<script src="services/imgViewer.js"></script>
And in JS:
function imgViewerPrinter(){
var imgViewerTarget = document.getElementById('imgViewer');
imgViewerImages.toString();
for (var i=0;i<imgViewerImages.length;i++){
imgViewerTarget.innerHTML = '<img src="' + imgViewerImages[i] + '">';
}
}
window.onload = imgViewerPrinter();
I'm still a noob is JS so I ask for your pacience.
Thanks in advance
try :
imgViewerTarget.innerHTML += "<img src="' + imgViewerImages[i] + '">";
If you want to print out an array of images shouldnt you have your HTML code in the loop making i the image number for example;
for (var i=0;i<imgViewerImages.length;i++){
var imgViewerImages = ['img/imgViewer/' + [i] + '.png'];
}
Try this optimized soln.
var imgViewerImages =['img/imgViewer/1.png','img/imgViewer/2.png','img/imgViewer/3.png','img/imgViewer/4.png','img/imgViewer/5.png','img/imgViewer/6.png'];
function imgViewerPrinter(){
var imgList=[];
for (var i=0;i<imgViewerImages.length;i++){
imgList.push('<img src="' + imgViewerImages[i] + '" />');
}
var imgViewerTarget = document.getElementById('imgViewer');
imgViewerTarget.innerHTML = imgList.join('');
}
window.onload = imgViewerPrinter();
try something like this,Because your code rewrite innerHTML again and again, so you get last iterated value.
Instead of manipulating DOM in every loop,Below code will manipulate your DOM one time only.
function imgViewerPrinter(){
var imgViewerTarget = document.getElementById('imgViewer');
var imgViewerImages_length = imgViewerImages.length;
var image = '';
for (var i=0;i<imgViewerImages_length;i++){
image += '<img src="' + imgViewerImages[i] + '">';
}
imgViewerTarget.innerHTML = image;
}
I have a strange situation where my code works in the debugger (Chrome), and also work on IE 9, but doesn't work in chrome, and in Firefox. All I'm trying to do is to append a bunch of list elements to a list.
HTML:
<div id="FriendSelector">
<ul></ul>
</div>
JS:
var friends = []; //this gets loaded with about 600 friend objects (name, icon, id) earlier
function openFriendSelector() {
var $friendSelector = $('#FriendSelector');
$friendSelector.show();
bindFriends();
}
function bindFriends() {
var $list = $('#FriendSelector ul');
for (i = 0; i < friends.length; i++) {
var friend = '<li id="' + friends[i].id + '"><div><img src="' + friends[i].icon + '" class="avatar"/>' + friends[i].name+ '</div></li>';
$list.append(friend);
}
}
When I click the button that opens the FriendSelector DIV (initially hidden), I see a blank DIV, however, if I close the popup and re-open it, the friends are there...
Any help is appreciated.
Found the issue. The array was taking a few seconds to get loaded (via ajax). So, after the page loads, if I wait a couple seconds and then open the div, it works. Which explains why it worked in the debugger.
Try to avoid so many .append() calls at once, so replace your following code:
for (i = 0; i < friends.length; i++) {
var friend = '<li id="' + friends[i].id + '"><div><img src="' + friends[i].icon + '" class="avatar"/>' + friends[i].name+ '</div></li>';
$list.append(friend);
}
for this one:
for (i = 0, friend=''; i < friends.length; i++) {
friend +='<li id="' + friends[i].id + '"><div><img src="' + friends[i].icon + '" class="avatar"/>' + friends[i].name+ '</div></li>';
}
$list.append(friend);
UPDATE:
Try to load friends prior to showing the div, like this:
function openFriendSelector() {
bindFriends();
}
function bindFriends() {
var $list = $('#FriendSelector ul');
for (i = 0, friend = ''; i < friends.length; i++) {
friend = '<li id="' + friends[i].id + '"><div><img src="' + friends[i].icon + '" class="avatar"/>' + friends[i].name+ '</div></li>';
}
$list.append(friend);
$list.parent().show();
}
first time posting here, but god know's I use this site to search for problems all the time :P Well, I'm having a problem of my own now that I can't seem to figure out easily searching around Google, and after playing with it for about 2 hours, I've finally decided to post a question and see what you guys think.
What I'm trying to accomplish here is to have a button that appears over a div when you hover over it that, when clicked, opens an editing pane. The button appears over the div correctly, but for some reason I cannot seem to make the onclick function work to save my life lol. Here's the code I'm working with. If it's not enough, please let me know and I'll add a little more sauce. :P
function place_widget(name, properties){
//bbox
var pleft = properties[0];
var ptop = properties[1];
var width = properties[2];
var height = properties[3];
var pright = pleft + width;
var pbottom = pleft + height;
var bbox = [pleft, ptop, pright, pbottom];
boxes[name] = bbox;
//ID's
var id = 'widget_' + name;
var editspanid = id + "_editspan";
var editbuttonid = id + "_editbutton";
var editpaneid = id + "_editpane";
//Creating Elements
var div = "<div id='" + id + "' class='widget' onmouseover='widget_hover(event);' onmouseout='widget_out(event);'>";
var editbutton = "<a id='" + editbuttonid + "' href='#'><img onclick='toggleEdit;' src='../images/edit_button.png'></a>";
var editspan = "<span id='" + editspanid + "' class='editspan'>" + editbutton + "</span>";
var editpane = "<span id='" + editpaneid + "' class='editpane'>:)</span>";
div += editspan + editpane + "</div>";
body.innerHTML += div;
//Configuring Elements
var editspanelement = document.getElementById(editspanid);
var editbuttonelement = document.getElementById(editbuttonid);
editbuttonelement.onclick = alert; //Does nothing.
var editpaneelement = document.getElementById(editpaneid);
var mainelement = document.getElementById('widget_' + name);
mainelement.style.left = (pleft + leftmost) + "px";
mainelement.style.top = (ptop + topmost) + "px";
mainelement.style.width = width;
mainelement.style.height = height;
getContentsAJAX(name);
}
Sorry for the ugly code :P Anyone have any idea why the onclick function isn't working?
Also, a bit of extra info: If I open up firebug and put in :
document.getElementById('widget_Text_01_editbutton').onclick = alert;
When I click the button, I get:
uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "native frame :: <unknown filename> :: <TOP_LEVEL> :: line 0" data: no]
I'm not exactly sure what that means off hand.
Thanks!
Can you try changing:
<img onclick='toggleEdit;' src='../images/edit_button.png'>
to:
<img onclick='toggleEdit();' src='../images/edit_button.png'>
Also, is "alert" a function you wrote?
Start by changing this:
editbuttonelement.onclick = alert; //Does nothing.
to this:
editbuttonelement.onclick = function() {alert("Got a click");};
and then change this:
var editbutton = "<a id='" + editbuttonid + "' href='#'><img onclick='toggleEdit;' src='../images/edit_button.png'></a>";
to this:
var editbutton = "<a id='" + editbuttonid + "' href='#'><img onclick='toggleEdit();' src='../images/edit_button.png'></a>";
What you are clicking on? The image or the link or the span? Do you know which is getting the click event?
document.getElementById('widget_Text_01_editbutton').onclick = alert;
causes illegal invocation because it is trying to set this to something else (the element) than window inside alert.
alert.call( {} )
//TypeError: Illegal invocation
alert.bind( window ).call( {} )
//works
So either:
document.getElementById('widget_Text_01_editbutton').onclick = alert.bind( window );
or even better as the above will only work in some browsers:
document.getElementById('widget_Text_01_editbutton').onclick = function(){alert();};
It will help you in executing.
<img onclick='toggleEdit;' src='../images/edit_button.png'>