Joomla 写風

  • フォントサイズを大きくする
  • デフォルトフォントサイズ
  • フォントサイズを小さく
Home Highide JS for joonla

highslide JS for joomla 1.5x

Eメール 印刷 PDF

 

     highslide JS for joomla 1.5x

JEC エディタがインストールされていることが必須条件です。
サムネイルをクールに拡大表示できる「Highside JS」をJoomla!で利用できるようにしたプラグイン。
作者Webサイト : http://joomlanook.com/ 画像効果のサンプルが見られます。

 

ダウンロード

highslide JS for joomlao の Dwnload 先 

 Download 先を開くと下のサイトに行きます。

  Thumbnail image

 最新バージョンはこのまま下へスライドします。旧バージョンを選択する場合は赤枠をクリックしてバージョンを選択します。
ここでは最新バージョンをダウンロードするのでこのまま下へスライドさせます。7つともすべてをダウンロードします。

Thumbnail image

 

インストール

jce_plugin_hsexpander_2_0_0.zip および jce_plugin_hshtmlexpander_2_0_1.zip を除く5つのファイルは「エクステンション」-「インストール/アンインストール」から通常通りインストールします。その後、 jce_plugin_hsexpander_2_0_0.zip および jce_plugin_hshtmlexpander_2_0_1.zip の2つのファイルは JCE Administration の管理画面からインストールします。

 

【エラー修正】

すべてインストールが終わりますと「コンテンツ」から記事を作成します。この時下のようなエラーが出ます。また出るはずのアイコンが欠けています。


Thumbnail image

このエラーはランゲージが対応していないために引き起こされているもので下記のように行えばこのエラーは修正されます。

root/plugins/editors/jce/tiny_mce/plugins/hshtmlexpander/langs/ と /root/plugins/editors/jce/tiny_mce/plugins/hsexpander/langs/ 内の、en.js,en_dig.js(言語js)を文字コードUTF-8(BOM)に変更、「en」を「ja」にリネームし再びアップロードすれば解決されます(元の en.js および en_dig.js は残ったままでも支障なし)。下のように hsxpander.desc と hshtmlhsxpander.desc のアイコンが正常に追加されます。

Thumbnail image

 

Highside JS の使い方

ここで説明するのはこの記事で使用した例を取り上げて行います。

コンポーネントから新規記事作成をします。
記事に画像を挿入します。画像の大きさは原寸が横サイズが 400 pixcel ~ 650 pixcel のものが最適です。あらかじめ用意しておきます。

画像の挿入

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

                

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

Thumbnail image

               

「Add」をクリック。 

Thumbnail image

               

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

Thumbnail image

               

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

Thumbnail image

              

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

Thumbnail image

               

サイズは実際に表示させるサイズに変更します。

Thumbnail image

               

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

Thumbnail image

                

ここまでは画像の挿入です。画像の表示は原寸より縮小されています。 

 Thumbnail image

               

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

Thumbnail image

               

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

Thumbnail image

               

Outline にのみを Rownded -back を選択する。下の「Inseat」をクリック。

Thumbnail image

               

プレビューで確かめます。

Thumbnail image

               

画像をクリックで拡大されれば成功です。成功すれば記事を「保存」します。

 Thumbnail image

最後に dimmingOpacity のサンプル

画像を選択、「hsxpander.desc」アイコンをクリック
Expander ページ:画像の保存先 URL 2ケ所と縮小表示のサイズを入力します。Popup Image スタイルに「background: black」と入力
Option ページ  :Outline に Rownded -white を選択、Dimming Opacity に「0.6」 と入力

Thumbnail image

 

Highslide JS API Reference

チュートリアル、 リファレンスなど参考資料が記載されています。

 

最終更新 2013年 10月 14日(月曜日) 12:37  
Home Highide JS for joonla

写風お勧め 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!を何に利用しますか?
 

オンライン中のユーザー

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

ニュース速報

何千とある無料のエクステンションのライブラリより、あなたはサイトを拡張するために必要とするものを追加できます。 今すぐ Joomla! エクステンション ライブラリに目を通してください。