OpenLaszloで画像のスライドショー

OpenLaszloで画像のスライドショー

記事一覧OpenLaszloで画像のスライドショー

下記のサイトにて、スライドショーのサンプルプログラムを見つけたので応用して動作確認してみました。class との値の受け渡しについては、まだドキュメントを読んでいないのでアンチなことしているかもしれません。

サンプル満載!asonのOpenLaszlo入門
画像を任意に指定できるスライドショー

応用したところは、画像の横幅と縦幅も指定できるようにしたのと、外部の画像ファイルを指定しているところです。スライドさせるなら同じ画像サイズの方がベストですが、たまたま手元の画像に同じ大きさの画像がなかったのでバラしてみました。

最初からドキュメントを読んでいくより、上記のサイトの豊富なサンプルを応用しつつ、ドキュメントや API などを参考にして自分で実現したいものを作るのが近道でしょうね。以下は、今回応用したソースです。

<?xml version="1.0" encoding="UTF-8"?>
<canvas width="500" height="500" bgcolor="0xeeeeee" proxied="false"> 
  <class name="slide" opacity="0">
    <image src="${classroot.thisPic}" width="${classroot.w}" height="${classroot.h}" stretches="both"/>
    <attribute name="thisPic" type="string"/>
    <attribute name="nextSlide" type="string"/>
    <attribute name="w" type="string"/>
    <attribute name="h" type="string"/>
    <animator name="show" start="false" attribute="opacity" from="0" to="1" duration="1000" onstop="classroot.sleep.doStart()"/>
    <animator name="sleep" start="false" attribute="opacity" to="1" duration="3000" onstop="classroot.hide.doStart()"/>
    <animator name="hide" start="false" attribute="opacity" from="1" to="0" duration="1500" onstart="eval(classroot.nextSlide).show.doStart()"/>
  </class>
  <slide id="bg01" thisPic="http://example.org/1.jpg" w="100" h="100" nextSlide="bg02" oninit="this.show.doStart();"/>
  <slide id="bg02" thisPic="http://example.org/2.jpg" w="200" h="200" nextSlide="bg03"/>
  <slide id="bg03" thisPic="http://example.org/3.jpg" w="300" h="300" nextSlide="bg04"/>
  <slide id="bg04" thisPic="http://example.org/4.jpg" w="400" h="400" nextSlide="bg05"/>
  <slide id="bg05" thisPic="http://example.org/5.jpg" w="500" h="500" nextSlide="bg01"/>
</canvas>

参考カテゴリ

オススメ記事

最新の投稿やよく見られているのオススメ記事一覧です。

AmazonLinuxでEC2起動時にスワップ領域の割り当てに失敗

EC2 起動時のスワップ領域割り当てですが、これまでは以下の記事を参考に、/etc/rc.local を使って行っていました。 ・ Amazon EC2(Linux)のswap領域ベストプラクティス しかし、最近になって、EC2 イン...

>>記事を確認する

【5分でできる】Laravel5.4から5.5へバージョンアップ

Laravel5.5 がついにリリースされたので、5.4 ベースで作っていたものをバージョンアップしてみました。 composer.json の以下の部分を 5.5.* に変更するだけですが、依存関係のパッケージも問題なくアップデ...

>>記事を確認する

【30分でできる】AWSのEC2にgoofysを入れてS3をマウント

過去に携わったプロジェクトで、S3FS の通信状態が悪い時があるので、アプリ側のプログラムを AWS SDK を使ったものに置き換えていこうという施策がありました。 S3FS の導入には関わっていなかったので、導...

>>記事を確認する

【30分でできる】ぐるなびAPIで飲食店の店舗情報取得

過去に作成した「ぐるなびAPI」のプログラムや、ぐるなびの Web Service が新しくなったこともあり、API からの情報取得プログラムを書き換えてみました。 以前の記事は下記になります。 ・ ぐるなびAPIで...

>>記事を確認する

NginxのFastCGIキャッシュで白い画面がキャッシュされる

以前から、トップページにアクセスすると、レスポンスステータスは 200 で返ってくるのに、画面に何も表示されない現象が稀に見受けられたので調査してみました。 さすがに機会損失にも繋がるということで、...

>>記事を確認する

Laravel5.4の認証ユーザーのパスワードハッシュについて

Laravel で用意されている認証モジュールを利用する際、ユーザーモデル(User.php)経由で登録されるパスワードのハッシュ方法について調べてみました。 Laravel 上ではパスワード文字列を bcrypt() のヘルパー...

>>記事を確認する

Laravel5.4のコントローラコンストラクタでAuth::user()が取得できない

Laravel5.4 で認証を通したアクセスに対して、コントローラのコンストラクタでユーザモデルの値を取得しようと思ったら、なぜか Auth::user() の値が取得できなくて悩みました。 public function __construc...

>>記事を確認する

NginxのHSTS(HTTP Strict-Transport-Security)の設定

「Let's Encrypt」のおかげで、全サイト SSL 化していますが、これまで nginx の設定では、http のアクセスがあった場合に https に 301 リダイレクトさせていました。 この場合、Googlebot に http のアク...

>>記事を確認する

GoogleMapのAPIキーの認証情報にリファラURL設定

昔は API キーを指定することで、JavaScript で GoogleMap が表示できていましたが、何年か前に、そのキーに対して認証情報の追加が推奨されました。 新規で発行する場合は必須になっているかもしれませんが...

>>記事を確認する

【30分でできる】AmazonLinuxでApache2.4+php7.1+Laravel5.5

先日、「 VagrantでCentOS6.9のイメージを使う 」の通り、CentOS6.9 には Apache2.4 と PHP7.1 で Laravel のフレームワークが使える環境を構築しました。 ただ、将来的には AWS かつ Amazon Linux 上で動か...

>>記事を確認する