PDA

View Full Version : conveyor belt slideshow



germane
12-02-2009, 08:05 PM
Can someone tell me how to combine the conveyor belt slide show with click on left and right and stop buttons that move the thumbnails(if 5 are showing to the next five) Thank you so much.
Germane

vwphillips
12-03-2009, 03:45 PM
<!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[*/
.H {
position:relative;overflow:hidden;left:60px;width:400px;height:60px;border:solid black 1px;float:left;
}

.V {
position:relative;overflow:hidden;width:100px;height:250px;border:solid black 1px;
}
/*]]>*/
</style>
<script type="text/javascript">
// Animate (28-November-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}

zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if ((this.mde!='left'&&this.mde!='top')&&this.data[0]<0) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>

<script type="text/javascript">
/*<![CDATA[*/
// by Vic Phillips (03-12-2009)
// http://www.vicsjavascripts.org.uk


function zxcPan(opts){
var slide=document.getElementById(opts.id);
if (slide){
this.obj=slide.parentNode;
slide.style.position='absolute';
var mde=typeof(opts.mode)=='string'?opts.mode:'H';
this.mde=mde.charAt(0).toUpperCase()=='V'?['top','left','height',1,'offsetHeight']:['left','top','width',0,'offsetWidth'];
var clds=slide.childNodes;
this.clds=[];
var s=typeof(opts.separation)=='number'?opts.separation:0;
for (var lft=0,z0=0;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
clds[z0].style.position='absolute';
clds[z0].style[this.mde[0]]=lft+'px';
clds[z0].style[this.mde[1]]='0px';
lft+=clds[z0][this.mde[4]]+s;
this.clds.push(clds[z0]);
}
}
slide.style[this.mde[2]]=lft+'px';
this.slide=[[slide,-lft,new zxcAnimate(this.mde[0],slide)]];
var nu=Math.max(Math.ceil(this.obj[this.mde[4]]/lft)+1,3);
for (var z1=0;z1<nu;z1++){
this.slide[z1+1]=[slide.cloneNode(true),lft*z1];
this.slide[z1+1][2]=new zxcAnimate(this.mde[0],this.slide[z1+1][0]);
this.obj.appendChild(this.slide[z1+1][0]);
}
this.lft=lft;
this.ud=typeof(opts.direction)=='number'?opts.direction>0?1:-1:1;
this.ms=10;
this.Next(0);
this.ms=typeof(opts.milliseconds)=='number'?opts.milliseconds:1000;
}
}

zxcPan.prototype.Next=function(nu,ud){
this.ud=typeof(ud)=='number'?ud>0?1:-1:this.ud;
this.inc=ud?this.inc:0;
var lft=this.clds[nu%this.clds.length].offsetLeft;
for (var lgth=this.slide.length,z0=0;z0<lgth;z0++){
this.slide[z0][1]+=lft*this.ud;
this.slide[z0][0].style.visibility='visible';
if ((this.ud<0&&this.slide[z0][1]<-this.lft*2)||(this.ud>0&&this.slide[z0][1]>this.lft*(lgth-2))){
this.slide[z0][0].style.visibility='hidden';
this.slide[z0][1]+=this.lft*lgth*(this.ud<0?1:-1);
}
this.slide[z0][2].animate(this.slide[z0][0].offsetLeft,this.slide[z0][1],this.ms,[0,this.lft]);
}
}


/*]]>*/
</script>

</head>

<body>
Mouseover the ends to pan
<div class="H" >
<div id="H1" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="100" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="100" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width="100" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" width="100" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif" width="100" height="50" />
</div>
</div>
<input type="button" name="" value="Next" onclick="S.Next(5,1);"/>
<input type="button" name="" value="Next" onclick="S.Next(5,-1);"/>
<br />
<script type="text/javascript">
/*<![CDATA[*/

