PDA

View Full Version : Cmotion scroller help



freal0s
12-20-2008, 11:43 AM
hye guys,
i'm in the need of help here,

i was trying to put an gallery scroller using Cmotion script, http://dynamicdrive.com/dynamicindex4/cmotiongallery.htm . it works just fine, but my problem is, i want to put 2 scrollers in 1 page. it seems that only 1 scroller are working. any body could help me on this is much appreciated..

thanx you!!

jscheuer1
12-20-2008, 02:32 PM
In future, please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread.

For more than one cmotion on a page, you would need a multiple use version like:

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

Use your browser's 'view source' to get the code and also download and use the two resource files (right click and 'save as') -

The css:

http://home.comcast.net/~jscheuer1/side/files/gallerystyle_oo.css

The script:

http://home.comcast.net/~jscheuer1/side/files/motiongallery_oo.js

freal0s
12-20-2008, 02:40 PM
jscheuer1, thanx soooo much!!
ermm..but how i add the images? i mean not in the js file..i need to add the images inside the html not hardcoded inside the js file..thank you..

jscheuer1
12-20-2008, 02:53 PM
Well, they could be easily declared in a separate javascript on or linked to the page. But I suppose it would depend upon why. I'm imaging that you might want to use it with another script (like Lightbox, perhaps?) that needs to initialize its links for them to work with that script. If so, there may be (is, if Lightbox is the other script) an easy way to take care of that without putting the images on the page.

freal0s
12-20-2008, 03:14 PM
yes, i am thinking of doing it with 2 js file, but the problem is, i dunno which attribute to change inside the js file. was thinking using motiongallery.js and motiongallery2.js. and the div would call different IDs.

But i have to admit, my knowledge on javascript is not that good. i'm lost when i look at the js file, would u help me on changing the codes inside the 2nd js file so that 1st scroller would depend on motiongallery.js and the 2nd scroller depend on the motiongallery2.js.

thank you very much

jscheuer1
12-20-2008, 03:29 PM
That's not what I was talking about. Why do you need the images on the page?

freal0s
12-20-2008, 03:32 PM
how do i add the images at the html?, coz oo cmotion scripts add the images inside the js file..

freal0s
12-20-2008, 03:36 PM
it's like this,

on the page, i'm using a tab script for upcoming event and current event. I want to use the cmotion for displaying thumbnail pics of both of the events. so basicly, i'm using 2 cmotions inside one page. and to add the images, i have to insert the links using the divs and not hardcoded inside the js file.

jscheuer1
12-20-2008, 03:40 PM
What tab script? What links? You may use any script you like, it should be able to be worked out. Any links or events you need associated with the images in Cmotion can be placed in the js file. The only problem could be if the links need to be initialized by the tab script. But, if that happens onload, they will be on the page by that time anyway, so shouldn't be a problem.

freal0s
12-20-2008, 03:53 PM
function showTab(tabName, typeOfTab) {
if (typeOfTab==1)
{
var arrTable = new Array('step1', 'step2');
var arrButton = new Array('btnTabStep1', 'btnTabStep2');

for(var i=0; i<arrTable.length; i++) {
if(tabName == arrTable[i]) {
showHide(tabName, 'block');
document.getElementById(arrButton[i]).className = 'showActiveBtn1';
}
else {
showHide(arrTable[i], 'none');
document.getElementById(arrButton[i]).className = 'blurActiveBtn1';
}
}
}
else if (typeOfTab==2)
{
var arrTable = new Array('menu1', 'menu2');
//var arrButton = new Array('btnTabStep1', 'btnTabStep2', 'btnTabStep3', 'btnTabStep4', 'btnTabStep5', 'btnTabStep6');

for(var i=0; i<arrTable.length; i++) {
if(tabName == arrTable[i]) {
showHide(tabName, 'block');
//document.getElementById(arrButton[i]).className = 'showActiveBtn1';
}
else {
showHide(arrTable[i], 'none');
//document.getElementById(arrButton[i]).className = 'blurActiveBtn1';
}
}
}
else {
var arrTable = new Array('step1', 'step2');
var arrButton = new Array('btnTabStep1', 'btnTabStep2');

for(var i=0; i<arrTable.length; i++) {
if(tabName == arrTable[i]) {
showHide(tabName, 'block');
document.getElementById(arrButton[i]).className = 'showActiveBtn';
}
else {
showHide(arrTable[i], 'none');
document.getElementById(arrButton[i]).className = 'blurActiveBtn';
}
}
}
}

