473,574 Members | 3,176 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Display of the image from JavaScript

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.htm l' 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.htm l' 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="JavaS cript">

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

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

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

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

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

function chgImg(directio n)
{
if (document.image s)
{
current = current + direction;
if (current len)
{
current = 0;
}
if (current < 0)
{
current = len;
}
document.slides how.src = NewImg[current];
}
}
</script>

</HEAD>

<BODY>

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

</BODY>

</HTML>
Nov 14 '08 #1
3 3844
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="JavaS cript">
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
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.htm l' 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.htm l' 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.j pg",
"P0000286.j pg",
"P0000287.j pg",
"P0000288.j pg",
"P0000291.j pg"
];

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

function showImg()
{
if (document.image s)
document.slides how.src = NewImg[current];
document.getEle mentById('comme nt').innerHTML = NewImg[current];
window.status = 'View #'+(current+1); return true;
}

function chgImg(directio n)
{
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"><b r>
<span id="comment">le gend</span><br>
<a href="javascrip t:chgImg(-1)">Previous</a>
<a href="javascrip t:chgImg(1)">Ne xt</a>
</p>
</body>
</html>

--
sm
Nov 16 '08 #3
Hi Codaholic,

thanks a lot for your tips.

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

but your seems to be better!

Regards,
K.
Nov 17 '08 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
6194
by: Sandman | last post by:
I'm having some problem here... I have a javascript I've downloaded that goes through all PNG files and enables the transparency channel in them for IE5.5+ by converting them to SPAN layers with the image as background. This works great until I put one of these PNG files inside a display:none block and later sets the block to...
1
1618
by: Qingdong Z. | last post by:
I have a web page to work as Video Web Viewer. It pulls image from IP camera using JavaScript. It works great in most of time. When users are in slow network, the Internet Explore begins to display part of the image before the image is fully downloaded, so the video looks like broken sometimes. I remember that web Brower used to have an...
6
1674
by: Ben | last post by:
I am trying to write codes in VB.net to display 3 images in series on a Webform with each image being displayed in the same box for 5 seconds. I am trying to use Timer and image button, don't know how to get around it. thanks for any help
4
2348
by: DoomedLung | last post by:
I have been developing an image gallery which needed to be dynamic as possible. so I have placed the gallery in a div plus a div containing the large image to be displayed. It works by changing the display property of the gallery div to 'none' and the largeImage div to 'block' which has an affect of switching pages but obviously saving time...
3
2268
by: DoomedLung | last post by:
I have been developing an image gallery which needed to be dynamic as possible. so I have placed the gallery in a div plus a div containing the large image to be displayed. It works by changing the display property of the gallery div to 'none' and the largeImage div to 'block' which has an affect of switching pages but obviously saving time...
6
9300
by: yk | last post by:
Hi, Is it a technique available in html/javascript in order to display same image many many times on a same page? Because of a large page loading I am looking for a way not to have same image many times in a page load, but rather once. Yefim
4
2732
by: ArrK | last post by:
I want to use a control frame to create and/or modify the content (images and text) of a display frame - all files and images are client side. . When I try to write to the display frame from the control frame I get the error message: "window.parent.pictureFrame has no properties" and all content of the display frame disappears. My plan was to...
3
1426
by: mylog | last post by:
I have a problem regarding open the enlarged image in a new window. What I am facing problem is I have to open put the image in the div from Javascript which I have done well and now what I need is when the user clicks on the image the image should be displayed in a new window. I have also tried this by using href option but when I put the...
2
8319
by: Tim Streater | last post by:
The following test page is intended to allow the user to choose an image file, and then display it. It works as expected in Safari 3.1.1, FF 2.0.0.14 (Mac), and IE7 (XP). But, it fails in FF 2.0.0.14 (Win-XP) - the image doesn't appear. The error console shows no errors and Page Info, under the media tab, shows no loaded image (in contrast...
3
2835
by: =?Utf-8?B?QmlsbHkgWmhhbmc=?= | last post by:
I have a asp.net app, in the page there is a scan activex which could scan and save a jpg file in client harddisk. How could we access and display this jpg file on the fly using js in the client IE? Thanks, -Billy zhang
0
7843
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7764
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8111
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8274
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
6514
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5660
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5336
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3795
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
1102
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.