By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,636 Members | 1,814 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,636 IT Pros & Developers. It's quick & easy.

Display of the image from JavaScript

P: n/a
Hi,

I have problem with JavaScript for gallery of images.
From the overview page with thumbnails, after a click on the small
picture,
the subpage 'slide_show.html' is called, with a number of picture as
parameter
for example: <a href=slide_show.html?nb=2>
(The code is at the end of this post)

The page 'slide_show.html' should display the appropriate picture
and give the possibility to navigate previous/next.

Result: some browsers don't display the first picture. It looks like a
browser
finished to display the picture before it resolved its name.
Some browsers show the first picture ok.
The navigation previous/next works always ok.

What is wrong? I tried to move the code inside the page but it didn't
help.
With the help of document.write I can see, that the parsing of
parameter
and finding the name of the picture was ok, but it wasn't displayd.

Do you have any ideas?

Best regards,
K.

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

NewImg = new Array (
"P0000284.jpg",
"P0000286.jpg",
"P0000287.jpg",
"P0000288.jpg",
"P0000291.jpg"
);

var current = 0;
var len = NewImg.length - 1;
var param = location.search;

param = param.substr(4,param.length);
current = eval(param);

document.write( "location.href: ", location.href, "<BR>" );
document.write( "location.search: ", location.search, "<BR>" );
document.write( "param: ", param, "<BR>" );
document.write( "current: ", current, "<BR>" );

function showImg()
{
document.slideshow.src = NewImg[current];
}

function chgImg(direction)
{
if (document.images)
{
current = current + direction;
if (current len)
{
current = 0;
}
if (current < 0)
{
current = len;
}
document.slideshow.src = NewImg[current];
}
}
</script>

</HEAD>

<BODY>

<a href="javascript:chgImg(-1)">Previous</a>
<a href="javascript:chgImg(1)">Next</a>
<br><br>
<img src="javascript:showImg()" name="slideshow">
<br><br>
<a href="javascript:chgImg(-1)">Previous</a>
<a href="javascript:chgImg(1)">Next</a>

</BODY>

</HTML>
Nov 14 '08 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Hello Krzysztof,

the problem is, that the call of showImg() takes place to early in many
cases, so some browsers get confused about establishing the image object and
dynamically creating its source. To solve this, use first a placeholder
image (e. g. a transparent GIF called space.gif) and second put the
showImg() call into the onload event handler of the body tag.

So your body tag then looks like
<BODY onload="showImg()">
and your image tag looks like
<img src="space.gif" name="slideshow">

This guarantees that the javascript function gets called AFTER the image tag
object has been loaded.
Instead of using such a placeholder image you can also place the right first
image, of course, which you generate dynamically. For example:
<SCRIPT LANGUAGE="JavaScript">
document.write('<img src="' + NewImg[current] + '" name="slideshow">');
</script>
It depends on you, which image tag you prefer.

I hope that helps you.

Nice greetings from
Codaholic
Nov 16 '08 #2

P: n/a
SAM
Le 11/14/08 3:43 PM, kr*****************@gmail.com a écrit :
Hi,

I have problem with JavaScript for gallery of images.
From the overview page with thumbnails, after a click on the small
picture,
the subpage 'slide_show.html' is called, with a number of picture as
parameter
for example: <a href=slide_show.html?nb=2>
(The code is at the end of this post)

The page 'slide_show.html' should display the appropriate picture
and give the possibility to navigate previous/next.

Result: some browsers don't display the first picture. It looks like a
browser
finished to display the picture before it resolved its name.
Some browsers show the first picture ok.
The navigation previous/next works always ok.

What is wrong?
that :
<img src="javascript:showImg()" name="slideshow">
can't work
<html>
<head>
<title>My Gallery</title>
<script type="text/javascript">

NewImg = [
"P0000284.jpg",
"P0000286.jpg",
"P0000287.jpg",
"P0000288.jpg",
"P0000291.jpg"
];

var current = 0;
if(self.location.search.length>1)
current = self.location.toString().split('=')[1]*1;
var len = NewImg.length;

function showImg()
{
if (document.images)
document.slideshow.src = NewImg[current];
document.getElementById('comment').innerHTML = NewImg[current];
window.status = 'View #'+(current+1); return true;
}

function chgImg(direction)
{
if(typeof direction == 'undefined') direction=0;
current = current + direction;
current = current>=len? 0 :
current<0? len :
current;
showImg();
}

window.onload = function() { chgImg(); };
</script>

</head>
<body style="text-align:center">
<p>
<button onclick="chgImg(-1);">Previous</button>
<button onclick="chgImg(1);">Next</button>
<br><br>
<img src="" name="slideshow" alt="viewer"><br>
<span id="comment">legend</span><br>
<a href="javascript:chgImg(-1)">Previous</a>
<a href="javascript:chgImg(1)">Next</a>
</p>
</body>
</html>

--
sm
Nov 16 '08 #3

P: n/a
Hi Codaholic,

thanks a lot for your tips.

I've found next possibility:
<img name="slideshow" src="javascript:showImg()" onError="showImg()">

but your seems to be better!

Regards,
K.
Nov 17 '08 #4

This discussion thread is closed

Replies have been disabled for this discussion.