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;
}
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 have an img_urls array which contains 2 image urls.
I use this array to loop img tag and using for loop.
But instead of having 2 images, i have 3 images in my output.
This is my code;
var img_urls = ["http://i.onionstatic.com/avclub/5648/48/16x9/1200.jpg", "https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg"];
for (i = 0; i < img_urls.length; i++) {
$("div").append(
"<div><img src=' " + img_urls[i] + "'/></div>"
);
}
So, whats is wrong with my code?
JSFIDDLE
When adding the first image you generate a new div.
Then the second image if appended to existing divs.
You should have only one destination div. Add an id to the main div:
<div id="container"></div>
--
var img_urls = ["http://i.onionstatic.com/avclub/5648/48/16x9/1200.jpg", "https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg"];
for (i = 0; i < img_urls.length; i++) {
$("div#container").append(
"<div><img src=' " + img_urls[i] + "'/></div>"
);
}
You need to use selector i.e. id class in the main div as when the next iteration occurs it contains two div in the body. Check this fiddle
Problem is that you have $("div") as selector. So when you append the first image, you also add new div. So the next image is appended to two divs. Probably you can add id to your div, so
<div id="test"></div>
...
$("#test").append
Reason is you are appending everything inside the loop.
$(function() {
var img_urls = ["url1", "url2"];
var html= ""
for (i = 0; i < img_urls.length; i++) {
html += "<div><img src=' " + img_urls[i] + "'/></div>";
}
$("div").append(html);
});
You are appending to global div element, you are appending div also, so generated html will append to generated div too.
Here is html,
<div class='test'></div>
Here is javascript code,
$(function() {
var img_urls = ["image_url1", "image_url2"];
var html = '';
for (i = 0; i < img_urls.length; i++) {
html += "<div><img src=' " + img_urls[i] + "'/></div>"
}
$("div.test").append(html);
});
Please find here working link here
I hope this will help
<div id="container"></div>
for (var i = 0; i < img_urls.length; i++) {
console.log(img_urls.length)
$("div#container").append(
"<div><img src=' " + img_urls[i] + "'/></div>"
);
}
when you append the first image you create a div in that div the horse is added and the first div is also populated by the horse
Try this and see Demo
<div></div>
$(function() {
var img_urls = ["http://i.onionstatic.com/avclub/5648/48/16x9/1200.jpg", "https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg"];
for (i = 0; i < img_urls.length; i++) {
$("div").append(
"<img src=' " + img_urls[i] + "'/> </br>"
);
}
});
this is my code: I want to ask
<script type="text/javascript">
var total = 4;
</script>
How can I do this?
<img src="img/apple_" + total + ".png" id="imageBox"/>
I've been try to use call function and document.onload but it's not work at all, can somebody save me?
I am supposing you just want to update the image src with javascript.
document.getElementById('imageBox').src = "img/apple_" + total + ".png";
You need to add html in JavaScript like this:
<div id="foo"></div>
<script type="text/javascript">
var total = 4;
document.getElementById('foo').innerHTML = '<img src="img/apple_' + total + '.png" id="imageBox"/>';
</script>
window.onload = function() {
var total = 4;
document.getElementById('imageBox').src = 'img/apple_' + total + '.png"';
};
<img src="" id="imageBox"/>
Here is a clean way to do this.
Demo
var create_img_element = function(total, targetId){
//create the img element
var img = document.createElement('img');
//set the source of the image
img.src = 'img/apple_' + total + '.png';
//add the image to a specific element
document.getElementById(targetId).appendChild(img);
}
create_img_element(5, 'foo');
function SlideShow(area)
{
var SlideImg = new Array('img1', 'img2');
var SlideArea = document.getElementById(area);
for(i=0;i<SlideImg.length;i++)
{
var html = '<img src="images/room/' + SlideImg[i] + '.jpg" id="' + SlideImg[i] + '" class="not-active" />';
SlideArea.innerHTML += html;
}
var a = 0;
function RunSlide()
{
document.getElementById(SlideImg[a]).className = 'active';
a++;
}
var run = setTimeout('RunSlide()', 5000);
}
This function not working after I add the setTimeout() method there. Can anybody help me?
Just change it to:
var run = setTimeout(RunSlide, 5000);
The reason is: when you pass a string to setTimeout() it is evaluated in global context - where RunSlide is not visible, because it is local.
Passing a string to setTimeout() is never a good idea, here you have one reason.
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!