スタッフブログ

番外編2 ライトボックスが動かない

  • このエントリーをはてなブックマークに追加

こんにちは、Hal9000です。
当社が管理するECサイトの商品詳細ページに使用している、LightBoxが最近に成って動作して居ない事に気が付きましたので
今回はその対処法についての投稿です。
LightBoxって何?という人の為に、まず、LghtBoxについて簡単にまとめます。

LightBoxとは、画像を表示させるウェブアプリに設置し、拡大画像をポップアップウインドウの様に表示する事が出来るjavascriptのライブラリーです。
複数のサムネイルを表示しその中から、クリックした物を、拡大表示したり”<”や”>”で次の画像や前の画像に移る事も出来ます。
拡大動作も一瞬タメが有ってスムーズに拡大するエフェクトがかかって居ます。
試しに下のLightBoxのロゴをクリックして下さい。これがLightBoxの効果です。

LightBoxロゴ

番外編2 ライトボックスが動かない!

それでは、早速問題のページを見てみます。ECはMagentoというパッケージを使用して居ます。
下の画像がMagentoの商品詳細ページです。

商品詳細ページ

画像をクリックして拡大表示

本来、商品画像の下のサムネイル画像をクリックすると拡大画像がポップアップし表示される筈ですが、表示されません。
この様な場合大抵javascriptがエラーを起こして居ますので、FireBugというFireFoxのアドオンを使用して確認します。

FireBugについては別の機会に紹介しますが、javascriptのエラーだけでは無くページのHTML組やckookieやセッション、リクエストの確認等、かなり高機能なデバッグツールで、我々も作成したページの動作確認などで何時もお世話に成って居ます。
下の画像がFireBugの画面です。

FireBug

画像をクリックして拡大表示

確認すると”NetworkError: 404 Not Founが出ています。
このエラーはご存知の通り”リンク切れ”を示しています。
ftpでサーバーを確認するとpathが示す場所にはファイルが在りません、通常考えにくいですが
恐らくファイルのバージョン管理のミス等で先祖返りを起こして居ると思われます。
実はこのサイトは最近迄、英国の会社がメンテナンスしていたので、詳細は判りません。

1. 対応策を考える

原因が判ったところで、対応策ですが、Lightboxを最新のバージョンに替えて設置する事にしました。
そこで、良く調べて見るとLightBoxh2はprototype.jsを利用していましたが、2.5以降、jQueryを利用するように成っている様ですので、少々問題です。
と言うのは、Magentoの元々在る機能で商品画像を拡大表示し拡大率をスライダーで変える機能の部分に、prototype.jsを使用しているからです。
prototype.jsとjQueryは同じページ内で使用すると、衝突(conflict)を起こし動作しません。
そこで両方のjsがロードされるタイミングをずらして、動作出来るようにします。

以下のコードが今回設置したコードです。
LightBoxは本家サイトから「DOWNLOAD」ボタンを押して、ダウンロードします。
ダウンロードしたコードは、解凍すると、「lightbox2-master」と言うフォルダーに入って居ますので、その中の「dist」と言うフォルダーの中身をサーバー上の/js/lightbox/以下にアップロードします。
/js/lightboxの中にcss、images、jsと言うディレクトリーが出来ます。
この配置が一番手っ取り早い様です。

<link rel="stylesheet" type="text/css" href="/js/lightbox/css/lightbox.css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script><!--
jQuery.noConflict();
jQuery(document).ready(function(){
  // ここでは、$はprototypeの動作をします。
  // jQueryオブジェクトとしての$は一切使えず、その場合は$()ではなくjQuery()と表記する必要があります。
});
//--></script>
<script src="/js/lightbox/js/lightbox.min.js"></script>

下の画像の様にFireBugのコンソールでもエラーは表示されなく成りました。

WS000014

画像をクリックして拡大表示

後は、httpdのエラーログを確認して今回の作業は完了です。

関連記事

  • このエントリーをはてなブックマークに追加

コメントを残す

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>