PDA

View Full Version : Swiss Army Image Slideshow modification...



hansan
08-03-2010, 01:18 PM
hello all,
i'm trying to set two slide shows one bellow the other.this is the slide show which i use,

http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

when i using two slide show, there are two controlling buttons set(i.e. << , stop, play & >>).
now i'm trying to combine two slide shows which is controlling by one button set (i.e. when i click on the stop button, then both slides should be stop. etc....)
i tried this on several times, but i couldn't.

please help me to solve this problem..... thanx

Beverleyh
08-03-2010, 01:36 PM
Have you got a link to your website? (that would help us to see what you're trying to achieve)

I'm not sure why you'd want to have 2 slideshows controlled by one set of controls though.
If its to save space, there are other better suited slideshows in the DD library.

hansan
08-03-2010, 02:42 PM
yes of course. i can put a link to a testing page.

please visit

http://www.haduntest.comli.com/testing/test.html

what i want is,

1st descriptions should be there


1st image counter should be there


1st control buttons should be there

&

2nd descriptions should be there


2nd control buttons should not be there

and

through the 1st control buttons, should control the both slide shows



hope you could understand, what i'm looking for.... so please help me....
thanx

jscheuer1
08-04-2010, 07:24 AM
The best thing to do would be to combine the images somehow, each map with its corresponding image.

But, failing that, this is pretty good:


<html>
<head>

<style type="text/css">

/* All Styles Optional */

* {
font-family:arial;
font-size:10pt;
}
</style>

<script type="text/javascript">

var slides1=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides1[0] = ["images/place1.jpg", "The place of 'Shanghai'"];
slides1[1] = ["images/place2.jpg", "The place of 'Saint Vasili-cathedral'"];
slides1[2] = ["images/place3.jpg", "The place of 'Quattrocchi'"];
slides1[3] = ["images/place4.jpg", "The place of 'Chile' "];

slides1.counter=1;
slides1.use_title=1;
slides1.manual_start=1;

var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own.
slides2[0] = ["images/map1.jpg", "Map for 'Shanghai'"];
slides2[1] = ["images/map2.jpg", "Map for 'Saint Vasili-cathedral'"];
slides2[2] = ["images/map3.jpg", "Map for 'Quattrocchi'"];
slides2[3] = ["images/map4.jpg", "Map for 'Chile'"];

slides2.use_title=1; //use for descriptions as images title attributes
slides2.no_controls=1;
slides2.manual_start=1;
slides2.delay=3000;

(function(){
function augmentcontrols(){
var ctrls = ['', '', ''];
document.getElementById('prev0').onclick = function(){
iss[0].changeimg(false, 'nav');
iss[1].changeimg(false, 'nav');
};
document.getElementById('gostp0').onclick = function(){
iss[0].gostop(this);
iss[1].gostop();
};
document.getElementById('next0').onclick = function(){
iss[0].changeimg(true, 'nav');
iss[1].changeimg(true, 'nav');
};
setTimeout(function(){
if(iss[0].playing){
return;
}
iss[0].gostop(this);
iss[1].gostop(document.getElementById('gostp0'));
}, 3000);
}
if (window.addEventListener){
window.addEventListener('load', augmentcontrols, false);
}
else if (window.attachEvent){
window.attachEvent('onload', augmentcontrols);
}
})();

</script>

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

</head>
<body>

<div>
<script type="text/javascript">new inter_slide(slides1)</script>
</div>
<br>

<div>
<script type="text/javascript">new inter_slide(slides2)</script>
</div>

</body>
</html>

The only problem is, on slower connections, the shows might not sync up. That's why I suggest combining the images. However, as Beverleyh says, there may be a better script, one that could show two images at a time. Perhaps:

http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

would be good. The images would be side by side, but at least they would be in sync, even on slower connections.

hansan
08-04-2010, 07:54 AM
wow what a coding!

(function(){
function augmentcontrols(){
var ctrls = ['', '', ''];
document.getElementById('prev0').onclick = function(){
iss[0].changeimg(false, 'nav');
iss[1].changeimg(false, 'nav');
};
document.getElementById('gostp0').onclick = function(){
iss[0].gostop(this);
iss[1].gostop();
};
document.getElementById('next0').onclick = function(){
iss[0].changeimg(true, 'nav');
iss[1].changeimg(true, 'nav');
};
setTimeout(function(){
if(iss[0].playing){
return;
}
iss[0].gostop(this);
iss[1].gostop(document.getElementById('gostp0'));
}, 3000);
}
if (window.addEventListener){
window.addEventListener('load', augmentcontrols, false);
}
else if (window.attachEvent){
window.attachEvent('onload', augmentcontrols);
}
}
nice work jscheuer. it's really good enough :)

thank you very much.
.

hansan
08-04-2010, 09:45 AM
Oh dear! oh dear!! it is not working on IE.
it's working on firefox and chrome nicely. then i tested on IE6 & IE7. it is showing only 1st slideshow. but not showing the 2nd slideshow.
why it's not running on IE ?

jscheuer1
08-04-2010, 10:56 AM
Works fine here in IE 6, 7, and 8:

http://home.comcast.net/~jscheuer1/side/swiss_army_h.htm

Perhaps you didn't copy the entire page. Or it might be your IE browsers, where did you get them? What are they running under?

I tested in the real IE 7, and Tredosoft's IE 6 standalone (both of these under Windows XP), as well as in IE Tester's IE 6 (under Windows 7). Worked fine in all of those.

hansan
08-04-2010, 12:37 PM
this is awesome!
when testing in locally it is not working.but once it hosted, it is working fine in IE. is it problem in my IE browser???
i downloaded IE7 from here
http://www.microsoft.com/downloads/details.aspx?FamilyID=9ae91ebe-3385-447c-8a30-081805b2f90b&displayLang=en
and it was running under Windows XP.

hansan
08-04-2010, 12:51 PM
oh! when it put in to host, another 2 problems occurred.

when click on the stop button, then click >> & << buttons two slideshows are not working simultaneously (not always)


sometimes can not reached to all 4 images by using >> & << buttons, it's get stuck at some point (not always)

what can i do for this matter?
thank you very much jscheuer.

hansan
08-04-2010, 01:37 PM
please visit here
http://www.haduntest.comli.com/New%20Folder/combine.html
that problem sometimes occurred at the 1st visit.after download the page, quickly click on stop button then click on >> button. you will see the problems.

thanx

jscheuer1
08-04-2010, 03:07 PM
No I don't, both images still show up. What exactly is the problem? What exactly do I need to do, step by step, in which browser, under which OS do I need to do to replicate the problem?

However, consider this - You cannot click quickly on the stop button. You have to wait for it. That's because the button is a play button for three seconds after the page loads. If you quickly click on that, you cannot click on >> because it then is disabled in play mode. If you wait for it to become a stop button, clicking on it and then >> doesn't seem to do anything bad that I can see.

Also, most folks won't be quickly clicking on anything.

If I could understand what you are referring to, I might be able to tweak it so that whatever is causing the problem is disabled until it no longer can pose a threat. But right now I don't get what the problem is.

hansan
08-04-2010, 03:58 PM
sorry dear. i can not show you, what i have got in here. but i took a screen shot for you. please visit here.
http://www.haduntest.comli.com/Swiss_Army_error/Swiss_Army_error.jpg

this is one problem that i have said (i.e. two slideshows are not working simultaneously).
when i clicked on stop and then clicked on >> button, this situation raised. you can see in the above image is corresponding to "Chile" but the bellow image is corresponding to "Shanghai"

thank you very much for helping me.

jscheuer1
08-04-2010, 06:15 PM
Try this modified version:


<html>
<head>
<style type="text/css">

/* All Styles Optional */

* {
font-family:arial;
font-size:10pt;
}
</style>

<script type="text/javascript">

var slides1=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides1[0] = ["images/place1.jpg", "The place of 'Shanghai'"];
slides1[1] = ["images/place2.jpg", "The place of 'Saint Vasili-cathedral'"];
slides1[2] = ["images/place3.jpg", "The place of 'Quattrocchi'"];
slides1[3] = ["images/place4.jpg", "The place of 'Chile' "];

slides1.counter=1;
slides1.use_title=1;
slides1.manual_start=1;

var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own.
slides2[0] = ["images/map1.jpg", "Map for 'Shanghai'"];
slides2[1] = ["images/map2.jpg", "Map for 'Saint Vasili-cathedral'"];
slides2[2] = ["images/map3.jpg", "Map for 'Quattrocchi'"];
slides2[3] = ["images/map4.jpg", "Map for 'Chile'"];

slides2.use_title=1; //use for descriptions as images title attributes
slides2.no_controls=1;
slides2.manual_start=1;
slides2.delay=3000;

(function(){
function augmentcontrols(){
var ctrls = [document.getElementById('prev0'), document.getElementById('gostp0'), document.getElementById('next0')];
ctrls[0].onclick = function(){
iss[0].changeimg(false, 'nav');
iss[1].changeimg(false, 'nav');
};
ctrls[1].onclick = function(){
iss[0].gostop(this);
iss[1].gostop();
};
ctrls[2].onclick = function(){
iss[0].changeimg(true, 'nav');
iss[1].changeimg(true, 'nav');
};
setTimeout(function(){
ctrls[1].value = 'Play';
iss[0].gostop(ctrls[1]);
iss[1].gostop()
ctrls[0].disabled = ctrls[1].disabled = ctrls[2].disabled = false;
}, 3000);
}
if (window.addEventListener){
window.addEventListener('load', augmentcontrols, false);
}
else if (window.attachEvent){
window.attachEvent('onload', augmentcontrols);
}
})();

</script>

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

</head>
<body>

<div>
<script type="text/javascript">new inter_slide(slides1)
document.getElementById('gostp0').value = 'Stop';
document.getElementById('prev0').disabled = document.getElementById('gostp0').disabled = document.getElementById('next0').disabled = true;</script>
</div>
<br>

<div>
<script type="text/javascript">new inter_slide(slides2)</script>
</div>

</body>
</html>
<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>
<!-- End Of Analytics Code -->


Note: Not only has the code for my added function changed, I've also added some code to the script where it first calls to inter_slide() in the body of the page. This is all to disable the controls until the slide shows have presumably loaded. However, as I said before, on slow connections, there may still be problems with the sync.

hansan
08-04-2010, 07:08 PM
thank you dear. you are helping me lot.
this is working perfect working in locally.but there are more problems in hosting.
http://www.haduntest.comli.com/New/new_combine.html

the new code often has the problem, that simultaneous working. after 2nd image, two slide shows are not working simultaneously.beyond the 2nd image, it seems to be, the 2nd slideshow getting slow.

and sometimes when click on the stop button and click on the >> button, it is working 1st slideshow only.2nd slideshow not moving with >> button.(not always)

you tired lot for me. so as a human, i can't ask help more than that.because i'm not going to tired you any more and i'm appreciating your kindly help.
thank you very much. God bless you :)
.

jscheuer1
08-05-2010, 12:28 AM
Well, that's what I was saying about a slow connection. I have 100mbps, and it's no problem here. But the images are a little byte heavy. If you optimized them, things might work out at - say 50mbps. But what about less?

Swiss Army was designed to do an incremental preload. That means if the next slide isn't ready yet, it waits on the current slide. If we do a wholesale preload, it won't have to wait, but both shows will have to wait until the full preload is finished. It's a trade off. But when syncing the two shows is important, one that we should be willing to make. It will still help (in this new case with the initial delay of both shows) if you optimize the images.

Since we've come this far, why not try for the whole thing:


<html>
<head>

<style type="text/css">

/* All Styles Optional */

* {
font-family:arial;
font-size:10pt;
}
</style>

<script type="text/javascript">

var slides1=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides1[0] = ["images/place1.jpg", "The place of 'Shanghai'"];
slides1[1] = ["images/place2.jpg", "The place of 'Saint Vasili-cathedral'"];
slides1[2] = ["images/place3.jpg", "The place of 'Quattrocchi'"];
slides1[3] = ["images/place4.jpg", "The place of 'Chile' "];

slides1.counter=1;
slides1.use_title=1;
slides1.manual_start=1;

var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own.
slides2[0] = ["images/map1.jpg", "Map for 'Shanghai'"];
slides2[1] = ["images/map2.jpg", "Map for 'Saint Vasili-cathedral'"];
slides2[2] = ["images/map3.jpg", "Map for 'Quattrocchi'"];
slides2[3] = ["images/map4.jpg", "Map for 'Chile'"];

slides2.use_title=1; //use for descriptions as images title attributes
slides2.no_controls=1;
slides2.manual_start=1;
slides2.delay=3000;

(function(){
function augmentcontrols(){
var ctrls = [document.getElementById('prev0'), document.getElementById('gostp0'), document.getElementById('next0')],
combinedslides = slides1.concat(slides2), ready = 0;
for (var i = combinedslides.length - 1; i > -1; --i){
(function(i){
var im = new Image();
im.onload = function(){
++ready;
}
im.src = combinedslides[i][0];
})(i);
}
ctrls[0].onclick = function(){
iss[0].changeimg(false, 'nav');
iss[1].changeimg(false, 'nav');
};
ctrls[1].onclick = function(){
iss[0].gostop(this);
iss[1].gostop();
};
ctrls[2].onclick = function(){
iss[0].changeimg(true, 'nav');
iss[1].changeimg(true, 'nav');
};
setTimeout(function(){
if(ready !== combinedslides.length){
setTimeout(arguments.callee, 300);
return;
}
ctrls[1].value = 'Play';
ctrls[0].disabled = ctrls[1].disabled = ctrls[2].disabled = false;
iss[0].gostop(ctrls[1]);
iss[1].gostop();
}, 3000);
}
if (window.addEventListener){
window.addEventListener('load', augmentcontrols, false);
}
else if (window.attachEvent){
window.attachEvent('onload', augmentcontrols);
}
})();

</script>

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

</head>
<body>

<div>
<script type="text/javascript">new inter_slide(slides1)
document.getElementById('gostp0').value = 'Stop';
document.getElementById('prev0').disabled = document.getElementById('gostp0').disabled = document.getElementById('next0').disabled = true;</script>
</div>
<br>

<div>
<script type="text/javascript">new inter_slide(slides2)</script>
</div>

</body>
</html>

hansan
08-05-2010, 03:48 AM
YES it's working nicely jscheuer :) thank you! thank you very much!!
now there is no hesitation.

but i have found something. :D
if we use same weighted images for two slideshows(in here 8 iamges) there will not be any problem at all. the synchronization of the 2 slideshows will depend only on weighted of the images but not on the connection speed.

nice work jscheuer. you will hava a long life, because you hands are always fill with unlimited help. God bless you friend :)