var S=new zxcPan({
mode:'H', // the mode, H = horizontal, V = vertical. (string, default = H)
id:'H1', // the unique id name of the div to scroll. (string)
separation:5, // (optional) the separation between the div elements. (digits, default = 0)
direction:-1, // (optional) the initial direction, 1 or -1. (digits, default = 1)
milliseconds:500 // (optional) the duration of the maximum slide . digits, default = 1000)
});



</script>
</body>

</html>

germane
12-19-2009, 07:47 PM
Thank you for your help. On opening the script that you sent isn't moving.
Can you take a look at my link (I used your script) now theconveyor belt is moving but the buttons don't function. Also I would like to add a stop button. I don't need the conveyor belt to scroll on mouseover.
I really appreciate your help and thank you for the great script.
Here is my link:
http://www.webgermane.com/safety/safety1.html

Germane

jscheuer1
12-19-2009, 09:04 PM
Please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script(s) in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

You may want to use:

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

Which is not too hard to make up buttons for, or:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/jq_imagemotion.htm

Easier to make buttons for.

Both can be Cmotion like (mouse driven) or an ordinary scroller (with or without mouseover pause). The second can go vertical or horizontal. The buttons for either can be placed anywhere on the page and be made to look however you want. Both are continuous belts, no 'end of gallery'. The first may be set to a percent width like Cmotion can. Both may be used for one or more shows on a page. The Lightbox tie in for the second one is not required.

Any questions about either one, let me know.

germane
12-19-2009, 11:39 PM
Thankyou, I added a stop button for
http://home.comcast.net/~jscheuer1/s...magemotion.htm
but I don't understand how to add button prev and next that skip over 5 slides.
Is that possible?

germane
12-19-2009, 11:59 PM
A light bulb went off and I realized how to work with this script:
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

Maybe you can tell me the code for a prev and next button skip over 5 slides?

Thank so much.
Germane

germane
12-21-2009, 09:54 PM
1) Script Title: Text and Image Crawler

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

3) Describe problem:
I understand how to add a stop button, but can you please tell me how to add a previous and next button.
Thank you
Germane

germane
12-21-2009, 10:05 PM
Dear Vic,
Thank you for the script but the conveyor belt is not moving on opening. Can you tell me how to fix that. Also is it possible to add a stop button instead of hover stop.
I really appreciate your help.
Germane Tautz

jscheuer1
12-22-2009, 01:42 AM
A light bulb went off and I realized how to work with this script:
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

Maybe you can tell me the code for a prev and next button skip over 5 slides?

Thank so much.
Germane

There really is no next/previous or skip over x number of images in a continuous scroller.

Perhaps:

http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

would be more for you.

germane
12-22-2009, 02:11 AM
Thank you I tried that and it works. How can I make a manual stop button?

jscheuer1
12-22-2009, 04:00 AM
Thank you I tried that and it works. How can I make a manual stop button?

For Step Carousel Viewer v1.8 you can do that pretty easily. First setup your Carousel a little differently. Instead of, like:


stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:2, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

Do it like:


var mycarousel = {
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:2, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
};
stepcarousel.setup(mycarousel);

Then you can have a button:


<input type="button" onclick="stepcarousel.stopautostep(mycarousel);" value="Stop">

germane
12-22-2009, 04:00 PM
Thank you that's perfect. One more thing~ How can I make that stop button into a image?
I really appreciate your help. Germane Tautz

jscheuer1
12-22-2009, 05:22 PM
In the usual ways, here's one of them I feel is OK (there are tons of methods for this, many of which I think are fine):


<a href="javascript:stop();"
onclick="stepcarousel.stopautostep(mycarousel);return false;"><img
src="my_stop.gif" alt=""></a>

germane
12-22-2009, 06:03 PM
John, thank you so much, it all works great.
Have a Merry Christmas, Germane

shashirbabu
03-22-2010, 12:02 PM
can this be made like this as the sliding should stop for a while and then continue please help me out with this problem