i'm using that script for the tabs..and


<a href="javascript:onClick=showTab('menu1', 2)">current</a>
<a href="javascript:onClick=showTab('menu2', 2)">upcoming</a>


<div id="menu1" style="display: block;"> *put the step 2 div codes here</div>
<div id="menu2" style="display: none;"> *put the step 2 div codes here</div>

for the image insertions

so, when i clicked on 'current' link, it wud show div menu1 which i inserted the img src codes for the images, and when i click 'upcoming', it wud show div menu2. the tab already worked, but the problem is the scrolling. the 1st scroll wont scroll because of the overwrite of the js file used by the 2nd scroll. what i was thinking was duplicating the js file to motiongallery2.js and change the div's ID to motioncontainer2, motiongallery2 and trueContainer2. and i'm supposed to change the motiongallery2.js too right? but i dunno which and what to rename

jscheuer1
12-20-2008, 04:15 PM
I don't see any linked images there, so it should be a piece of cake. The way the OO Cmotion works is that it writes the equivalent of:


<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer"><a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a> <a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a></nobr>

</div>
</div>

to your page, right where the on page call for the script, ex:


<script type="text/javascript">
new cmotiongallery(gallery2, 6, 7, 1000, 1, 500, 225)
</script>

is located. It does so as the page is loading, not onload. So it is the same as if you had hard coded it to your page.

The only difference is that unique id's are created and tracked for each gallery so that the galleries may work independently from each other. Its routines are Object Oriented, so may be reused by each gallery, requiring only one main script to run any galleries created by the on page call(s).

freal0s
12-20-2008, 05:42 PM
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer"><a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a> <a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a></nobr>

</div>
</div>

ok..but, with above script, i can manually put the images right? and below script, i have to put all the codes inside the js. the 'new cmotiongallery' called up the pre-coded images inside js right?..the way i want it is to insert
the above for displaying the images inside the tab divs (menu1 and menu2) instead of setting it up inside the js file. what if in the future i want to change the images? i'll have to open the js file right? it would be difficult if sumone else wants to add or change the picture, it would be easier if i can just delete or add the a href codes at inside the divs than adding up the codes inside the js.


<script type="text/javascript">
new cmotiongallery(gallery2, 6, 7, 1000, 1, 500, 225)
</script>

jscheuer1
12-20-2008, 05:57 PM
You can just put the call(s):


<script type="text/javascript">
new cmotiongallery(gallery2, 6, 7, 1000, 1, 500, 225)
</script>

inside the tab divisions. They will be there in their full glory once everything is parsed by the browser.

There is one potential problem though, the status divisions. Unless you absolutely need the end of gallery messages, don't use it. Otherwise we may need to make an adjustment in how it is added to the page.

To disable this feature, set (in the Cmotion script):


// Set message to show at end of gallery(s). Enter "" to disable message.
var endofgallerymsg='<span style="font-size: 11px;">End of Gallery</span>';


to:


// Set message to show at end of gallery(s). Enter "" to disable message.
var endofgallerymsg="";


This would also have been a problem in the original version, if it is one in the OO version.

freal0s
12-20-2008, 06:02 PM
sorry jscheuer1 for taking up ur time


<script type="text/javascript">
new cmotiongallery(gallery2, 6, 7, 1000, 1, 500, 225)
</script>

but using the above call, i still have to declare the images inside the js file..
i want to insert the images not by declaring it inside the js file but inside the divs, example:



<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer"><a href="url.html"><img src="pic01.jpeg" border=1></a><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a></nobr>

</div>
</div>

it wud be easier for me or sumone else who doesnt know any codings to insert the images via the divs rather than to declare the images inside the js file.

if i use the "new cmotiongallery(gallery2, 6, 7, 1000, 1, 500, 225)" ..then i wud have to declare all the images inside the js right?