jscheuer1
08-05-2010, 04:49 AM
You're welcome.

I'm not sure what you mean by weighted. If you mean their byte size - if the images are all of equal size, that will only help if that size is small or that if there is a delay, that it is the same delay for each slide show, which equal sized images won't always cause, but could. If they are the same images, that will help even more, because then they only have to load once.

Connection speed as well as server speed do matter.

If all of the images are around 5 to 30 kb, any reasonably fast connection would be fine without this last modification.

I also noticed, looking at these map images, that:


images/map1.jpg
images/map2.jpg
images/map3.jpg
images/map4.jpg

are really not JPEG format images as their extensions imply, they are really:


images/map1.jpg (PNG)
images/map2.jpg (GIF)
images/map3.jpg (BMP)
images/map4.jpg (GIF)

If you were to convert these all to either GIF or JPEG format, you could get by with less bytes, and this would help with the page load. The map3.jpg (really a BMP format image) is huge (212kb). Even the GIF format images (which are about a tenth that size could be optimized to 15 or even 10 kb each, they're about 20).

Even if you don't convert or optimize, it would be a good idea to give these files their true filenames:


map1.png
map2.gif
map3.bmp
map4.gif

But this would have to be done not only in the code, but on the server as well.

hansan
08-05-2010, 07:00 AM
hmmmmmm. that's very true.