こんばんは爆  笑

 

無駄に文字をデカくしてみましたおねがい


もうすぐで9月が終わりですねガーン

暑い夏もあまりないまま秋がやってきました・・・
今年ももうすぐ終わってしまうと思うと何だか寂しいですねえーん


本日は、

XPages研究会の「 フレームワークを適用したサンプルアプリケーションの作成 」というテーマの中で行った「Slider Proを使ったXPagesを作ろう」をご紹介しますニコニコ

 

何でブログのネタにするかは理由が二つあります。

1.難しいことを何もしていないのに、なんかカッコいいページが出来る

2.半分以上はコピペで出来るのでプログラムが苦手な人にも簡単に出来る(多分Notesだからかも)

 

 

こういうの、大好きですw

 

XPages研究会のメンバーの方はdWからダウンロードできるようになっていますので、煮るなり焼くなりしてくださいドクロ

 

 

早速本題へ・・・

 

まずはSlider Proから紹介ですねー爆  笑

主な特徴としては、
・ レスポンシブ対応
・ フルウィンドウ(画面いっぱい!!)
・ サムネイル
・ 画像の読み込み遅延
・ 動画対応(Youtube・Vimeo・HTML5・Video.js・SublimeVideo・JW Player)

 

他にもクラスを与えてスタイル付けたりとかも出来るらしいです (スゲェー)びっくり

 

では、作っていきましょう!!

 

1.jsファイルなどを手に入れる

Slider ProからDownloadしてきます。

場所は、下へスクロールしていくとあります。

(わかりずらい)ゲロー

 

zipファイルがダウンロードできるので、解凍します。

 

こんな感じですねニヤリ

 

 

2.NotesDBに取り込む

折角ダウンロードしても使わなければ動かないのでDB内に保存します。

 

新規にDBを作成します。テンプレート等は不要です。

いつでも捨てられるようにしておいてください。

 

まずはcssファイルを取り込みましょう。

***\slider-pro-master\dist\cssフォルダー内に「slider-pro.min.css」があるので、

DBのスタイルシートにインポートします。

 

 

***\slider-pro-master\dist\jsフォルダー内に「jquery.sliderPro.min.js」、

***\slider-pro-master\libsフォルダー内に「jquery-1.11.0.min.js」

ファイルリソースにインポートします。

 

3.DBの設定を変える

DBのプロパティを一部変更しなければなりませんゲロー

 

アプリケーションのテーマを変更します。

適当に<blank>とかつけてみてください。

 

「実行時最適化 JavaScript と CSS リソースの使用」のチェックを外します。

外さないと動きません(多分)滝汗

 

 

ページの生成プロパティでエンコードと HTML doctypeの値を変更します。

保存して閉じてください。

 

 

DBはあと開発のみですねニヤ

 

次回、開発に入っていきたいと思います。

近いうちに続きを書きますアップ

 

では、今日はこの辺で・・・

 

 

あでゅーバイバイ

 

AD