The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V < 1 2  
 Reply to this topicStart new topic
> Multiple Javascript Slideshows
Alicia_2tt
post Sep 16 2012, 02:05 PM
Post #21





Group: Members
Posts: 6
Joined: 14-September 12
Member No.: 17,791
QUOTE(Frederiek @ Sep 16 2012, 05:05 AM) *

I suggest you start by validating your page and fix the errors found:
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes

Then, I don't see any sliding happening on either images at all. Do you?
BTW, both images are distorted by resizing them to 300x300px in HTML attributes, while they really are 240x360px in size.

The structure errors in the HTML are probably in for the slide to not work. I see you use a script from javascriptkit.com. If you look closely to their sample code, you'll see that the "preload" of the images (var image1=new Image() etc.) is put inside the HEAD section of the page. And the slide script is placed at the end of the document, just before the closing BODY tag.

I'd suggest you take one step at the time by making one of the image slides work for a start. If that works, we'll go on to the second one.


I am seeing the first one alone sliding. This slideshow isn't the original, the original was on my front page but I removed it because it was not looking good without all the different slideshows sliding. This new one (in the Company Info tab) is recreated using the same steps as the first one. (PS. in the Catalogue tab, there is also a slideshow that's working good, but I am sure if I try to add another next to it, the second one wont work)

I set the image as 300x300 just for so.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 17 2012, 02:28 AM
Post #22


Programming Fanatic
********

Group: Members
Posts: 3,541
Joined: 23-August 06
From: Europe
Member No.: 9
I have only been looking at your Company_Info.html page and there is no slider there that works for me (Safari 6 on Mac).

The advice I gave you in my previous post still stands. Make sure the structure of he HTML is correct. You have multiple <html> blocks inside BODY, as if you copy/pasted entire html pages inside it.

I made a sample page, using your images, to make two slides work.
Watch the naming of the images and calls inside the scripts.

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
    <script type="text/javascript">
    <!--
    // first slide
    var image1=new Image();
    image1.src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_ppl.jpg";
    var image2=new Image();
    image2.src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_hp.jpg";
    var image3=new Image();
    image3.src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_capri_fv.jpg";

    // second slide
    var image4=new Image();
    image4.src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_hp.jpg";
    var image5=new Image();
    image5.src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_capri_fv.jpg";
    var image6=new Image();
    image6.src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_ppl.jpg";
//-->
</script>
</head>
<body>
<img src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_ppl.jpg" name="slide" width="300" height="300" />
<img src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_hp.jpg" name="slide2" width="300" height="300" />
<script type="text/javascript">
<!--
//variable that will increment through the images
var step=1;

// first slide script:
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return;
document.images.slide.src=eval("image"+step+".src");
if (step<3)
    step++;
else
    step=1;
    //call function "slideit()" every 2.5 seconds
    setTimeout("slideit()",2500);
}
slideit();

// second slide script:
function slideit2(){
//if browser does not support the image object, exit.
if (!document.images)
return;
document.images.slide2.src=eval("image"+step+".src");
if (step<3)
    step++;
else
    step=1;
    //call function "slideit()" every 2.5 seconds
    setTimeout("slideit2()",2500);
}
slideit2();
//-->
</script>
</body>
</html>



--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Alicia_2tt
post Sep 17 2012, 02:01 PM
Post #23





Group: Members
Posts: 6
Joined: 14-September 12
Member No.: 17,791
QUOTE(Frederiek @ Sep 17 2012, 03:28 AM) *

I have only been looking at your Company_Info.html page and there is no slider there that works for me (Safari 6 on Mac).

The advice I gave you in my previous post still stands. Make sure the structure of he HTML is correct. You have multiple <html> blocks inside BODY, as if you copy/pasted entire html pages inside it.

I made a sample page, using your images, to make two slides work.
Watch the naming of the images and calls inside the scripts.

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
    <script type="text/javascript">
    <!--
    // first slide
    var image1=new Image();
    image1.src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_ppl.jpg";
    var image2=new Image();
    image2.src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_hp.jpg";
    var image3=new Image();
    image3.src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_capri_fv.jpg";

    // second slide
    var image4=new Image();
    image4.src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_hp.jpg";
    var image5=new Image();
    image5.src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_capri_fv.jpg";
    var image6=new Image();
    image6.src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_ppl.jpg";
//-->
</script>
</head>
<body>
<img src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_ppl.jpg" name="slide" width="300" height="300" />
<img src="http://i1178.photobucket.com/albums/x369/Derobe_Ista/md_93038esc_hp.jpg" name="slide2" width="300" height="300" />
<script type="text/javascript">
<!--
//variable that will increment through the images
var step=1;

// first slide script:
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return;
document.images.slide.src=eval("image"+step+".src");
if (step<3)
    step++;
else
    step=1;
    //call function "slideit()" every 2.5 seconds
    setTimeout("slideit()",2500);
}
slideit();

// second slide script:
function slideit2(){
//if browser does not support the image object, exit.
if (!document.images)
return;
document.images.slide2.src=eval("image"+step+".src");
if (step<3)
    step++;
else
    step=1;
    //call function "slideit()" every 2.5 seconds
    setTimeout("slideit2()",2500);
}
slideit2();
//-->
</script>
</body>
</html>




Somehow nothing seems to be working. I will have to take a long seat with this one. Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 18 2012, 02:10 AM
Post #24


Programming Fanatic
********

Group: Members
Posts: 3,541
Joined: 23-August 06
From: Europe
Member No.: 9
Doesn't my test page work for you?


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Alicia_2tt
post Sep 20 2012, 08:46 AM
Post #25





Group: Members
Posts: 6
Joined: 14-September 12
Member No.: 17,791
QUOTE(Frederiek @ Sep 18 2012, 03:10 AM) *

Doesn't my test page work for you?


It didnt work. Both were static
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 21 2012, 03:10 AM
Post #26


Programming Fanatic
********

Group: Members
Posts: 3,541
Joined: 23-August 06
From: Europe
Member No.: 9
In what browser did you test it? Works for me in Safari, Firefox and Opera, all on Mac.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 21 2012, 07:37 AM
Post #27


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,726
Joined: 9-August 06
Member No.: 6
And on Windows. wink.gif


--------------------
“Never go to excess, but let moderation be your guide.”
– Cicero
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 22 2012, 03:25 AM
Post #28


Programming Fanatic
********

Group: Members
Posts: 3,541
Joined: 23-August 06
From: Europe
Member No.: 9
Thanks for letting me know, Pandy.

Alicia, copy/paste my sample page in a new document of a text-editor, save as e.g. slide.html and run it in your browser. That should work for you too.

Or are you referring to your own page, where you can't get it to work?

[edit: typo error]

This post has been edited by Frederiek: Sep 22 2012, 03:26 AM


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

2 Pages V < 1 2
Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 22nd May 2013 - 10:48 PM
Invision Power Board © 2013  IPS, Inc.
Licensed to: HTMLHelp.com, LLC