2 Cmotion Galleries in 1 page + opening a large image within the same page

[tijinou]

1) Script Title:
Cmotion Image Gallery

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

3) Describe problem:

I would like to combine this script used in this page : http://home.comcast.net/~jscheuer1/s...I_xbrowser.htm
with rthe script used in this page : http://home.comcast.net/~jscheuer1/s...cmotion_oo.htm
so that I can have 2 galleries in one page and a larger image for each gallery opening in the same page.

I have tried to mix both sources from both pages, but without success (my programming skills are limited).

I would appreciate if someone could help me.

Thank you

Roberto

[jscheuer1]

http://home.comcast.net/~jscheuer1/s...umb_III_oo.htm

[tijinou]

Hello John,

many thanks for the prompt and accurate reply (it is what I was looking for) and for the quality of your script.


Roberto

[tijinou]

Hello John again,

is there any simple way to have :
- a title (somethink like a tooltip or similar to the label coming when you are at the beguinning or at the end of the gallery) if the cursor is over the small images
- and a label or a title below the large image (without having to create it directly in the large image).
- the last large image instead of the first at the start up

Thanks in advance

Roberto

[ScrapperMom]

Dear John,

I am also looking to have two galleries on one page. I notice your source code references two external files - gallerystyle.oo.css and motiongallery_thumb_III_oo.js which are necessary to create this effect. Can you kindly please direct me to where I might find those files?

Thank you,
Genie Hawkins

[jscheuer1]

Dear John,

I am also looking to have two galleries on one page. I notice your source code references two external files - gallerystyle.oo.css and motiongallery_thumb_III_oo.js which are necessary to create this effect. Can you kindly please direct me to where I might find those files?

Thank you,
Genie Hawkins

Those are actually:

gallerystyle_oo.css

and:

motiongallery_thumb_III_oo.js

You can right click on the above links and use your browser's 'save as' feature to get them. They are on the server in the same directory as the demo page.

[jscheuer1]

Hello John again,

is there any simple way to have :
- a title (somethink like a tooltip or similar to the label coming when you are at the beguinning or at the end of the gallery) if the cursor is over the small images
- and a label or a title below the large image (without having to create it directly in the large image).
- the last large image instead of the first at the start up

Thanks in advance

Roberto

http://home.comcast.net/~jscheuer1/s...b_III_oo_d.htm

Notes: There is a new optional parameter for each array of images. I have only used it for the first array:

var dynimages=new Array()
dynimages.usespace=0;
dynimages.capid='cap1';
//SET IMAGE PATHS. Extend or contract array as needed
//"Thumnail for Gallery", "Large Image", "optional_link", "optional_target"
//link and target are for large image
dynimages[0]=["photo1_thumb.jpg", "photo1.jpg", "", "", "Kissing Fools", "The Kiss"] //plain image syntax
dynimages[1]=["photo2_thumb.j . . .

This must be set to a unique name. Without this, the updated script (motiongallery_thumb_III_oo_d.js) will act just as it did before. With it, you now have the option of adding two entires for each main array line. I have only added these for the first array line in the first array:

dynimages[0]=["photo1_thumb.jpg", "photo1.jpg", "", "", "Kissing Fools", "The Kiss"]

The first will be a title attribute for the small image in the gallery. The browser will give it as a 'tool tip' when mousing over the small image (in this case the first image in the first gallery). The second is a description and will show below the the larger image when it is clicked. To get all the images in a gallery to use these, they must be furnished for each line in the main array for that gallery.

[tijinou]

Hello John,

thanks again : I implemented the new script in my wife's site and thanks to you, it looks pretty good!
If you want to have a look, here is the test page :
http://www.leniamajor.com/essai.htm

By the way, if you open the page, the first (large) image is always showed ; is it possible to show the last image instead? (if I bother you with my questions, let me know ;-)

Have a great day,
Roberto

[jscheuer1]

First off, if you don't want the 'endofgallerymsg', it should be set to:

var endofgallerymsg="";

not:

var endofgallerymsg='<span style="font-size: 11px;"';

You don't need this stuff unless it is working for you (try taking it out, it will change things, but still look good):

<style type="text/css">

/* Styles Here are for the Demo Page's Layout Only */

table {
border-collapse:collapse;
float:left;
margin-left:2em;
margin-bottom:3em;
}
td {
padding:0;
margin:0;
}

/* End Demo Page's Layout Styles*/

</style>

And, you should style the two cap divisions so that they don't change size on you. Something like (in your existing style section):

#cap1, #cap2 {
height:1.5em;
}

Now, to display the last image and caption first, change (shown in red):

function displayarea(theimages, fadewidth, fadeheight, borderwidth){
if(!displayarea.fadearray){
displayarea.fadearray=new Array() //array to cache displayarea instances
displayarea.fadeclear=new Array() //array to cache corresponding clearinterval pointers
}
this.flag=1
this.capid=theimages.capid;
this.dom=(document.getElementById) //modern dom browsers
this.iebrowser=document.all
this.pausecheck=0
this.degree=10 //initial opacity degree (10%)
this.curimageindex=theimages.length-1;
this.nextimageindex=0
displayarea.fadearray[disp . . .

And, a little farther down:

if(this.capid){
document.write('<div id="'+this.capid+'">'+(theimages[this.curimageindex][5]? theimages[this.curimageindex][5] : '&nbsp;')+'</div>');
this.caparea=document.getElementById(this.capid);
}

[tijinou]

Hi John,

your help is really appreciated.

I did all what you wrote, and everything looks perfect.

Big thank you!

Roberto