PDA

View Full Version : CMotion Gallery more than once on a page?



lilpete
07-13-2010, 02:20 PM
1) Script Title: CMotion Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm

3) Describe problem:
I have implemented this script here: http://www.test.steptoes.co.uk
It is on the first horizontal block of shoes.

It works, but it only works once. I would like it to work on every tab.
Is there any way of editing this script to work for more then one instance on a page?
Or any other workaround that can be thought of...

Thanks for your time and help.

azoomer
07-13-2010, 02:54 PM
check out this post

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

and this demo

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

lilpete
07-13-2010, 03:22 PM
Thanks azoomer, Ive had a look, but I am not sure that will work...
the JavaScript has the image train in it, but this would then have to be changed manually..
There is no way for me to dynamically change the script while the page loads..

Is there another way? maybe duplicate the parts of the script that the ID's call on.. so each one of my tabs refers to its own bit of JS?
So the ID's look like this:-
Tab1:
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:relative;left:0;top:0;white-space: nowrap;">
<nobr id="trueContainer">
</div></div></nobr>

Tab2:
<div id="motioncontainer2" style="position:relative;overflow:hidden;">
<div id="motiongallery2" style="position:relative;left:0;top:0;white-space: nowrap;">
<nobr id="trueContainer2">
</div></div></nobr>

I'm not that good at editing JavaScript... so I would not know what to duplicate in the script...

azoomer
07-13-2010, 03:39 PM
I see what you mean and I don't understand javascript to much myself so it's difficult to give good advice on this. If it was my page I would try to make a local test page with the tab script and the object oriented Cmotion script to see if i could get i working with several galleries in multiple tabs. It seems possible to me but i'm not sure in any way.

jscheuer1
07-13-2010, 04:48 PM
Why would you have to dynamically change the script while the page loads? If you could, how would you do so? Would you use server side code or javascript?

Either way, it can be worked out to change the image train while the page loads.

But you don't appear to want to change the images while the page loads. What it looks like to me is that you want a set of images for each tab loaded and ready for when any given tab is selected by the user.

This can also be done. But there would be a lot of images to load. They're small images as far as their dimensions go, but their byte sizes could and should be reduced via optimization.

Another problem is that, regardless of which script you use, the tab contents that are not initially seen are display: none. Neither script can initialize properly if one of its parent elements is display none.

We could edit the tab script to use visibility hidden and absolute positioning instead, then the galleries that are not seen could be initialized even when they're not seen.

Before I go into specifics though, I need to know what exactly you want to do.

lilpete
07-14-2010, 09:51 AM
Thank you very much for your time and attention,

I made the comment of not being able to change the script dynamically because the option given to me for using the script more then once on a page was to put the image trains into the script, but this wont be suitable for the method I use to dynamically create the page.

I think I may have cracked it though.. I wrapped all the tabs in the div that trigger the script, I know have scrolling occurring on all of the tabs on that page. :) Happy Days.

<div style="border:1px solid gray; width:800px; margin-bottom: 2px; padding: 2px;">

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

<div id="tab1" class="tabcontent"><nobr id="trueContainer">
[_TOPINDEX type=shoes_]</nobr></div>

<div id="tab2" class="tabcontent"><nobr id="trueContainer">
[_TOPINDEX type=boots_]</nobr></div>

<div id="tab3" class="tabcontent"><nobr id="trueContainer">
[_TOPINDEX type=sandals_]</nobr></div>

<div id="tab4" class="tabcontent"><nobr id="trueContainer">
[_TOPINDEX type=flip-flops_]</nobr></div>

<div id="tab5" class="tabcontent">
[_TOPINDEX type=clogs_]</div>

<div id="tab6" class="tabcontent">
[_TOPINDEX type=sunglasses_]</div>

<div id="tab7" class="tabcontent">
[_TOPINDEX type=watches_]</div>

<div id="tab8" class="tabcontent">
[_TOPINDEX type=headphones_]</div>

<div id="tab9" class="tabcontent">
Sale Items<br /></div>

<div id="tab10" class="tabcontent">
Whats New<br /></div>

</div>
</div>
</div>


I have also optimised the image sizes to be as big as they need to be, I was getting to that though, this site has a long way to go yet.

The problem I have now I think relates to the tab script using display:none as you suggested, if you refresh the page on any tab but the default tab (shoes) it will not work.
Could you help me change the tab script to work with visibilty: hidden to get round this glitch, if you think thats the right way to go.

Also its not as smooth in IE8 or Firefox, it is quite glitchy on those browsers I have found.
Chrome is what I am designing in and it works really well in that browser.

