/    Sign up×
Community /Pin to ProfileBookmark

Load XML image database in Javascript Array

Copy linkTweet thisAlerts:
Sep 26.2008

Hi,

I’m pretty new at javascript, xml etc.
So I was wondering if it is possible to create a XML file, with image links. And then load this links into a javascript array.

I’ve got this:

[CODE]
<script language=”javascript”>
<!–
var gallery = new Array();
[B]gallery[0] = new Array(
“http://www-tc.pbs.org/thewar/images/inline_pics/landing_at_war_03.jpg”,”http://www.spacetoday.org/images/SolSys/Earth/EarthBlueMarbleWestTerra.jpg”,
“http://content.answers.com/main/content/wp/en/thumb/a/a6/300px-Basic_human_anatomy_labeled.jpg”,
“http://static.howstuffworks.com/gif/green-beans-1.jpg”,”http://www.geekologie.com/2007/12/07/future-car-1.jpg”,
“http://www.afterdowningstreet.org/sites/afterdowningstreet.org/files/images/no_sleeping_hobo_5_430.thumbnail.jpg”
);[/B]

function pickImageFrom(whichGallery)
{
var idx = Math.floor(Math.random() * gallery[whichGallery].length);
document.write(‘<a href=”‘ + gallery[whichGallery][idx] + ‘” target=”_blank”><img src=”‘ + gallery[whichGallery][idx] + ‘” width=”50″ height=”50″></a>’);
}
//–>
</script>
[/CODE]

I’d like not having to open this file each time I want to add an image. I’d like to do it in a pretty, clean, external XML file, or some other type of file… like a txt file where I’d simply add the links. I dunno. Anybody got a clue?

Thank you

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@A1ien51Sep 26.2008 — Yes you can do it, but your website is not going to be used by people with JavaScript disabled and search engines will not be able to index your site.

Better to use a serverside language to read the XML page and build up the code.

Eric
Copy linkTweet thisAlerts:
@rnd_meSep 26.2008 — you can simply more your array to an external file and point a script tag's .src attrib at the new file. with a tiny rewrite of your formatting, you could store it as JSON and load it other things like flash, java etc.

but just moving your code external can vastly simply updates.

also, i don't see how this would hurt SEO vs your current setup, not sure what A1ien51 is getting at.
Copy linkTweet thisAlerts:
@KorSep 26.2008 — 
also, i don't see how this would hurt SEO vs your current setup, not sure what A1ien51 is getting at.[/QUOTE]
SEO ignore javascript codes, thus if, "in extremis", a site is entirely build with javascript methods, SEO will see nothing, so that it will not rank the site.
Copy linkTweet thisAlerts:
@rnd_meSep 27.2008 — SEO ignore javascript codes, thus if, "in extremis", a site is entirely build with javascript methods, SEO will see nothing, so that it will not rank the site.[/QUOTE]

Agreed, but not to get off track; i don't think img urls count for much as far as rank...

in fact, for google, the pages linking to you are a lot more important than the actual content of your site (or lack thereof) for building pageRank.

if you think real images help, you can always place all the image tags in the body with style set to "display:none", and the images will be found by crawlers, but not displayed.

this would also pre-load the images, so the script would run quickly once everything got going.
Copy linkTweet thisAlerts:
@goatchildauthorSep 27.2008 — Hi,

Ok so how do I do it?

Than you
Copy linkTweet thisAlerts:
@rnd_meSep 28.2008 — remove the url array from your html page.

save this code as imgurls.js:

[CODE]

var gallery = new Array();
gallery[0] = [ // place urls in quotes, 1 per line, followed by a comma (except the last one).
"http://www-tc.pbs.org/thewar/images/inline_pics/landing_at_war_03.jpg",
"http://www.spacetoday.org/images/SolSys/Earth/EarthBlueMarbleWestTerra.jpg",
"http://content.answers.com/main/content/wp/en/thumb/a/a6/300px-Basic_human_anatomy_labeled.jpg",
"http://static.howstuffworks.com/gif/green-beans-1.jpg",
"http://www.geekologie.com/2007/12/07/future-car-1.jpg",
"http://www.afterdowningstreet.org/sites/afterdowningstreet.org/files/images/no_sleeping_hobo_5_430.thumbnail.jpg"

]; //end of url list


[/CODE]



add this tag to your page before the script tag you are using in your first post:
[CODE]

<script type="text/javascript" src="imgurls.js"></script>

[/CODE]
×

Success!

Help @goatchild spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...