jscheuer1
12-20-2008, 06:51 PM
Yes, you've got it. That's how it's done. The images should be declared in the script and the settings made in the on page call. That way the script takes care of it all for you. Otherwise you would have to configure the markup manually and still need to call the script a separate time for each gallery to initialize it.

I know this can be a little disorienting to someone unused to it, but it really isn't all that big a deal. Just dive right in, it will all work out.

If you have any problems with it once it is setup, just post a link to your page and I'll tell you how to fix it.

Just make sure that one regular Cmotion (the original single use version) works with one regular tab first though. If that won't work, this probably won't either, though it may have a better chance than the original because it is less likely to conflict with your tabs code.

freal0s
12-21-2008, 02:54 AM
that's the problem, i cannot make the images to be declared inside the js file, i'm using liferay for the CMS. So basicly i cannot add the images by declaring it inside the js file, it must be done inside the div, so the web users can add and remove images inside the div.

jscheuer1
12-21-2008, 04:50 PM
How do they add and remove images? Why have you waited this long to mention that? Anyways, I know nothing about liferay, since the images are a part of the HTML though, even with the OO script, depending upon how liferay works, it may still be fine.

I did look into a method that would allow you to put the images on the page with this script though. But this should not be used unless absolutely necessary. It may not work with liferay anyway though, because changing the images will change the dimensions of the image train. A fix may be able to be worked out for that *(see end). If too many images are removed though, the script will break regardless. It's not really the same script now, highly modified:

2353

Now, to make a gallery, put this sort of markup:


<div class="motioncontainer" id="motioncontainer0">
<div id="motiongallery0">

<nobr id="trueContainer0"><a href="dynamicbook1.gif" onclick="return enlargeimage(this.href);"><img src="photo1.jpg" border="1"></a> <a href="dynamicbook1.gif" onclick="return enlargeimage(this.href, 300, 300);"><img src="photo2.jpg" border="1"></a> <a href="http://www.dynamicdrive.com"><img src="photo3.jpg" border="1"></a> <a href="#" onclick="return false;"><img src="photo4.jpg" border="1"></a> <a href="#" onclick="return false;"><img src="photo5.jpg" border="1"></a> <a href="#" onclick="return false;"><img src="photo6.jpg" border="1"></a> <a href="#" onclick="return false;"><img src="photo7.jpg" border="1"></a> <a href="#" onclick="return false;"><img src="photo8.jpg" border="1"></a> <a href="#" onclick="return false;"><img src="photo9.jpg" border="1"></a></nobr>

</div>
</div>

Notice the 3 red 0's. Each gallery is designated by a number in this fashion. The first is 0, the next is 1, and so on, however many that you have. A small script must follow right after each gallery on the page, here's one with comments (green) that explains its usage:


<script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////////
/* Parameter Definitions:
/////////////////////////////////////////////////////////////////////////////////////////
* 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(rest_area_size, maxspeed, maxwidth, startposition, width , height, optional_centering)
new cmotiongallery(6, 7, 1000, 2, '50%', 225, 'c')
</script>

The comments need not be included.

The external css file remains the same.

*(refill fix)
To deal with a changing image train, run this function after each time the image train is updated (not required if the page reloads after every image train change):


cmotiongallery.refill = function(){
for (var i = cgals.length - 1; i > -1; --i)
cgals[i].fillup();
}

You may place that at the end of the main script. Call it like so:


cmotiongallery.refill();

when and if needed.

richcity
03-22-2009, 11:16 PM
First off thanks for this possible script,
Id love some help if this is the right thread,
Would like to know if it is possible to mask/protect the images on the scroller and or preload the images,I addd somesort of preloader script into the html. But im not sure if its working or not,
I was also wondering if there was any advantages in using cmotion2.js and gallerystyle2.css as opposed cmotion original with the original motiongallery.js and gallerystyle.css
I am a novice at this, and may have tons of text/code that is not necessary ,
Can anyone help me with cleaning this up for optimization?
Thanks any help if appreciated,
RIch
This is the link to the site www.kentbaker.com

jscheuer1
03-23-2009, 02:19 AM
Please start a new thread for a new question.