Joomla 写風

  • フォントサイズを大きくする
  • デフォルトフォントサイズ
  • フォントサイズを小さく
Home 少しいじってみよう Joomla! Slide show のカスタマイズ(Highslide JS Configuration の活用-その1)

Slide show のカスタマイズ(Highslide JS Configuration の活用-その1)

Eメール 印刷 PDF

おさらいになるが Highdlide JS for Joomla をインストールする方法についてはこのサイトに既に掲載しておりますがそちらを参考にして下さい。 highslide JS for joomla
Highdlide JS for Joomla が正常にインストールされていたならばコンポーネントには Highdlide JS Configuration と云うものが出来ている筈です。今回はこの Highdlide JS Configuration を使ってカスタマイズして見ましょう。Slide show は特に Highdlide JS Configuration を使わなければ出来ないと云うことではありませんが面倒であること、より柔軟にカスタマイズするには Highdlide JS Configuration を使った方がベターです。
Slide show を作るには記事の中には少なくとも2つ以上の複数枚の画像が必要なことは云うまでもありません。そうでなけれは Slide show の意味がありませんよね。また Slide show を作るためには Highdlide JS for Joomla と JCE エディターのインストールは欠かせません。この条件が揃っていると云う前提で以後の説明をして行きます。
それでは先ず複数枚の画像を入れた記事の作成から説明します。

1. 画像の挿入

「画像の挿入/編集」アイコンをクリックします。
Thumbnail image

               

「アップロード」アイコンをクリックします。

Thumbnail image

               

「Add」をクリック。

Thumbnail image

               

あらかじめ用意した画像ファイルを指定します。

Thumbnail image

               

ファイルの指定が終われば「アップロード」をクリック。

Thumbnail image

              

アップロード完了すれば目的のファイル名をクリックすると上部に「URL」や「サイズ」が表示される。サイズは原寸のサイズです。

Thumbnail image

               

サイズは実際に表示させたい縮小したサイズに変更します。

100909-image11

               

確定すれば「Inseat」をクリック。

Thumbnail image

               

ここまでは画像の挿入です。画像の表示は先ほどの指定サイズで表示されます。

Thumbnail image

               

ここからが highslide の挿入です。先ず①画像をクリックして選択されていることを確認します。次に②の左アイコンの「hsxpander.desc」をクリックします。

Thumbnail image

               

クリックすると下のような画面が出ます。画像の保存先 URL 2ケ所と縮小表示のサイズを入力します。入力が終わればその隣の「Options」に移ります。

Thumbnail image

               

下のように6ヶ所を入力または指定します。終われば「Insert」で1枚目の画像が完了です。

Thumbnail image

               

画像の挿入から「hsxpander.desc」の操作を対象のスライド画像の枚数だけ行います。
hsxpander.desc の操作で Slide show group の指定は 画像すべてに共通のグループ名で例えば10枚の画像があれば10枚の画像が対象のスライドとして同一名の指定をします。

ここの例では3枚の画像を対象として画像の挿入から「hsxpander.desc」を設定しました。

110520-gazo01

3 枚ともすべて完了すれば保存して簡単な Slide show を見ることが出来ます。しかし何か物足りない感じがします。その物足りなさを次の Highdlide JS Configuration で行います。

2. Highdlide JS Configuration による記事の指定とカスタマイズ登録

 

記事が出来あがったところでコンポーネントをクリックします。
更に下のように Highdlide JS Configuration をクリックします。

Thumbnail image

Site Configuration をクリックします。

Thumbnail image

一番上の Select article 欄の右ボタンをクリックして Slide Show を入れた記事を選択します。

Thumbnail image

ボタンを押すと Slide Show の対象記事だけではありません。全ての記事一覧が表示されます。少し紛らわしいですがこの中から選択します。

Thumbnail image

記事が選択されますと右横の Slide Show のボタンをクリックします。一番上の Preset ボタンでカスタマイズされた種類を選択します。カスタム種類は全部で13種類ありますからお好みのものを選択します。例では gallerry-horizontal-strip を選択しています。
Slideshow Group 名は記事の作成で設定した Group 名を入力します。この値はここで指定してものと記事で書いた Group 名とが対応している必要があります。記事で修正するのは手間ですから注意してください。Autoplay 「はい」を選択します。右サイドの設定も同様にして下さい。

Thumbnail image

Slide Show が設定出来ればランゲージの設定に移ります。日本語化をしない場合はこのままでランゲージを設定する必要はありません。

Thumbnail image

ランゲージは下に記しておきます。以下を入力時にコピーすると便利です。

cssDirection: 'ltr', (left to right)
loadingText: 'Loading...',
loadingTitle: 'クリックでキャンセル',
focusTitle: 'クリックで手前に表示',
fullExpandTitle: '元のサイズで表示 (f キー)',
creditsText: 'Powered by <i>Highslide JS</i>',
creditsTitle: 'Go to the Highslide JS homepage',
previousText: '戻る',
nextText: '進む',
moveText: '移動',
closeText: '閉じる',
closeTitle: '閉じる (esc キー)',
resizeTitle: 'リサイズ',
playText: '再生',
playTitle: 'スライドショー開始 (スペースキー)',
pauseText: '停止',
pauseTitle: 'スライドショー停止 (スペースキー)',
previousTitle: '戻る (← キー)',
nextTitle: '進む (→ キー)',
moveTitle: '移動',
fullExpandText: '元のサイズ',
number: 'Image %1 of %2',
restoreTitle: 'クリックで閉じます。ドラッグで動かせます。矢印キーで前後の画像へ移動します。

また参考までカスタマイズで gallerry-horizontal-strip の他に気に入ったものを紹介しておきます。

Thumbnail image

Thumbnail image

Thumbnail image

ランゲージが終われば右上の「Save/Publish」をクリックします。「保存」では公開が有効になりませんので注意してください。

110520-image08

110520-image09

以上で Slide show のカスタマイズと Highdlide JS Configuration と利用及び記事との関連性について述べてきました。機会あれば一度お試しください。

 

最終更新 2016年 11月 21日(月曜日) 16:56  
Home 少しいじってみよう Joomla! Slide show のカスタマイズ(Highslide JS Configuration の活用-その1)

写風お勧め Extemtion

秋づいた美山町

  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow
  • An Image Slideshow

Movies

アンケート

Joomla!を何に利用しますか?
 

オンライン中のユーザー

現在
 ゲスト 87 人
 がオンラインです

ニュース速報

昨日アメリカのすべてのサーバーがもっと多くのRAMと良いCPUを要求するためのストライキで、機能しなくなりました。スポークスマンは良いRAMのニーズは、バカ者によりいくつかのフロントサイドバス速度を増加している。将来バスはマザーボードの中でスローダウンするようにいわれるであろう。