Slide Show Code

[roundpeg]

Has anybody out there built a slide show component. I don't want to recreate the wheel unless I have to. Please help!

[antun]

Hey roundpeg

Here's a quick example:


<canvas title="A simple slideshow">

<!-- A slide element -->
<class name="slide" width="150" height="100">
<method event="oninit">
this.setRight();
</method>

<method name="setLeft">
this.setVisible( false );
this.setX( 0 );
</method>

<method name="setRight">
this.setVisible( false );
this.setX( this.immediateparent.width - this.width );
</method>

<method name="toCenter">
this.setVisible( true );
var centerXPos = ( this.immediateparent.width / 2 )
- ( this.width/2 );
this.animate( 'x', centerXPos, 1000 );
</method>

<method name="toRight">
this.setVisible( true );
this.rightXPos = this.immediateparent.width - this.width;
this.setDelegate();
this.animate( 'x', this.rightXPos, 1000 );
</method>

<!-- It's necessary to set a delegate to hide the slide because
otherwise the setVisible(false) will fire immidiately after
the animation starts (LZX doesn't pause while the animation
finishes). -->
<method name="setDelegate" args="xVal">
this.xdel = new LzDelegate( this, 'hideMe' );
this.xdel.register( this, 'onx' )
</method>

<method name="hideMe">
if ( this.x == this.rightXPos ) {
this.setVisible( false );
}
</method>
</class>

<simplelayout />

<!-- Grey box that contains all the slides -->
<view id="container" width="parent.width"
bgcolor="#e5e5e5" height="100">
<attribute name="activeSlide" type="number" value="0" />
<method event="oninit">
var currentSlide = this.subviews[this.activeSlide];
currentSlide.toCenter();
</method>
<!-- Lots of colored slides -->
<slide bgcolor="0xff0000" />
<slide bgcolor="0x00ff00" />
<slide bgcolor="0x0000ff" />
<slide bgcolor="0xff00ff" />
<slide bgcolor="0xee3366" />
<slide bgcolor="0x3366ee" />
<slide bgcolor="0x66ee33" />
<slide bgcolor="0xff0000" />
<slide bgcolor="0x00ff00" />
<slide bgcolor="0x0000ff" />
<slide bgcolor="0xff00ff" />
<slide bgcolor="0xee3366" />
<slide bgcolor="0x3366ee" />
<slide bgcolor="0x66ee33" />
</view>

<view name="controls" width="container.width">
<button align="right">Next
<method event="onclick">
var currentSlide = container.subviews[container.activeSlide];
currentSlide.toRight();
container.setAttribute( 'activeSlide',
container.activeSlide+1 );
var currentSlide = container.subviews[container.activeSlide];
currentSlide.setLeft();
currentSlide.toCenter();
</method>
</button>
</view>

</canvas>


Take care,

Antun

[roundpeg]

Antun,

I have been trying to do something a little more complicated than the example that you supplied and I have run into a block wall for the time being and I was wondering if you can take a look at the code below and see if I am getting close or not. I am tying to have a slide show that will start and then allow me to stop it and also move from frame to frame.


<canvas>
<script>
/*
Interactive Image slideshow with text description
*/
g_fPlayMode = 0;
g_iimg = -1;
g_imax = 0;
g_ImageTable = new Array();

function ChangeImage(fFwd)
{
if (fFwd)
{
if (++g_iimg==g_imax)
g_iimg=0;
}
else
{
if (g_iimg==0)
g_iimg=g_imax;
g_iimg--;
}
Update();
}

function getobject(obj){
if (document.getElementById)
return document.getElementById(obj)
else if (document.all)
return document.all[obj]
}

function Update(){
getobject("_Ath_Slide").src = g_ImageTable[g_iimg][0];
getobject("_Ath_FileName").innerHTML = g_ImageTable[g_iimg][1];
getobject("_Ath_Img_X").innerHTML = g_iimg + 1;
getobject("_Ath_Img_N").innerHTML = g_imax;
}


