Home > スポンサー広告 > Shadowbox実装手順@質問回答


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 Comments:-

universe URL 2008-07-24 (木) 02:42

TomomiXさん、早急なお返事ありがとうございますm(__)m
早速ですが、実装させて頂きました。!(^^)!
私の記事にも書きましたが・・・。
TomomiXさんからShadowboxやYUIをDLさせて頂きuploadしたので、
間違いなくShadowboxだと思うのですが、rel属性が、LightboxでもShadowboxでもうまく?表示されるのですが・・・。
なぜでしょうヽ(~~~ )ノ ハテ?
head内のLightboxに関する記述は削除したのですが・・・。
気にしない方がいいのでしょうか?
もし、何かおわかりであれば教えて頂けるとありがたいです。
また、今回は本当にありがとうございます。( ^)o(^ )

TomomiX URL 2008-07-24 (木) 12:34

> universe さん
ご連絡どうもです。リンク先確認させていただきました。
実装がうまくいってこちらも安心しました^^
私も以前はLightboxとの出会いから始まり色々知ったので、
Lightbox実装・Highslide実装・Shadowbox実装という順です。
確かに私もShadowboxを入れたあと、前の記事で掲載した
LightboxがShadowboxで表示される現象が再現しました。
なんででしょ~かね。。
私も良く分からず、でもLightbox紹介も残しておきたかったので
別ブログ(デモ用ブログ)に移行しちゃいました。

universe URL 2008-07-24 (木) 15:37