jscheuer1
07-14-2010, 06:34 PM
I may have been wrong about dynamically populating with the more modular script. What language is:



[_TOPINDEX type=shoes_]

? I'm guessing it might be ssi, is it?

But that same convention could probably be used either in the external script, or right on the page to create the various image trains/arrays. Yes that part of the external script can go on the page if it has to.

The situation you have now is one where, for some reason even browsers that should throw an error for scripting purposes on there being multiple scripted elements with the same id (trueContainer), do not.

As a result, in all browsers (many would do this anyway) the width of the train is only being computed for the first one (Shoes), and only if it's displayed on page load.

This causes the Flip Flops train (which is shorter than Shoes) to have blank space added at the end, and Boots (which is longer than Shoes) never being able to reach the white boots at its end.

If Shoes isn't displayed on page load, the browser still picks it to get the width. But since it's display none, the width is calculated as 0. So nothing to do when the mouse moves over the triggering division (motioncontainer).

Solving that problem will not fix the problem about the different length trains. But using visibility hidden and position absolute in place of display none in the tab script (reverting it to position static and visibility visible in place of display block to show a tab), should at least allow the browser to calculate the width on Shoes even when it's not seen.

To get the trains to each be of the proper length, you would need to also use the more modular script, integrating it somehow into your language that uses:


[_TOPINDEX type=shoes_]

So again, what is it? How exactly does it work? Does it require that the page it is on have a certain extension? Like in PHP, the pages need to be like:

index.php

External scripts can be like:

motiongallery.php

and the server will know to replace tokens on the page or in the script with either other files on the server, or server side variables established earlier.

Also, what does type=shoes point to? Is it an ordinary HTML file, or is it a server side script that pulls images from a folder?

lilpete
07-15-2010, 09:24 AM
Hi,
it is Ginas, its home made. :D It stands for Ginas Is Not A Shop.

I didnt make it, it was a man that lives in the woods..

It is driven by mySQL, it does need a special extension, so every page on our website is a ghtml page
So TOPINDEX refers to a database entry with a load of HTML inside,
The 'type=shoes' puts the word shoes into the SQL so the same bit of code (TOPINDEX) can be used over again for each index.
So, whereever you see [_in type_] Ginas will replace this with the word shoes, or whatever I put as type=""

[_db sql="SELECT DISTINCT `[_in field_]` FROM `teststeptoescouk_data_[_in table_]` WHERE `stock`[_if [_in type_]_] AND `Type`='[_in type_]'[_/if_];"_]
[_insert topindexitem field=[_in field_] value="[_own [_in field_]_]" imageloc=[_in imageloc_]_]
[_/db_]

So the way I see it I could use Ginas to populate the list of images for the script on page using the example azoomer gave me in the first instance some how, then the script and image trains will all function correctly?

Correct me if Im wrong, but I think my question should be how do I dynamically populate this list of images to work with the script allowing multiple galleries to a page?

Thanks for your time, and sorry for confusing you with my outlandish code! :P

vwphillips
07-15-2010, 02:05 PM
this seems to be going off topic

so


more then one instance on a page?

as this would be difficult



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#tstH {
position:absolute;overflow:hidden;left:250px;top:150px;width:570px;height:100px;background-Color:#FFCC66;border:solid #FF3333 1px;
}

.slideH {
position:absolute;left:0px;top:10px;width:1300px;
}

.slideH IMG{
width:100px;height:75px;margin-Left:10px;
}


.buttons {
position:absolute;;left:440px;top:270px;
}

.buttons INPUT{
width:100px;background-Color:#FFCC66;
}

#tstV {
position:absolute;overflow:hidden;left:80px;top:20px;width:120px;height:360px;background-Color:#FFCC66;border:solid #FF3333 1px;
}

.slideV {
position:absolute;left:10px;top:0px;
}

