Display of the image from JavaScript

  • Thread starter krzysztof.murkowski
  • Start date
K

krzysztof.murkowski

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>
 
C

Codaholic

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
 
S

SAM

Le 11/14/08 3:43 PM, (e-mail address removed) 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?
Click to expand...

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>
 
K

krzysztof.murkowski

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Final chapter of "Learn PHP, MySQL and JavaScript" 3
Add Image and label dynamically inside the dropdown 2
Javascript fill function data from multidimensonal array 0
Image not changing between "mute" & "un-mute" images. 5
Help with code 0
Put image over the top of another image on hover 3
Image shifts to the right when export the page to pdf 4
Help with my responsive home page 2

Members online

Total: 86 (members: 3, guests: 83)
Robots: 365

Forum statistics

Threads
473,995
Messages
2,570,233
Members
46,820
Latest member
GilbertoA5

Latest Threads

Top