TomomiXさん、お返事ありがとございます(^^♪
そなんですかぁ。(Lightboxの件)
今後も、ちょくちょく訪問させて頂きますのでよろしくお願いしますm(__)m

TT URL 2008-07-24 (木) 17:25

質問ではないのですが、一つ気がついた事があったのでコメントさせていただきます。
shadowbox.jsをそのまま使用するとポップアップの左上のloading画像が表示されていないようです。
Firefoxでは代替テキストだけなので大丈夫ですが、IEでは画像非表示時の枠線とアイコンが表示されてしまいます。
そこでshadowbox.jsをダウンロード後、78行目のloading.gifのパスを修正するとloading画像が表示されるようになります。

修正前 loadingImage: 'images/loading.gif',

修正後 loadingImage: 'http://*****/loading.gif',

※ *****部分は自分の環境に合わせて記述してください。

universe URL 2008-07-24 (木) 18:59

TTさん、こんばんわ
アドバイスありがとうございます。
ですが、ご指定どおりjsファイル内を編集したのですが、loadingイメージは表示されませんでした(>_<)
又、編集後uploadしなおした所Shadowbox自体が機能しなくなってしまいました(´;ェ;`)ウゥ・・・
ですので、再度、編集前のjファイルをup後テンプレートのhead内(up後のURLは変わっていませんが)
を更新したところ、Shadowboxが機能しました。
たぶん、今は、Shadowboxが機能しているかとは思うのですが・・・。

TomomiX URL 2008-07-25 (金) 01:08

> TT さん
ご指摘とご教授ありがとうございます。
早速loading.gifをフルパスで適用させました。
Version違いで色違いですが追々・・・。

> universe さん
loadingイメージが出ない原因として
1.画像をアップロードしていない
2.jsファイルをEUCで保存していない
3.更新後、キャッシュなどが残っている?(Ctrl+F5で解決)
などが考えられそうです。如何でしょうか。

universe URL 2008-07-25 (金) 10:50

TomomiXさん、何度もありがとうございますm(__)m
無事表示される様になりました。
原因は、ブログ自体を読み込む前にクリックしていた為みたいです。
しばらく時間をおいてクリックした所無事表示されました(^^;)
これは、キャッシュだったのでしょかねヽ(~~~ )ノ ハテ?
何はともあれ本当にありがとうございます。
なお、loading.gifの最新版は以下からDLして頂いても構いませんのでURLを記載しておきます。
http://blog-imgs-27.fc2.com/u/n/i/universe/loading.gif
お世話になりました。

universe URL 2008-07-25 (金) 10:56

TomomiXさん、すみませんm(__)m
loading.gifですが、同じものでした。
伏せてお詫び申し上げますm(__)m・・・。

TomomiX URL 2008-07-25 (金) 12:48

> TT さん
>> Version違いで色違いですが追々・・・。
→ Shadowbox.cssで
#shadowbox_body {background-color: #000;}
とすることで、最新版loading.gifの色と合わせました。
また、細かいですがサイトテンプレートに合わせようと
#shadowbox_nav_close(previous/next) a
#shadowbox_nav_close(previous/next) a:hover
の背景やラインを変更してみました。
この度はどうもありがとうございました^^

> universe さん
loading.gifの連絡ありがとうございます。
何とか黒背景で合わせましたのでスッキリしました。
確かにページが完全に読まれていないと該当jsも
完全に読まれていない場合もあるので、読み込み完了時に
動作しないと動く時動かないときタイミングが異なりますね。

基本このサイトでは、スクリーンショットをサムネイルで
表示している時はスムーズ拡大できるHighslideを利用し、
ページを特別にブログ内で表示させたり、複数の画像を
グループ化してスライドショー的にするのはShadowboxで
使い分けています。

最高に親切なサイトですね! URL 2008-07-25 (金) 13:14

こんにちわ。
shadowboxとmediaboxを使いたくて、三日くらい寝不足と戦い、アタマからケムリを上げながら頑張りましたが実装できず真っ白になっていましたが、この素晴らしいサイトを読んでついに念願のshadowboxが実装できました==!!他のどのサイト見てもダメでした!しかもshadowboxのHPからダウンロードしてもCSSが無い・・翻訳しても解らない・・泣きそうでした。

こんなに感激したのは何年ぶりだろう・・!愛してますTRASHは素晴らしいブログ!
少なくとも今のぼくには神ブログです。本当にありがとうございました。
ありがと~~~~~~~!!

TT URL 2008-07-25 (金) 13:21

>>TomomiXさん、こんにちは。
Shadowbox.cssの修正について書こうと思っていたら、既に解決したみたいですね。
このような細かい設定などの情報交換ができる場所があると便利ですね。

> universe さん 、実装おめでとうございます。
つたないコメントで混乱させてしまい、すいませんでした。
私が補完すべき情報はTomomiXさんが提供してくれたみたいですね。
TomomiXさんのコメントにあるようにcssも修正してloading画像と背景色を同じにすると、
さらに見栄えがよくなりますよ。

TomomiX URL 2008-07-25 (金) 13:52

> 最高に親切なサイトですね! さん(名前?件名?)
コメントありがとうございます。お役に立ててこちらも感謝です^^
Tips公開しているサイトは海外サイトだったり、掲載者が「わかる」
範囲で記述しているので「わからない」人には難しいことばかりって
サイトが多く私も苦戦した経験があり、なるべくわかりやすく書いて
いるつもりです。これからも頑張って更新しようって気持ちが増しました。
どうもです^^

> TT さん
cssいじりは多少経験あったので何とか自力でまかなえました。
再度ご連絡いただき本当にありがとうございます^^
今回のShadowboxでわかりましたが、配布元のVersionによって
ブログに書いた説明が異なってしまうから詳細説明が逆に混乱する場合も
あるので、今後の解説手法も考えないとですねぇ。
わかる範囲なら都度回答できますが、私もそんな詳しくないので第3者的な
ご助言・ご支援あるととても助かります。

ぼん URL 2008-07-26 (土) 07:47

2008-07-25 (金) 13:52投稿の> 最高に親切なサイトですね! さん(名前?件名?)です。
わざわざ返信までありがとうございます。
おっしゃる通り、素人のことまで気が回らない説明のサイトさんが多いんですよね。
いや、教わってておいてこんなことを言うのもおかしな話なのですが。。
唯一親切さを感じるサイトでした。
改めてお世話になりました。今後とも更新がんばってくださいね。


そしてイケメンですね。
仕事とか家庭がんばってください。

またきまーす^^

TomomiX URL 2008-07-26 (土) 17:55

> ぼん さん
こんばんわ。
確かに記事だけで説明するのも親切さを伝えるのも難しいですよねぇ。
まったくワケわからんサイトも一杯ありますからね。
なるべくわかりやすく親切ブログを目指したいので今後もよろしくです^^
応援ありがとうございます。

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/222-0d98decd
Listed below are links to weblogs that reference
スポンサーサイト from TRASH
Trackback from ★ビクワク初心者★アフィリエイト参入記!● 2008-07-24 (木) 02:06

Shadowbox実装してみた、けれど、実装できたかな…(タグがlightboxでもShadowbox表示が・・・)

Shadowboxに興味を持ち、いろいろ検索していた所、 FC2ブログ(blog)においても実装されている方の記事を拝見させて頂きました。 そのサイトは、... (more…)

Home > スポンサー広告 > Shadowbox実装手順@質問回答

Home > FC2blog Tips > Shadowbox実装手順@質問回答


Shadowbox実装手順@質問回答

最近Shadowbox実装に関するご質問をいただいたので、回答も兼ねて私の使用しているファイルを掲載しようかと思います。というか、的確な回答ができない(yui-utilitiesが私も見つけられず)ことから使用しているファイルを掲載するのでダウンロードしてくれ的な強引な対応になってしまいました・・・。
ブログ内で紹介しているShadowboxが、バージョンアップなどの理由でディレクトリ構成が変わっているため、Shadowbox.css/.jsファイルの正確な場所・ファイルがどれかわからない。
YUI(Yahoo! User Interface)へアクセスし、yui-utilitiesというJavaScriptファイルを探してはいるのだが、どこにも見当たらないため、ダウンロードすることができない。

よって、必要な4つのファイルを以下に掲載したいと思います。もちろん、私の環境下で動作しているので、cssなどはご自身の環境・レイアウトに合わせてカスタマイズください。css編集については別途cssリファレンスなどをご利用ください。
shadowbox.css
shadowbox.js
shadowbox-yui.js
yui-utilities.js
当然ですが、各ファイルを開き「名前を付けて保存」をし、ローカルに保存後、ご自身のブログでアップロードを行ってくださいね。もちろん、保存時のテキストは「EUC」で保存ください。

ファイルをローカル保存後、ブログのファイルアップロードが完了しましたら、以下の実装手順をご参照の上、HTMLに必要な記述を行い、Shadowboxの対象にしたい画像に都度記述をしてください。詳細な実装手順については以下参照ください。
Shadowbox実装手順
スポンサーサイト

 Comments:14

universe URL 2008-07-24 (木) 02:42

TomomiXさん、早急なお返事ありがとうございますm(__)m
早速ですが、実装させて頂きました。!(^^)!
私の記事にも書きましたが・・・。
TomomiXさんからShadowboxやYUIをDLさせて頂きuploadしたので、
間違いなくShadowboxだと思うのですが、rel属性が、LightboxでもShadowboxでもうまく?表示されるのですが・・・。
なぜでしょうヽ(~~~ )ノ ハテ?
head内のLightboxに関する記述は削除したのですが・・・。
気にしない方がいいのでしょうか?
もし、何かおわかりであれば教えて頂けるとありがたいです。
また、今回は本当にありがとうございます。( ^)o(^ )

TomomiX URL 2008-07-24 (木) 12:34

> universe さん
ご連絡どうもです。リンク先確認させていただきました。
実装がうまくいってこちらも安心しました^^
私も以前はLightboxとの出会いから始まり色々知ったので、
Lightbox実装・Highslide実装・Shadowbox実装という順です。
確かに私もShadowboxを入れたあと、前の記事で掲載した
LightboxがShadowboxで表示される現象が再現しました。
なんででしょ~かね。。
私も良く分からず、でもLightbox紹介も残しておきたかったので
別ブログ(デモ用ブログ)に移行しちゃいました。

universe URL 2008-07-24 (木) 15:37

TomomiXさん、お返事ありがとございます(^^♪
そなんですかぁ。(Lightboxの件)
今後も、ちょくちょく訪問させて頂きますのでよろしくお願いしますm(__)m

TT URL 2008-07-24 (木) 17:25

質問ではないのですが、一つ気がついた事があったのでコメントさせていただきます。
shadowbox.jsをそのまま使用するとポップアップの左上のloading画像が表示されていないようです。
Firefoxでは代替テキストだけなので大丈夫ですが、IEでは画像非表示時の枠線とアイコンが表示されてしまいます。
そこでshadowbox.jsをダウンロード後、78行目のloading.gifのパスを修正するとloading画像が表示されるようになります。

修正前 loadingImage: 'images/loading.gif',

修正後 loadingImage: 'http://*****/loading.gif',

※ *****部分は自分の環境に合わせて記述してください。

universe URL 2008-07-24 (木) 18:59

TTさん、こんばんわ
アドバイスありがとうございます。
ですが、ご指定どおりjsファイル内を編集したのですが、loadingイメージは表示されませんでした(>_<)
又、編集後uploadしなおした所Shadowbox自体が機能しなくなってしまいました(´;ェ;`)ウゥ・・・
ですので、再度、編集前のjファイルをup後テンプレートのhead内(up後のURLは変わっていませんが)
を更新したところ、Shadowboxが機能しました。
たぶん、今は、Shadowboxが機能しているかとは思うのですが・・・。

TomomiX URL 2008-07-25 (金) 01:08

> TT さん
ご指摘とご教授ありがとうございます。
早速loading.gifをフルパスで適用させました。
Version違いで色違いですが追々・・・。

> universe さん
loadingイメージが出ない原因として
1.画像をアップロードしていない
2.jsファイルをEUCで保存していない
3.更新後、キャッシュなどが残っている?(Ctrl+F5で解決)
などが考えられそうです。如何でしょうか。

universe URL 2008-07-25 (金) 10:50

TomomiXさん、何度もありがとうございますm(__)m
無事表示される様になりました。
原因は、ブログ自体を読み込む前にクリックしていた為みたいです。
しばらく時間をおいてクリックした所無事表示されました(^^;)
これは、キャッシュだったのでしょかねヽ(~~~ )ノ ハテ?
何はともあれ本当にありがとうございます。
なお、loading.gifの最新版は以下からDLして頂いても構いませんのでURLを記載しておきます。
http://blog-imgs-27.fc2.com/u/n/i/universe/loading.gif
お世話になりました。

universe URL 2008-07-25 (金) 10:56

TomomiXさん、すみませんm(__)m
loading.gifですが、同じものでした。
伏せてお詫び申し上げますm(__)m・・・。

TomomiX URL 2008-07-25 (金) 12:48

> TT さん
>> Version違いで色違いですが追々・・・。
→ Shadowbox.cssで
#shadowbox_body {background-color: #000;}
とすることで、最新版loading.gifの色と合わせました。
また、細かいですがサイトテンプレートに合わせようと
#shadowbox_nav_close(previous/next) a
#shadowbox_nav_close(previous/next) a:hover
の背景やラインを変更してみました。
この度はどうもありがとうございました^^

> universe さん
loading.gifの連絡ありがとうございます。
何とか黒背景で合わせましたのでスッキリしました。
確かにページが完全に読まれていないと該当jsも
完全に読まれていない場合もあるので、読み込み完了時に
動作しないと動く時動かないときタイミングが異なりますね。

基本このサイトでは、スクリーンショットをサムネイルで
表示している時はスムーズ拡大できるHighslideを利用し、
ページを特別にブログ内で表示させたり、複数の画像を
グループ化してスライドショー的にするのはShadowboxで
使い分けています。

最高に親切なサイトですね! URL 2008-07-25 (金) 13:14

こんにちわ。
shadowboxとmediaboxを使いたくて、三日くらい寝不足と戦い、アタマからケムリを上げながら頑張りましたが実装できず真っ白になっていましたが、この素晴らしいサイトを読んでついに念願のshadowboxが実装できました==!!他のどのサイト見てもダメでした!しかもshadowboxのHPからダウンロードしてもCSSが無い・・翻訳しても解らない・・泣きそうでした。

こんなに感激したのは何年ぶりだろう・・!愛してますTRASHは素晴らしいブログ!
少なくとも今のぼくには神ブログです。本当にありがとうございました。
ありがと~~~~~~~!!

TT URL 2008-07-25 (金) 13:21

>>TomomiXさん、こんにちは。
Shadowbox.cssの修正について書こうと思っていたら、既に解決したみたいですね。
このような細かい設定などの情報交換ができる場所があると便利ですね。

> universe さん 、実装おめでとうございます。
つたないコメントで混乱させてしまい、すいませんでした。
私が補完すべき情報はTomomiXさんが提供してくれたみたいですね。
TomomiXさんのコメントにあるようにcssも修正してloading画像と背景色を同じにすると、
さらに見栄えがよくなりますよ。

TomomiX URL 2008-07-25 (金) 13:52

> 最高に親切なサイトですね! さん(名前?件名?)
コメントありがとうございます。お役に立ててこちらも感謝です^^
Tips公開しているサイトは海外サイトだったり、掲載者が「わかる」
範囲で記述しているので「わからない」人には難しいことばかりって
サイトが多く私も苦戦した経験があり、なるべくわかりやすく書いて
いるつもりです。これからも頑張って更新しようって気持ちが増しました。
どうもです^^

> TT さん
cssいじりは多少経験あったので何とか自力でまかなえました。
再度ご連絡いただき本当にありがとうございます^^
今回のShadowboxでわかりましたが、配布元のVersionによって
ブログに書いた説明が異なってしまうから詳細説明が逆に混乱する場合も
あるので、今後の解説手法も考えないとですねぇ。
わかる範囲なら都度回答できますが、私もそんな詳しくないので第3者的な
ご助言・ご支援あるととても助かります。

ぼん URL 2008-07-26 (土) 07:47

2008-07-25 (金) 13:52投稿の> 最高に親切なサイトですね! さん(名前?件名?)です。
わざわざ返信までありがとうございます。
おっしゃる通り、素人のことまで気が回らない説明のサイトさんが多いんですよね。
いや、教わってておいてこんなことを言うのもおかしな話なのですが。。
唯一親切さを感じるサイトでした。
改めてお世話になりました。今後とも更新がんばってくださいね。


そしてイケメンですね。
仕事とか家庭がんばってください。

またきまーす^^

TomomiX URL 2008-07-26 (土) 17:55

> ぼん さん
こんばんわ。
確かに記事だけで説明するのも親切さを伝えるのも難しいですよねぇ。
まったくワケわからんサイトも一杯ありますからね。
なるべくわかりやすく親切ブログを目指したいので今後もよろしくです^^
応援ありがとうございます。

Comment Form

 Trackback+Pingback:1

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/222-0d98decd
Listed below are links to weblogs that reference
Shadowbox実装手順@質問回答 from TRASH
Trackback from ★ビクワク初心者★アフィリエイト参入記!● 2008-07-24 (木) 02:06

Shadowbox実装してみた、けれど、実装できたかな…(タグがlightboxでもShadowbox表示が・・・)

Shadowboxに興味を持ち、いろいろ検索していた所、 FC2ブログ(blog)においても実装されている方の記事を拝見させて頂きました。 そのサイトは、... (more…)

Home > FC2blog Tips > Shadowbox実装手順@質問回答

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。