function Play()
{
g_fPlayMode = !g_fPlayMode;
if (g_fPlayMode)
{
getobject("btnPrev").disabled = getobject("btnNext").disabled = true;
Next();
}
else
{
getobject("btnPrev").disabled = getobject("btnNext").disabled = false;

}
}
function OnImgLoad()
{
if (g_fPlayMode)
window.setTimeout("Tick()", g_dwTimeOutSec*1000);
}
function Tick()
{
if (g_fPlayMode)
Next();
}
function Prev()
{
ChangeImage(false);
}
function Next()
{
ChangeImage(true);
}


////configure below variables/////////////////////////////

//configure the below images and description to your own.
g_ImageTable[g_imax++] = new Array ("1.gif", "1");
g_ImageTable[g_imax++] = new Array ("2.gif", "2");
g_ImageTable[g_imax++] = new Array ("3.gif", "3");
g_ImageTable[g_imax++] = new Array ("4.gif", "4");
g_ImageTable[g_imax++] = new Array ("5.gif", "5");
//extend the above list as desired
g_dwTimeOutSec=2

////End configuration/////////////////////////////

if (document.getElementById||document.all)
window.onload=Play
</script>
<button name="btnPrev" label="Previous" onclick="Prev();" /><button name="btnPlay" label="Play - Stop" onclick="Play()" /> <button name="btnNext" label="Next" onclick="Next();" />

<view name="_Ath_Slide" resource="_Ath_Slide" onload="OnImgLoad()" />


</canvas>

[antun]

Hey roundpeg

Is there any chance you could edit your post and re-paste the code in between code tags (see what the # button in the toolbar does when you're editing), or read here:

http://www.laszlosystems.com/developers/community/forums/misc.php?action=bbcode#buttons

The forums strip all tab stops if they're not in [ code ]...[ /code ] tags, you see, and it's impossible to read the code without whitespace.

-Antun

[roundpeg]

I hope adding the <code></code> helped. Please let me know if there is something that is unclear.

[antun]

No - you have to use square brackets ([ and ]) instead of pointy ones.

-Antun

[roundpeg]

Lets try that now. See I learn. It only takes three times. I guess that is why they say the third time is the charm.

[antun]

You got the tags right, but did you re-paste the code?

The thing is that the forum software strips out all tabs unless they're between the code tags, so they most likely got stripped out the first time, and changing the <code> to [code] later won't help at all.

Alternatively just attach the .lzx file to a post.

-Antun

[antun]

Hey roundpeg

I had a look at the code as best I could (it would still really help if you repasted it so the whitespace remained intact), and there are a couple of things that I noticed straight away:

[list=1]
You're trying to use the document object
It's all in <script> tags
[/list=1]

First off, the document object doesn't exist in LZX. That's an object that is present in browser JavaScript. It's not part of ECMAScript at all. This is quite a common mistake people make, as Java/ECMAScript today is virtually synonymous with the application of JavaScript that you get in Browsers. So you can't use stuff like:


document.getElementById(obj)


To get an pointer to an object you've assigned an id in LZX, just refer to it by name:


<view id="mySpecialView" />

// then later, in script:
var myPointer = mySpecialView;


So your getobject function is unnecessary.

I also see you're trying to access the window object. Again, that's a browser-specific object. That means you can't do this:

window.onload=Play

As for the <script> tags, they're only there as a convenience in LZX. You don't put all processing instructions in script tags at the root level like you do in HTML. Instead you create views that have methods that determine their behavior, something like:


<canvas debug="true">
<view name="scrollingView" bgcolor="red" width="100" height="75"
x="20" y="20">
<method name="scrollRight">
this.animate( 'x', 400, 2000 );
</method>
</view>


<view name="controlsForDebug" y="200">
<simplelayout axis="y" spacing="10" />
<button onclick="scrollingView.scrollRight()">Scroll</button>
<button onclick="scrollingView.setSource( 'burn.png' )">
Change Image
</button>
</view>
</canvas>


Note the setSource() method sets the view's source (image) at runtime, so it will load when you click the button.

If you know all the image names, and you want to load them all up front, then you could make a multi-frame resource. See here for more on multi-frame resources:

http://www.laszlosystems.com/developers/learn/documentation/tutorials/art_assets.php#multiframe

Then you could change the resource number (i.e. frame) of the view to change the image in it.

Like I said it would really help to be able to see the formatted code.

-Antun