.slideV IMG{
width:100px;height:75px;margin-Top:10px;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Pan (15-July-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk


// **** Functional Code- NO NEED to Change

function zxcPan(o){
this.mde=o.Mode.charAt(0).toUpperCase()=='V'?['top','height',1,'offsetTop','offsetHeight']:['left','width',0,'offsetLeft','offsetWidth'];
this.p=document.getElementById(o.ID);
var slide=this.p.getElementsByTagName('DIV')[0];
slide.style[this.mde[1]]='100000px';
for (var clds=slide.childNodes,fst,lst,z0=0;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
if (!fst){
fst=clds[z0];
}
lst=clds[z0];
}
}
this.slide=slide;
this.run=true;
this.min=-lst[this.mde[3]]-lst[this.mde[4]]+this.p[this.mde[4]];
var pan=typeof(o.Distance)=='number'?o.Distance:100;
this.addevt(this.p,'mousemove','move');
this.addevt(this.p,'mouseout','Pause');
this.ends=[pan,this.sv(this.p,this.mde[1])-pan];
this.rev=typeof(o.ReverseEnds)=='boolean'&&o.ReverseEnds?-1:1;
this.maxspd=o.MaxSpeed||5;
}


zxcPan.prototype={

Pan:function(nu){
this.inc=typeof(nu)=='number'?nu:this.maxspd/2;
if (this.run){
this.scroll();
}
},

Pause:function(){
var e=window.event?window.event:arguments.callee?arguments.callee.caller.arguments[0]:false;
if (e&&e.type=='mouseout'){
var obj=e.relatedTarget||e.toElement;
if (obj){
while (obj.parentNode){
if (obj==this.p){
return false;
}
obj=obj.parentNode;
}
}
}
this.run=true;
clearTimeout(this.to);
},

move:function(p,e){
var x=this.mse(e)[this.mde[2]]-this.pos(this.p)[this.mde[2]];
this.inc=this.maxspd*(x<this.ends[0]?1-x/this.ends[0]:x>this.ends[1]?(x-this.ends[1])/this.ends[0]*-1:0)*this.rev;
if (this.run){
this.scroll();
}
},

scroll:function(){
clearTimeout(this.to)
this.run=false;
this.slide.style[this.mde[0]]=Math.max(Math.min(this.sv(this.slide,this.mde[0])+Math.ceil(this.inc),0),this.min)+'px';
var oop=this;
this.to=setTimeout(function(){ oop.scroll(); },50);
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},

mse:function(e){
if (document.all) return [e.clientX+this.docs()[0],e.clientY+this.docs()[1]];
return [e.pageX,e.pageY];
},

docs:function(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},

sv:function(obj,par){
if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
}

}



/*]]>*/
</script>

</head>

<body>
<div id="tstH" >
<div class="slideH" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt13.jpg" alt="Egypt" />
</div>
</div>

<div id="tstV" >
<div class="slideV" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt13.jpg" alt="Egypt" />
</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/

C=new zxcPan({
ID:'tstH', // the unique ID name of the slide parent DIV element. (string)
Mode:'Horizontal', // (optional) the mode, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
Distance:250, // (optional) the distance from the ends to pan. (digits, default = 100)
MaxSpeed:10, // (optional) the maximum speed to pan. (digits, default = 5)
ReverseEnds:false // (optional) reverse the ends mouseover pan direction. (boolean, default = false)
});


new zxcPan({
ID:'tstV', // the unique ID name of the slide parent DIV element. (string)
Mode:'Vertical', // (optional) the mode, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
Distance:150, // (optional) the distance from the ends to pan. (digits, default = 100)
MaxSpeed:10 // (optional) the maximum speed to pan. (digits, default = 5)
});

/*]]>*/
</script></body>

</html>

or

http://www.vicsjavascripts.org.uk/PanCarousel/PanCarousel.htm

jscheuer1
07-15-2010, 02:27 PM
as this would be difficult

Yes, I suppose it would be. This script:

http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

Can also do that horizontally, which is what's required here.

Either way, they're both continuous scrollers which can be controlled by mouseover. Either script would work here though if lilpete is OK with continuous scrolling action controlled by the mouse.

But if lilpete wants to stick with the current type scroller (one which reaches an end at either side), he could probably adapt this Ginas to output javascript arrays. All it does is output data to fields. All you really need is:


imageloc=[_in imageloc_]

outputting to something like:


gallery[0]='<img src="[_imageloc_]" border="1">';


Can Ginas increment a number or count records and use that number in some kind of looping output? Even if it cannot, a javascript array can be constructed without the numbers. All you really need is the src attribute for the images and a template to dump them into. I can probably come up with the template if I know a little more how the code from your post actually makes an image tag.

lilpete
07-15-2010, 04:28 PM
Thanks for all your time and efforts on this, I think you have sussed vwphillips, looks like a nice bit of code you have put up there, I can use that with Ginas to get to what I am trying to achieve.
Ginas can indeed count records, or anything for that matter,
it can also dynamically create those arrays from the database.

I don't mind the scroller repeating, (going round in circles), that would function quite nicely for selling items I think, back and forward can get tiresom...

As for Ginas, it comes from this guy:- http://www.merlinz.co.uk/
Good friend of mine.. And I could tell you more about how Ginas works, but then I would have to kill you! :P - jokes.
Its all open source, its a good little system.

Thanks again, I will post up my results when it is complete.