Archive

Posts Tagged ‘Slider’

Visualslider in productive usage

Written on June 18th 2009, 17:06 by sYnie

While watching for some referer statistics on synie.net, I stumbled across a thread in the OL forums. Here it is:
http://forum.openlaszlo.org/showthread.php?t=13698

LaSlow writes about using my visualslider for a product show case. Just visit this site to see it in action:
http://www.smartcard24.com/
It’s hot, isn’t it? ;-)
I had to reload the website multiple times in order to see it, instead of an advertisement. But it looks great. It’s nice to see what people do with my code snippets. Just recently I got an e-mail from LaSlow with the extended code. It was you, wasn’t it? I’ll try to prepare it for upload during the next 2 weeks.

So, in any case – if you did some improvements to some of my code snippets, feel free to send them to me. I’ll publish them here.

Thanks to LaSlow for sharing the link.

Slideshow with OpenLaszlo as a “Widget”

Written on October 8th 2008, 20:10 by sYnie

Hey,

I want to introduce you the previous posted Slideshow created with OpenLaszlo, but this time, you can use it without any knowledge of OpenLaszlo. Just download it and use a simple HTML-embed object, to tell the SWF, which pictures you want to use. This is an Example:


(enlarge)

You can also use your mouse to navigate between the pictures and to start/stop the autmatical slide show.

The code which I used to embed it is:

<object width="400" height="300">
<param name="movie" value="visualslider/visualslider.swf">
<embed src="visualslider/visualslider.swf?vspic1=res/1.jpg&vspic1w=300&vspic1h=200&vspic2=res/2.jpg&vspic2w=300&vspic2h=200&vspic3=res/3.jpg&vspic3w=300&vspic3h=200&vspic4=res/4.jpg&vspic4w=300&vspic4h=200&vspic5=res/5.jpg&vspic5w=300&vspic5h=200&vspic6=res/6.jpg&vspic6w=300&vspic6h=200&vspic7=res/7.jpg&vspic7w=300&vspic7h=200" width="500" height="300">
</embed>
</object>

It’s quite simple. You just have to include the SWF file into your HTML document and give it some parameters about which pictures you want to use in the slideshow.
This is the URL to the SWF file I used:

visualslider/visualslider.swf?vspic1=res/1.jpg&vspic1w=300&vspic1h=200&vspic2=res/2.jpg&vspic2w=300&vspic2h=200&vspic3=res/3.jpg&vspic3w=300&vspic3h=200&vspic4=res/4.jpg&vspic4w=300&vspic4h=200&vspic5=res/5.jpg&vspic5w=300&vspic5h=200&vspic6=res/6.jpg&vspic6w=300&vspic6h=200&vspic7=res/7.jpg&vspic7w=300&vspic7h=200

  • “visualslider/visualslider.swf” is the place, where visualslider.swf is located.
  • “?vspic1=” is the parameter to tell the SWF, which picture (”res/1.jpg”) to use.
  • “&vspic1w=” to define the width (”300″).
  • “&vspic1h=” to define the height (”200″).
  • After that, I pass the next parameter for the second picture (”&vspic2=”), and so on.
  • You can also define “&vsms=” to tell the SWF, how fast it should change the picture. Default is set to 5000.

The SWF: visualslider.tar (2009-07-06)
The sourcecode: main.lzx (2009-07-06), visualslider.lzx (2009-07-06) (GPL’ed)
Click here to see the fully documented Visualslider component.
I hope it’s useful for you.

Slideshow for OpenLaszlo

Written on July 5th 2008, 19:07 by sYnie

I had to create a Presentation some days ago. As we needed a little slideshow of pictures, within that presentation, I decided to create a little Sliteshow with OpenLaszlo. Maybe it’s useful for you, so you can use it under the terms of the GPL.

Here is a little Example, created with “Visualslider”:
Visualslider.swf

And this one ist quite the same, but with Slides sliding “circles”:
Visualslider_c.swf

You can click on the Slides, to navigate through them. Also you can use the cursor keys, to do the same. With the key “t” you can toggle between automatical sliding and manual sliding.

And here is the source code:
visualslider.lzx (2009-07-06)

A little Documentation:

<visualslider>

  • Description:
    The container view
  • Attributes:
    currentslide – (readonly) returns the selected slide
    slideduration – the time in ms for the slide-animation
    circular – boolean for circular-sliding
    timerms – the time in ms for automatical sliding
    istimerstarted – (readonly) returns a boolean whether automatical sliding is started or not
  • Methods:
    slideUp() – select next slide
    slideDown() – select previous slide
    slideTo(n) – select the nth slide
    startTimer() – start automatical sliding
    stopTimer() – stop automatical sliding

<visualsliderview>

  • Description:
    A slider-view. Must be placed in <visualslider>
  • Attributes:
    originalwidth – the 100%-width of the view
    originalheight – the 100%-height of the view
    currentslide – (readonly) returns a boolean whether this visualsliderview is selected or not
    shadow – boolean to display a shadow under the visualsliderview
    factor – (readonly) returns a scale-factor with reference to originalwidth and originalheight (useful to scale subviews)
    slidenumber – (readonly) returns the number of the slider
  • Events:
    onstop – Fires when the animation is finished
    onstart – Fires when the animation is started

Here you can find the zipped source code of the example. This may be helpful to create your own slideshow:
visualslider.tar (2009-07-06)