PDA

View Full Version : 2 Motion Gallery Scroll in 1 page



Brillo
09-18-2006, 01:30 PM
Hi,

i love your script ;)
is there a way to have 2 scrolls
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm
in 1 page

I test it with motioncontainer+motioncontainer2+.....,
but i can't fix the probs:(

Thanks
Brillo

jscheuer1
09-18-2006, 06:38 PM
There are several ways to do this. Right now, the easiest method would be to have two separate pages. On one page have one gallery and a borderless iframe whose src attribute is the second page which has on it the second gallery.

Other options are to write a second version of the script with all of its function, variable and id names different - or to rewrite the script to be object oriented.

Brillo
09-19-2006, 09:27 AM
There are several ways to do this. Right now, the easiest method would be to have two separate pages. On one page have one gallery and a borderless iframe whose src attribute is the second page which has on it the second gallery.

Other options are to write a second version of the script with all of its function, variable and id names different - or to rewrite the script to be object oriented.

Hi,
yes, the first option is easy. But i like to use it in a php gallery.
And the script generate one page with thumbs in 2 rows.
The rows have the name row1 and row2.
Here i can use the different numbers for the CMotion Image Gallery.

With this step, i need option2 from your ways.
But => I can't write a new version :(
I test it 2 days with different variables (motioncontainer1+motioncontainer2... and also the other variables and functions with 1 and 2)
But the script work's not...

Help please !!

Kurt

jscheuer1
09-20-2006, 12:44 AM
OK, here is an object oriented version. It is a little different to set up than the original, as any OO version would have to be. But, the configuration is well documented. Use you browser's view source to get the demo page's code and download these two files:

