Swiss Army Slideshow and CMotion Gallery in combination

[Marco]

1) Script Title: Swiss Army Image Slideshow,
CMotion Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...army/index.htm
http://www.dynamicdrive.com/dynamici...iongallery.htm

3) Describe problem:
As a photographer I always keep an eye on slideshows and image sliders.
I use the CMotion Image Gallery script by jscheuer1 for presenting smaller images for preview.
Is there any chance to combine Cmotion with Swiss Army Image Slideshow and jump to a certain, pre-selected larger image in the slideshow, that opens in a new window?
How it should work practically at the end can be seen on my website. Now I work with single html pages for each larger image linked in a chain by clicking elsewhere on screen (no buttons in this case). Using Swiss Army slideshow script could make it much more comfortable for me to customize, adding new images with different formats for example.

It would be fantastic if somebody could help me bring these two great scripts in combination.

Thank you for support in advance and best greetings
Marco

[jscheuer1]

I believe this can be done fairly easily. If I understand you correctly, you want the HTML page that the user is brought to when clicking upon an image in the Cmotion gallery to be a Swiss Army script page containing all of the larger images that correspond to the images in the Cmotion gallery. The only twist being that depending upon which image was clicked upon, that image should be the one that Swiss Army starts with. Additionally all of the other larger images would then be available in the same order that their respective thumbnails appear in Cmotion using the next and previous buttons of Swiss Army.

If I've got that right, there are two approaches that come to mind:

1. ) Use Swiss Army's jump to function to jump to a particular image, based upon information passed in a query string of the URL to the Swiss Army page.

2. ) Simply reorder the array used on the Swiss Army page based upon information passed in a query string of the URL to the Swiss Army page.

Either method could work, the first would require altering how the jump to property is manifested (removing its visibility), unless it would be OK to have users able to jump to an image by number once on the Swiss Army page.

Either method would require adding a little code to read the query string and either a way to add the query string automatically to the link to the Swiss Army page, or hard coding the query string in each link to the Swiss Army page. There could also be other implications in these two approaches that aren't apparent to me now. Before we try sorting that out (which we may have to do by actually trying one or the other or both of these approaches), let me know if I've got the broad strokes of what you are trying to do right, and whether or not you'd like the jump to by image number feature active on the Swiss Army page.

There is third way. Just have a separate Swiss Army page for each image from Cmotion.

[Marco]

Dear John,

Thank you for the quick reply. You describe exactly the way how it should work. Solution-number two I consider the most efficient and cleanest way to do this. I thought about that too but have no programming skills and don´t know how to pass an array / query string from Cmotion to Swiss Army Slideshow. For a friendly usage I hope that no cookies are needed to do this.
Maybe the implemented code for the "jump to" function can be used also but no extra buttons should appear in the slideshow. In my case I use the Swiss Army script in a stripped down version (no automatic start or sliding, no jump to).
Separate Swiss Army pages (third way) is not so attractive to me because that is very close to that what I already have with single html page for each large image.
Jumping from a sliding preview, like Cmotion or Conveyor Belt slideshow, to a corresponding image in Swiss Army by using <a href="" onclick="NewWindow"> function would be a very powerful extension.
What do you think about that? I can not figure out what exactly is needed, but I hope that the idea is attractive to others too so that it can be realized with the help of the Dynamic Drive Forum.

Kind regards,
Marco

[jscheuer1]

There is an even easier fourth method that would be better for what you are doing because you would want any counter values to remain in the same order. Changing the array wouldn't allow that, and using jumper would mean that the slideshow would have to load first with the 'wrong image' and then switch.

First we edit one line in the swissarmy.js file's inter_slide() function:

function inter_slide(){
if(!document.images||arguments.length==0)
return;
var imgs=arguments[0];
var width=null, height=null, delay=null;
if(arguments.length==2)
delay=arguments[1];
else if(arguments.length==3||arguments.length==4)
width=arguments[1], height=arguments[2], delay=arguments[3]? arguments[3] : null;
this.dom=(document.getElementById) //modern dom browsers
this.da=document.all
this.delay=imgs.delay? imgs.delay : delay? delay : 3000+iss.length*750;
this.nextimgidx=imgs.nextimgidx? imgs.nextimgidx : 0;
iss[this.issid=iss.length]=this;
this.imgs=imgs;
if (imgs.random)
this.imgs.sort(function() {return 0.5 - Math.ra . . .

Then, on your Swiss Army page we add this code after the array declartion:

var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own. 
slides2[0] = ["../../side/files/photo6.jpg", "Crucifix"];
slides2[1] = ["../../side/files/photo7.jpg", "Alter Boys"];
slides2[2] = ["../../side/files/photo8.jpg", "Young Pan"];
slides2[3] = ["../../side/files/photo9_thumb.jpg", "Mona Lisa"];
//optional properties for these images:
slides2.desc_pref . . .
 . . .
slides2.border_color='lightblue'; //set border color for images

;(function(){
var ar = slides2, get = function(n) {
if(!n||typeof n!='string') return null;
var r=new RegExp('[?&;]'+n+'=([^&;#]*)'), m=location.search;
return (m=r.exec(m))? unescape(m[1]) : null;
}
if(get('picnum')&&!isNaN(get('picnum')-0))
ar.nextimgidx = get('picnum')-0;
})();

The red slides2 is the name of the array.

Once you have all that - say your page with Swiss Army on it is called 'swiss.htm', then you may link to it like so:

<a href="swiss.htm?picnum=1">image tag or link text</a>

The red 1 corresponds to:

slides2[1] = ["../../side/files/photo7.jpg", "Alter Boys"];

and the slideshow will start with that slide. You can use any number from the array. The show will start with that slide and will still be in order.

Now, if you are using code to open a new window, you can just use the href from the example link as the URL value for the code that opens the new window. From your example and trying to keep to the numbering system you are currently using on your swisstest page (though I'm not wild about everything you are doing to open the new window, or even about opening a new window for this, or about the fact that the numbering order seems counterintuitive):

<a href="swisstest.htm?picnum=4" onclick="NewWindow(this.href,'imagename','2048','1536','no','');return false" onfocus="this.blur()"><img src="img09.jpg"></a>

[Marco]

Dear John,

Absolutely fantastic! This little code looks weird to me but works so fine.
It is easy to customize and a great extension for the Swiss Army Slideshow.
The reason for counterintuitive numbering was caused by the difficulty to start with the latest photographs. Customizing the single html pages was a little easier that way. With the Swiss Army Slideshow I returned to continuous numbering.
The latest version can be seen on: http://www.bildwerk-54.com/pc/screen...s/slider_d.htm

Thank you very much John for the way you are giving me support here on Dynamic Drive.
Kind regards,
Marco

[maykel]

Hello,

I also have the swiss slideshow on my page. But the main problem is the size of the pictures. I cant automaticly resize them is it possible that you ccan help me? Now he only sets the size i fill in in the newline

[Marco]

Hello maykel,

I´m not quite sure if I can help. My experience with resizing images automatically is in general that you loose quality - even if you downsize it will create pixelsteps. If you have not too many pictures I think it is better to scale them to the right dimension before.
According to the Style Hooks for Swiss Army Slideshow, pictures appear in
#canvas$_0 - one of the two divisions that holds a table that holds the images.
#canvas$_1 - the other of the two divisions that holds a table that holds the images.
So I guess it must be possible to resize automaticly by setting width and hight 100% or "auto" in the javascript file (canvasbase style).
But I havn´t prooved it.

Marco