Joomla!

エディターJCEにlightboxライクなポップアップ画像表示を可能とするJCE MediaBoxを導入します

 Summary

• エディターJCEにはフリーのプラグインJCE MediaBoxが用意されており、これを導入することにより、簡単にlightboxライクなポップアップ画像表示を実装することができます

Howto

Setup

1.  JCEサイトのDownloadページよりMediaBoxをダウンロードします
2. System > Extentions > Insert Extentions > Upload Package File tab > Upload & Install Joomla Extentionに当該ファイルをドラッグアンドドロップします
3. インストール直後のプラグインは無効状態のため、System > Extentions > Plugins > System - JCE MediaBox 2 > Statusを有効に変更します
   

Usage

1. Insert Image よりサムネイル画像を挿入します (すでに画像挿入済の場合は手順2からスタートします)
   
   • img要素が挿入されます
   • 当サイトでは、サムネイル画像を別途用意せず、Popupに表示するフルサイズ画像をwidth/height属性指定により縮小しています(単に面倒くさがり屋なだけです)
2. 挿入された画像を選択します
3. Insert Linkをクリックします
   
4. Link dlg > Link tab > URL(A)にPopup表示する画像を指定します
   
   
   • File Browser(B)からの指定が簡便です
5. Link dlg > Popup tab > Popup Type: JCE MediaBox Popupを指定します
   
   
6. 同dlgのTitle, Captionを入力します
7. 複数の画像を一纏めにする場合、同dlgのGroupに指定します
   
   
   • 同じグループにする画像には同じGroup名を指定する必要があります
8. Insertをクリックします
   • 当該のimg要素が挿入されたa要素が作成されます
9. PreviewにてMediaBoxの動作確認をします
   

Custmize

Theme

• Compornet > JCE Editor > Control Panel > JCE MediaBox Parameters > Popup Theme
  
  
  
  • Standard, Light, Shadow, Squeezeの4種から選択できます
  • 当サイトではStandardを選択しています