motiongallery_oo.js (http://home.comcast.net/~jscheuer1/side/files/motiongallery_oo.js)
gallerystyle_oo.css (http://home.comcast.net/~jscheuer1/side/files/gallerystyle_oo.css)

Demo page:

http://home.comcast.net/~jscheuer1/side/files/cmotion_oo.htm

Notes: You must set up your image trains as arrays in the motiongallery_oo.js file. Just follow the examples. Also, be sure to read all configuration notes in all three files. In motiongallery_oo.js you don't have to read beyond this line:


////NO NEED TO EDIT BELOW THIS LINE////////////

As it can be confusing to anyone not familiar with scripting, this part:


/////////////////////////////////////////////////////////////////////////////////////////
/* Parameter Definitions:
/////////////////////////////////////////////////////////////////////////////////////////
* gallery_array_name - name of the array of the gallery's img train (object name, ex: gallery2)
* rest_area_size - size of the neutral area in the center of the gallery in pixels (integer, ex: 6)
* maxspeed - top speed of the gallery (integer)
* maxwidth - maximum width of the gallery in pixels (integer) must be less than the width of the image train
* startposition - 1 for left start, 0 for right, 2 for center (integer)
* width - width of the gallery in pixels(integer) or percent ('string' with % sign, ex: '75%')
* height - height of the gallery in pixels (integer)
* optional_centering - use [, 'c'] for centering, skip this parameter for no centering ('string')
*****************************************************************************************/

//new cmotiongallery(gallery_array_name, rest_area_size, maxspeed, maxwidth, startposition, width , height, optional_centering)

On the demo page (cmotion_oo.htm) does nothing. It's just instructions. These are the lines that initialize the galleries:


new cmotiongallery(gallery, 6, 7, 1000, 2, '50%', 225, 'c')

and:


new cmotiongallery(gallery2, 6, 7, 1000, 1, 500, 225)

Feel free to ask if you have any questions.

pitschkac
09-20-2006, 07:06 PM
John,

Thanks for the script. One last question. Can you direct me to the coding that determines the space between each gallery. I would like multiple galleries to generate a grid, with each gallery only being 25px in height. Currently the space between each gallery is quite large and I can't figure out the coding. Thanks in advance.

Chad

pitschkac
09-20-2006, 07:11 PM
All,

I figured it out. Sorry for the post, should have looked at html first. Thanks

Chad

pasolonet
02-15-2007, 10:46 PM
Sorry, but my english is veri bad, thanks.

why i have not scroll if me *.htm is equal of you *.htm and me 'gallerystyle_oo.css' is equal of you 'gallerystyle_oo.css'.

But me motiongallery_oo.js chace next lines


gallery[2]='<a href="ARMARENAS.JPG"><img src="ARMARENAS.JPG" border="1"></a>';
gallery[3]='<a href="Quienes.JPG"><img src="Quienes.JPG" border="1"></a>';
gallery[4]='<a href="ARMARENAS.JPG"><img src="ARMARENAS.JPG" border="1"></a>';
gallery[5]='<a href="Quienes.JPG"><img src="Quienes.JPG" border="1"></a>';
gallery[6]='<a href="ARMARENAS.JPG"><img src="ARMARENAS.JPG" border="1"></a>';
gallery[7]='<a href="Quienes.JPG"><img src="Quienes.JPG" border="1"></a>';
gallery[8]='<a href="ARMARENAS.JPG"><img src="ARMARENAS.JPG" border="1"></a>';

---

thank you.

eastboy301
06-24-2007, 04:25 PM
OK, here is an object oriented version. It is a little different to set up than the original, as any OO version would have to be. But, the configuration is well documented. Use you browser's view source to get the demo page's code and download these two files:

motiongallery_oo.js (http://home.comcast.net/~jscheuer1/side/files/motiongallery_oo.js)
gallerystyle_oo.css (http://home.comcast.net/~jscheuer1/side/files/gallerystyle_oo.css)

Demo page:

http://home.comcast.net/~jscheuer1/side/files/cmotion_oo.htm

Notes: You must set up your image trains as arrays in the motiongallery_oo.js file. Just follow the examples. Also, be sure to read all configuration notes in all three files. In motiongallery_oo.js you don't have to read beyond this line:


////NO NEED TO EDIT BELOW THIS LINE////////////

As it can be confusing to anyone not familiar with scripting, this part:


/////////////////////////////////////////////////////////////////////////////////////////
/* Parameter Definitions:
/////////////////////////////////////////////////////////////////////////////////////////
* gallery_array_name - name of the array of the gallery's img train (object name, ex: gallery2)
* rest_area_size - size of the neutral area in the center of the gallery in pixels (integer, ex: 6)
* maxspeed - top speed of the gallery (integer)
* maxwidth - maximum width of the gallery in pixels (integer) must be less than the width of the image train
* startposition - 1 for left start, 0 for right, 2 for center (integer)
* width - width of the gallery in pixels(integer) or percent ('string' with % sign, ex: '75%')
* height - height of the gallery in pixels (integer)
* optional_centering - use [, 'c'] for centering, skip this parameter for no centering ('string')
*****************************************************************************************/

//new cmotiongallery(gallery_array_name, rest_area_size, maxspeed, maxwidth, startposition, width , height, optional_centering)

On the demo page (cmotion_oo.htm) does nothing. It's just instructions. These are the lines that initialize the galleries:


new cmotiongallery(gallery, 6, 7, 1000, 2, '50%', 225, 'c')

and:


new cmotiongallery(gallery2, 6, 7, 1000, 1, 500, 225)

Feel free to ask if you have any questions.

Hey John, thanks for posting this script but I have a quick question. Is there anyway I can add a caption or "description" to each photo so that when a user clicks on the thumbnail and the new window opens, the description shows under the picture?

jscheuer1
06-24-2007, 04:36 PM
Where you have something like this:


gallery[0]='<a href="dynamicbook1.gif" onclick="return enlargeimage(this.href);"><img src="photo1.jpg" border="1"></a>';

Instead of a larger image as the href attribute, use a page. Then you can have whatever you like on that page - image(s), captions, other text, links, etc.

eastboy301
06-24-2007, 05:39 PM
Where you have something like this:


gallery[0]='<a href="dynamicbook1.gif" onclick="return enlargeimage(this.href);"><img src="photo1.jpg" border="1"></a>';

Instead of a larger image as the href attribute, use a page. Then you can have whatever you like on that page - image(s), captions, other text, links, etc.

yeah but wouldn't I have to make a seperate page for each picture. And I'm using 3 galleries all with over 50 pictures. so thats 150 pages I would have to make right?

jscheuer1
06-24-2007, 07:59 PM
http://www.dynamicdrive.com/forums/showthread.php?t=6715

and:

http://www.dynamicdrive.com/forums/showthread.php?p=53998

ripley_78
01-09-2008, 03:06 PM
Hi,

I'm having a similar problem with the motion gallery scripts:

Scripts: http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm

Basically the first time I set it up it worked fine. But then I tried to add it to pages in my website and although the gallery would come up it would'nt move. I have also tried adding another motion gallery to the page that works and although the original works the other doesn't:

Original working version plus unworking duplicate:
http://www.blackstonerovers.co.uk/Braesidecountryhouse/index_copy(1).htm

Adding to exisiting page: http://www.blackstonerovers.co.uk/Braesidecountryhouse/accomodation.htm

I have been able to start of with a blank page and get the script working but have never been able to get it working on any of my existing pages.

Any help would be greatly appreciated - it's driving me nuts!

Thanks

jscheuer1
01-09-2008, 03:47 PM
I think I may have given the wrong reference in my previous post. This thread contains information on and a link to multiple use cmotion code:

http://www.dynamicdrive.com/forums/showthread.php?p=53998

ripley_78
01-09-2008, 04:45 PM
Thanks for that John but my main problem is no matter what I do I can not get the motion gallery to scroll unless - I start totally from scratch with a blank page. Below is a page I have been working with.

http://www.blackstonerovers.co.uk/Braesidecountryhouse/accomodation_copy(1).htm

If you have time I'd really appreciate it if you could have a quick look at the code and see what I might be doing wrong.

Here is another page where I got the script working first and build the content around it and it works fine.

http://www.blackstonerovers.co.uk/Braesidecountryhouse/index_copy(2).htm

Many Thanks

jscheuer1
01-09-2008, 05:02 PM
You have an onload conflict. My multi-use script will solve that, as it has no onload event - even if you are only using it for one gallery on a page.

Your 'non-working' example works in Opera 9.24 which sees window.onload as different from an onload event in the body tag (all other browsers I am aware of see that as a conflict). This suggests that even it will work if you remove:


window.onload=fillup;

from the motiongallery.js file and add it to your body onload like so:


<body topmargin="0" marginwidth="0" marginheight="0" onload="fillup();FP_preloadImgs(/*url*/'buttonB.jpg', /*url*/'buttonC.jp . . .

One thing though, the many instances of:

/*url*/

in that statement will be seen as comments, most likely and at best. At worst, there is a slight chance that they may cause a problem.

ripley_78
01-09-2008, 08:20 PM
Many Thanks John,

That has solved the problem. Now working brilliantly.

Wahrulzhir
06-16-2008, 03:01 PM
Hi,

Just wondering is it possible to have a caption/text below each images? If so, how can I add one? Please let me know, thank you and great script.

Regards

jscheuer1
06-16-2008, 03:11 PM
Hi,

Just wondering is it possible to have a caption/text below each images? If so, how can I add one? Please let me know, thank you and great script.

Regards

This is an older thread. And there are at least two versions of the title script of this thread mentioned here, and other script code is involved.

Please start a new thread for a new question and follow the posting guidelines for a new thread.