Movable Type 備忘録

 jQuery で Lightbox のように表示する

  • Oct212007
  • Vote:
    http://bizcaz.com/archives/2007/10/21-111130.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

こんばんわ^^

昨日は友人に連れてかれるまま、銀座にある『七厘や庵』という炙り焼きのお店に行ってきました。
店内は落ち着いた雰囲気で、焼酎、日本酒はもちろんのこと、ワインも置いてます。

料理のほうも黒毛和牛やあわびの七厘焼き、アナゴの白焼きメッチャおぃひかったです (＊´∀｀＊)
やっぱり素材がいいからかな♪

東京都中央区銀座8-3-10

アクセスは JR 新橋駅からすぐのビルの地下 1 階にあります。
連れてがれるままだったからビル名が分からなくってネットで調べたら、『トミタビル』だそうです (;￣∇￣A
機会があったら是非 (●＞∀＜●)

さて、今回は久しぶりに jQuery に関するご紹介です。
Lightbox はもう説明するまでもないですね。
この Lightbox と同じようなエフェクトで表示できるプラグインが紹介されてました。

以前、jQueryでLightbox風な表示やってみる(ThickBox)という記事で Lightbox 風な thickbox というプラグインをご紹介しましたが、今度のは見た目 Lightbox まんまです Σ(￣Д￣；)!! 動作もサクサク表示されます!!

使い方は prototype 版 Lightbox よりカンタンで、オーバーレイ(透過背景色)の色もお好みの色に変更できます。

設置の仕方

  1. まず jQuery 版 Lightbox をダウンロードします。
    こちら jQuery lightBox plugin から圧縮ファイルをダウンロードして、適当なフォルダに展開します。

    2007.10.21 時点のバージョンは 0.3 です。

  2. 次に jquery.lightbox.js をオーバーレイの透過背景色などをカスタマイズします。
    デフォルトでは黒(#000)ですが、お好みで変更してください。

    jquery.lightbox.js

    1. settings = jQuery.extend({
    2.  
    3.     overlayBgColor: '#000', /*背景色*/
    4.     overlayOpacity: 0.8, /*透過*/
    5.  
    6.     imageLoading: '<$MTBlogURL$>lightbox/images/lightbox-ico-loading.gif',
    7.     imageBtnPrev: '<$MTBlogURL$>lightbox/images/lightbox-btn-prev.gif',
    8.     imageBtnNext: '<$MTBlogURL$>lightbox/images/lightbox-btn-next.gif',
    9.     imageBtnClose: '<$MTBlogURL$>lightbox/images/lightbox-btn-close.gif',
    10.  
    11.     containerBorderSize: 10,
    12.     containerResizeSpeed: 400,
    13.  
    14.     txtImage: 'Image',
    15.     txtOf: 'of',
    16.  
    17.     imageArray: [],
    18.     activeImage: 0
    19. },settings);

    青い字の部分がオーバーレイの背景色と透過具合を変更します。
    赤い字の部分は jquery.lightbox.js 内で使用されるイメージファイルの URL に変更します。

  3. 一通り変更したらサーバにアップロードします。
    アップロード先はどこでも構いません。各自の環境に合わせてアップロードしてください。

以上で設置は完了です。

使い方

  1. HTML ヘッダ(<head>～</head>)の中に以下を追加します。

    1. <script type="text/javascript" src="<$MTBlogURL$>lightbox/js/jquery.js"></script>
    2. <script type="text/javascript" src="<$MTBlogURL$>lightbox/js/jquery.lightbox-0.3.js"></script>
    3. <link rel="stylesheet" type="text/css" href="<$MTBlogURL$>lightbox/css/jquery.lightbox-0.3.css" media="screen" />
    4. <script type="text/javascript">
    5. $(function() {
    6.     $('#gallery a').lightBox();
    7. });
    8. </script>

    青い字の部分を各自の環境に合わせて変更してください。
    赤い字の部分はお好みですが、gallery という ID では都合が悪い人は任意の ID に変更します。

  2. 次にサムネイル表示です。
    prototype 版 Lightbox のように、各イメージに 'rel=lightbox' と付ける必要はありません。
    <div id="gallery">～</div> で囲うだけで表示されます。

    前で 'gallery' を別 ID 名に変更した場合は、'gallery' の部分が変更した ID 名になります。

    1. <div id="gallery">
    2.     <ul>
    3.         <li>
    4.             <a href="photos/image1.jpg" title="">
    5.                 <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
    6.             </a>
    7.         </li>
    8.         <li>
    9.             <a href="photos/image2.jpg" title="">
    10.                 <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
    11.             </a>
    12.         </li>
    13.         <li>
    14.             <a href="photos/image3.jpg" title="">
    15.                 <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
    16.             </a>
    17.         </li>
    18.         <li>
    19.             <a href="photos/image4.jpg" title="">
    20.                 <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
    21.             </a>
    22.         </li>
    23.         <li>
    24.             <a href="photos/image5.jpg" title="">
    25.                 <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
    26.             </a>
    27.         </li>
    28.     </ul>
    29. </div>

    上記はサンプルを抜粋したものですが、普通にイメージファイルの羅列だけで、後は勝手に jquery.lightbox.js が 'NEXT'、'PREV' リンクを付けてくれたりします。便利ですね。

以上で jQuery で Lightbox みたいなエフェクトを使ったサムネイル表示をすることができました。

 Trackback Pings(2)

from Tetsuyan´s Blog

いつもながらナイスなネタを振っていただける、MovableType備忘録 bzb...

Tracked on October 21, 2007
from [ja]マイブログ[/ja][en]my weblog[/en]

メニューから好きなLightboxを訪問者が自由に選択できる試みです。それも埋め込みは超簡単です！！

Tracked on December 4, 2007

 Comments(26)

#1: Posted by 哲やん @ October 26, 2007 [REPLY]
user-pic

便利に使わせていただいてます・・・Lightboxより軽い感じがしていいですね。
あとは「image of」を日本語表示にできれば・・・（笑）

 
#2: Posted by Author Profile Page bzbell @ October 27, 2007 [REPLY]
user-pic

>>1 哲やん さん

こんにちわ^^

> あとは「image of」を日本語表示にできれば・・・（笑）

できます。

  1. お使いの文字コードに合わせて jquery.lightbox.js を変換
  2. jquery.lightbox.js 内の 36、37 行目をお好みで変更

以上で哲やん さんご希望の表示ができると思います (￣∇￣)b

jquery.lightbox.js のコード変換は、テキストエディタでできるものもあります。

できない場合には、以下の手順でできます。

  1. インデックステンプレートを新規作成
  2. jquery.lightbox.js をコピー & ペースト
  3. 出力先を元の jquery.lightbox.js で上書き

以上の手順で MT で使用している文字コードで出力してくれます。

 
#3: Posted by 哲やん @ October 27, 2007 [REPLY]
user-pic

>>2 bzbell さん

毎度どうもです。
230行あたりの以下の所もいじらないといけないみたいですね。
関数で入れるより、そのまま直書きかな？（笑）

if ( settings.imageArray.length > 1 ) {
$('#lightbox-image-details-currentNumber').html(settings.txtImage + ' ' + ( settings.activeImage + 1 ) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show();

 
#4: Posted by haru @ February 23, 2009 [REPLY]
user-pic

初めまして^^
スゴク　カッコいいサイトですね。
内容も充実していますし素人の私には、難し過ぎますけど(>_

お聞きしたいことがあります。
Lightbox ｖ２．０をサイトで使っています。
少しですが、カスタマイズをしていて結構気にっているのですが、
Lightbox は、HTMLが表示されないのが残念です。

ThickBox 3がHTMLが表示するのを知って使おうと思うのですが
今のデザインが変わるのはイヤで、何かLightboxでHTMLが表示できる
方法がないかと思っています。
何か方法があれば教えていただけないでしょうか。
宜しくお願いします。

 
#5: Posted by Author Profile Page bzbellからharuへの返信 @ February 23, 2009 [REPLY]
user-pic

>>4 haru さん

こんばんわ^^

> 内容も充実していますし素人の私には、難し過ぎますけど(>_

分からないことがあれば、ご連絡いただければできる限りお力になりますよぉバイバイ

> 今のデザインが変わるのはイヤで、何かLightboxでHTMLが表示できる
> 方法がないかと思っています。

それでしたら shadowbox ってのがわたし的にはオススメです。
haru さんご希望の、HTML も表示できますし、使い方も lightbox と同じ要領で使うことができます。
参考: http://bizcaz.com/archives/2008/03/08-202627.php

基本的な使い方は上記ページでご紹介してますので参考にして頂けたらと思いますテレテレ
分からないことがありましたらご連絡くださいバイバイ

 
#6: Posted by haru @ February 24, 2009 [REPLY]
user-pic

確認しました^^

難しそうですね・・・・^^;
ダウンロードしましたけど、ファイルがいっぱいですね。(*_*)
どのファイルがいるのでしょうか？
完全コピーしていきますのよろしくおねがいします。

やっぱりカッコいいサイトですね。
スゴイ才能の持ち主は、いてるんですねぇ～センスもいいです。

 
#7: Posted by haru @ February 24, 2009 [REPLY]
user-pic

こんばんは^^

Shadowboxをチャレンジしましたが・・ダメみたいですね。（笑）
サイトの記事どうりに<head>内にソースを書き込みました。
変更ヵ所
URL
prototype
※Lightbox がprototype になっていたので・・prototype を書き込みました。
解凍したShadowboxファイルをダメもとでアップしてみました。

サイト記載されてるディレクトリーを真似て
書き換えました^^;　↓

<script type="text/javascript" src="http://ｘｘｘｘ.com/js/adapter/shadowbox-prototype .js"></script>
<script type="text/javascript" src="http://ｘｘｘ.com/js/shadowbox.js"></script>
<script type="text/javascript">

Shadowbox.loadSkin('classic', 'http://ｘｘｘ.com/js/skin');
Shadowbox.loadLanguage('en', 'http://ｘｘｘ.com/js/lang');
Shadowbox.loadPlayer(['img', 'html'], 'http://soleil.com/js/player');

js ファイルの中に ディレクトリーに合わせて各ファイル入れています。
必要のないファイルは、はずしています。

<head>内にLightbox ソースがあるとダメですか^^;
一様消しときました。
※prototype .ｊｓは、別にアップする必要あるんでしょか？？
取り決めが分からないです。ほとんど・・何も分からずやっていますが(>_<)
私のサイトは、HTMLでMTでは、ありませんので又ソース表示もかわりますか。
できましたら<head>内にソースの間違ってる箇所を教えていただけますか
宜しくおねがいします。m(__)m

 
#8: Posted by Author Profile Page bzbellからharuへの返信 @ February 24, 2009 [REPLY]
user-pic

>>6 haru さん
>>7 haru さん

こんばんわ^^

ご連絡が遅くなってすいませんあせあせ

> <head>内にLightbox ソースがあるとダメですか^^;

はい。shadowbox と lightbox は併用できません。
たぶん他の lightbox 系のエフェクトライブラリにおいても同様だと思われまする。
なので、lightbox を削除してください。

> ※prototype .ｊｓは、別にアップする必要あるんでしょか？？

はい。prototype.js は別途 UP する必要があります。
てか、haru さんは jQuery をお使いかと思ってたのですが prototype でいいですか!?

具体的には以下の手順で設置してみてください。

  1. まず、必要なファイルをサーバにアップロード

    以下のページからライブラリをダウンロードします。

    http://mjijackson.com/shadowbox/doc/download.html

    ページ下の方に「Download Code」というボタンがありますのでそちらをクリックして shadowbox-2.0-code.zip というファイルを入手してください。 そして、入手した圧縮ファイルを適当なフォルダに解凍してください。

  2. 不要なランゲージファイルを削除

    build フォルダ内にある lang フォルダ内から shadowbox-en.js というファイル以外のすべてを削除します。

  3. 必要なファイルをサーバにアップロード

    build フォルダ内の adapter、lang、player と shadowbox.js を丸ごとサーバにアップロードします。 アップロード先はどこでも構いません。
    たとえば、haru さんとこのトップページと同じ場所に js/shadowbox フォルダを新規作成してその中にアップロードすれば整理整頓できると思いますテレテレ

    もう一つ、 src フォルダ内に skin というフォルダがありますので、そのフォルダも shadowbox フォルダ内にアップロードしてください。

以上で shadowbox の前準備( 設置 )は完了です。
あとは、HTML ヘッダ内に以下のコードを追加すれば完了ですブイブイ 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://●●●/js/shadowbox/adapter/shadowbox-jquery.js"></script>
<script type="text/javascript" src="http://●●●/js/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin('classic', 'http://●●●/js/shadowbox/skin');
Shadowbox.loadLanguage('en', 'http://●●●/js/shadowbox/lang');
Shadowbox.loadPlayer(['img', 'html', 'iframe'], 'http://●●●/js/shadowbox/player');
$(document).ready(function() {
Shadowbox.init();
});
</script>
※行頭に全角スペースが付加されてます。コピペした後で行頭の全角スペースを必ず削除してください。

ちょと補足すると、shadowbox をどのように使いたいかによってロードするライブラリ( プレイヤー )を選択することができます。Shadowbox.loadPlayer(～)というのがそれにあたります。

上記コードだと img、html、iframe という選択になってますが、これは shadowbox を使って画像表示、HTML タグ表示、外部ファイル( HTML ファイル )表示を選択してます。
プレイヤーの選択によっては動画ファイルなども表示することができますワクワク

上記ダウンロードページ下にある「Players」というところに選択可能なライブラリが明記されてますので参考にしてください。

 
#9: Posted by Author Profile Page bzbellからharuへの返信 @ February 24, 2009 [REPLY]
user-pic

>>7 haru さん

>>8 の追記です。 prototype を使いたい場合には HTML ヘッダ内に以下のコードを追加してください。 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script type="text/javascript" src="http://●●●/js/shadowbox/adapter/shadowbox-prototype.js"></script>
<script type="text/javascript" src="http://●●●/js/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin('classic', 'http://●●●/js/shadowbox/skin');
Shadowbox.loadLanguage('en', 'http://●●●/js/shadowbox/lang');
Shadowbox.loadPlayer(['img', 'html', 'iframe'], 'http://●●●/js/shadowbox/player');
Event.observe(window, "load", function() {
Shadowbox.init();
});
</script>
 
#10: Posted by haru @ February 25, 2009 [REPLY]
user-pic

ありがとうございます。^^

確認してください。
説明どうりしましたけど・・まだダメみたいですね。
私の認識不足です。

１．build フォルダ内にある lang フォルダ内から shadowbox-en.js というファイル以外のすべてを削除しました。
build フォルダは、削除
２．shadowbox フォルダを新規作成しshadowbox内に adapter、lang、player 、skin、shadowbox.js
※flvplayer.swf、.DS_Store、READMEは、ファイル内にまだあります。
３．ソースをサイトのURLを書き込み
全角のスペース削除
※Event.observe(window, "load", function() {
Shadowbox.init();
});

スペース削除していますので、ソースは、左よりです。
以上の作業を行いました。

追伸

＜はい。prototype.js は別途 UP する必要があります。＞

prototype.jsは、どうすればいいですか？

 
#11: Posted by Author Profile Page bzbellからharuへの返信 @ February 25, 2009 [REPLY]
user-pic

>>10 haru さん

えっ!? ダメですかしくしく!?
shadowbox で表示したい画像の rel 属性は指定されてますよねうぅ～ん!? 

<a href="images/▲.png" rel="shadowbox"><img alt="タイトル" src="images/▲.png" width="320" height="240" /></a>

可能であれば haru さんが shadowbox を設置されたページを見せていただけますか。
ちょとわたしの方で確認してみます。
※言って頂ければ URL は伏せます。

> prototype.jsは、どうすればいいですか？

prototype.js は >>9 でご紹介したコードを貼り付けてるのであればいっしょにロードされますので大丈夫ですよふつう

 
#12: Posted by Author Profile Page bzbellからharuへの返信 @ February 25, 2009 [REPLY]
user-pic

>>10 haru さん

おはよございます。
haru さんのテストサイト確認しました。
shadowbox.js がアップロードされてないか、HTML ヘッダに記述した URL が間違ってるようですあせあせ
shadowbox.js が正しくロードされれば問題ないように思います。
ご確認くださいぺこり

 
#13: Posted by haru @ February 25, 2009 [REPLY]
user-pic

Lightboxとshadowbox同一ページに併用してはいけないだけですか？
それか・・Lightbox自体サイト内のページにあるといけないのですか？
shadowboxの設置ができれば、Lightboxは、削除する予定してます。

※Lightboxが存在してる状態ですのでshadowboxの設置に影響が出てるかと
思いまして

ブログは、MTでLightboxが設置されて使われています。
ホームページは、MTのLightboxが設置からリンクしてLightboxを使っています。
ブログでは、MTでLightbox使う予定にしています。

少し質問がずれてすみません。
MTは、ぜんぜん分からないので、業者さんにお任せしていますが、Lightbox以外の
使用を業者さんがイヤがるので・・^^;

 
#14: Posted by Author Profile Page bzbellからharuへの返信 @ February 25, 2009 [REPLY]
user-pic

>>13 haru さん

> Lightboxとshadowbox同一ページに併用してはいけないだけですか？
> それか・・Lightbox自体サイト内のページにあるといけないのですか？

はい。Lightbox と shadowbox いずれかのみページ内に記述するようにしてください。
以前わたしが試したときは競合!? しちゃうのか、正しく表示できませんでした。
でも shadowbox のコードを解析してバッティングしないよう CSS をイジくれば大丈夫かもです。
ただ、今後バージョンアップといった場合にその都度イジくるのは非効率過ぎるのでわたしはやってません。

> MTは、ぜんぜん分からないので、業者さんにお任せしていますが、Lightbox以外の
> 使用を業者さんがイヤがるので・・^^;

そうでしたか。
そうしますと、shadowbox を使ってしまうとサポート!? を受けられなくなるってことはないですかあせあせ!?

あと、haru さんのテストサイトの HTML ヘッダ内に common.js というのがありますが、これは prototype 1.5.1 のようです。※意図的に prototype.js を common.js にリネームしてるようです。
shadowbox 用に追加したコードでは prototype 1.6.0.3 をロードして、さらに prototype 1.5.1 をロード･･･という状況になってます。

本来なら common.js を削除して最新の prototype を使ってください･･･と言いたいところですが、業者さんにお任せしてるとなると、業者さんが作成された JavaScript があった場合、prototype 1.6.0.3 に対応しないコードだとエラーしてしまうかもしれませんので、shadowbox 側も prototype 1.5.1 に合わせた方が無難かもしれませんね。

 
#15: Posted by haru @ February 25, 2009 [REPLY]
user-pic

わかりました^^

shadowboxを使うことにサポートを受けれないようなことは、無いですよ。
何かあった時に頼んで触ってもらっています。

先週からMTの調子が悪く原因を探しているみたいで現在MTは、さわれないので
Lightboxをprototype 1.5.1 に合わせて見ます。

Lightboxがの設置ができて、MTがなおったらバージョンを上げます。
その時は、宜しくお願いしますね。

今は、Lightboxがの設置をがんばります(^^)/

prototype 1.5.1 は、ソースの書き換えだけでOKですか。

 
#16: Posted by Author Profile Page bzbellからharuへの返信 @ February 25, 2009 [REPLY]
user-pic

>>15 haru さん

> prototype 1.5.1 は、ソースの書き換えだけでOKですか。

はい。>>9 で追加したコードの 2 行目、1.6.0.3 ･･･っていう 1 行を削除すればいいですよワクワク

 
#17: Posted by haru @ February 25, 2009 [REPLY]
user-pic

こんばんは^^

prototype 1.5.1 は、ソースの書き換えてアップしてもまだ・・ダメのようなので
昨日、ソースをみていただいたので、ソースは、OKとして
ファイルの見直しで
#10
＜１．build フォルダ内にある lang フォルダ内から shadowbox-en.js というファイル以外のすべてを削除しました。
build フォルダは、削除＞
＜２．shadowbox フォルダを新規作成しshadowbox内に adapter、lang、player 、skin、shadowbox.js
※flvplayer.swf、.DS_Store、READMEは、ファイル内にまだあります。＞

再度新しいファイルを解凍してみると、shadowbox-2.0-code内のbuild・src・shadowbox.js２２KB
昨日は、きずかなかったですが、src内にbuild内と同じadapter、lang、player 、skin、shadowbox.js ７０KBが
あります。昨日は、src内のadapter、lang、player 、skin、shadowbox.js ７０KBでけ取り出して
srcは空なので削除しています。

shadowboxファイル内は、adapter、lang、player 、skin、src、shadowbox.js ２２KBで
src内にadapter、lang、player 、shadowbox.js ７０KBは、そのままでアップですか？
もう原因は、ファイルしか考えられないですよね(>_

 
#18: Posted by Author Profile Page bzbellからharuへの返信 @ February 25, 2009 [REPLY]
user-pic

>>17 haru さん

  1. prototype 1.5.1 を使用する場合には HTML ヘッダ内から以下の行を削除してください。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.5.1/prototype.js"></script>

  2. common.js を元に戻してください。

    現状 HTML ヘッダ内には記述されてますが参照できないようです。たぶん haru さんがサーバ上から削除されたのだと思いますが prototype 1.5.1 を使う場合には common.js をサーバ上に戻してください。

shadowbox.js がサーバ上にアップロードされたときはちゃんと表示できてたので、haru さんが懸念されてるところは OK だと思いますやあ！
たぶん上記を解決すれば問題ないように思いますあせあせ

- 追記 -

あと、common.js は必ず shadowbox-prototype.js より上の方でに記述するようにしてください。
これは prototype だろうと jQuery だろうと同じことが言えるのですが、使用するライブラリは必ず最初に読込んでおく必要があります。

 
#19: Posted by haru @ February 26, 2009 [REPLY]
user-pic

聞いてください。!(^^)!

shadowboxうごきました。
common.jsがサーバーにないので、あわてて書き換えました。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script
読み込んでくれまいしたよ（涙）
また・・common.jsがサーバーに上がると消えると思いますが・・・・
サーバーにightboxがあってブログで使ってホームページにshadowboxを使うのも
互換性が悪くよくないのですか？？同じページで使わないので大丈夫ですか？

shadowboxファイルは、昨日ファイルでOKですか？
それかsrc内にadapter、lang、player 、shadowbox.js ７０KBは、そのままでアップですか？

shadowbox/common.jsを1.6.0.3にバージョンアップした方が良いのですか?
つ込んだこと沢山聞いてすみません。
アドバイス道理にしようと思いますので、宜しくお願いします。

 
#20: Posted by Author Profile Page bzbellからharuへの返信 @ February 27, 2009 [REPLY]
user-pic

>>19 haru さん

こんばんわ^^

> サーバーにightboxがあってブログで使ってホームページにshadowboxを使うのも
> 互換性が悪くよくないのですか？？同じページで使わないので大丈夫ですか？

はい。大丈夫ですよ。
同一ページ内で Lightbox と shadowbox を併用しなければ問題ありませんブイブイ

> それかsrc内にadapter、lang、player 、shadowbox.js ７０KBは、そのままでアップですか？

src 配下のコードを使っても問題ありませんよ。
ただファイルのサイズが違うだけです。ファイルサイズが小さい＝表示速度に影響します。
ですので、ファイルサイズの小さい build フォルダのものを使用したまです。
haru さんが src 配下のファイルを使いたいのであれば上書きしちゃってください。

> shadowbox/common.jsを1.6.0.3にバージョンアップした方が良いのですか?

一概には言えませんが、なるべく最新バージョンを使った方が何かとよろしいかと。
気になるのは業者さんが作られた JavaScript が 1.6.0.3 に対応するかどうか･･･というくらいでしょうかうぅ～ん

 
#21: Posted by haru @ February 27, 2009 [REPLY]
user-pic

おはようございます。^^

業者さんがブログにshadowboxを使っても大丈夫ってことで、
Lightboxを使うのは、やめました。

common.jsを1.6.0.3にバージョンアップしてもらいました。
色々とご指導頂いてありがとうございました。
自分の思うようなフィルターを使うことができて良かったです。

コメントのネコ可愛いですね。
店のスタッフが、ブログに使いたいそうです。
使わしていただいてもいいでしょうか？

 
#22: Posted by Author Profile Page bzbellからharuへの返信 @ February 27, 2009 [REPLY]
user-pic

>>21 haru さん

こんにちわ^^

> 自分の思うようなフィルターを使うことができて良かったです。

よかったですね。
なるべくなら統一した方がいいですもんねパチパチ

> 使わしていただいてもいいでしょうか？

はい。ぜんぜん OK ですブイブイ
以下のサイトさんで配布されてますので頂いてください。
猫ちゃん以外にウサちゃんなどもあります。どれもかわいいですキャハハ
http://purple.cafe.michikusa.jp/index.html

 
#23: Posted by haru @ March 2, 2009 [REPLY]
user-pic

こんばんは^^;

すみません・・突然に！
ホームページ・ブロブ共にcommon.js（ページトップへ）をクリックすると
ページエラーが表示されます。
common.jsのせいでしょうか？
一度確認して頂いてもいいでしょうか？
common.jsが重たく感じるんです。
宜しくおねがいします。m(__)m

 
#24: Posted by Author Profile Page bzbellからharuへの返信 @ March 2, 2009 [REPLY]
user-pic

>>23 haru さん

こんばんわ^^

確かにブラウザによってはエラーメッセージが表示されますね。( IE だけ )
JavaScript の問題のようです。

  1. まず HTML ヘッダ内の以下の行を削除してください。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>

    既に common.js で prototype ライブラリをロードしてますので上記行は不要です。

  2. 断言はできませんが、各ページの下の方にある、以下のコードは必要でしょうか。

    <script type="text/javascript" language="JavaScript">
document.write("<script type=text/javascript src=\"http://tipy.2bee.jp/php/count.php?acount=SoLeiL&NoReload=true&referer=");document.write(document.referrer+"\" charset=\"Shift_JIS\"></" + "script>");
</script>

    上記コードが実行されるとエラーしてるように見受けられます。

    外部サーバにある PHP スクリプトを実行してるのですがご存知でしょうかあせあせ
    少なくとも上記を削除することでエラーが改善されるように思います。 一度業者さんにご相談されてみてはどうでしょあせあせ

 
#25: Posted by haru @ March 3, 2009 [REPLY]
user-pic
解除をしました。 shadowboxが起動ぢなくなりました。 document.write(""); アアクセス解析です。 削除したら、エラーが消えました。 原因がわかったので安心しました。^^; common.jsは、微妙ですね。 shadowboxの設置の時は、common.jsが原因で動かなかったのに 今は、shadowboxもスムーススクロールも動いています。 スムーススクロールがcommon.jsになるんでしょ？
 
#26: Posted by Author Profile Page bzbellからharuへの返信 @ March 3, 2009 [REPLY]
user-pic

>>25 haru さん

こんばんわ^^

解決してよかったですねやあ！
common.js は業者さんの趣味!? なのか、何らかの目的があってのことなのでわたしからは何とも言えませんが、prototype.js をただリネームした程度なら common.js を使わず、>>9 で記した ver1.6.0.3 の prototype.js の記述を使ったほうが良いかもですね。

 

 Post a Comment

 

コメント用フィード