05«1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.»07

プロフィール

ランキングサイト

リンク

応援してるメーカーサイト

pixiv

応援してる作品

その他

Endlessly August

ゲームやお絵かきのことを気ままに書いていくブログです

 

スポンサーサイト

--.--.--/--/--:--:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ: スポンサー広告
トラックバック: -- |  コメント: --

 

FC2ブログで画像をポップアップ表示に!

2014.02.12/Wed/01:49:16

 

 

まずはじめに。

HTMLやCSS、JavaScriptなど初心者以下の知識でやっていますので、とりあえず私にできただけでこの方法でできたらラッキーくらいに考えておいてください。

 

あとこれは、とりあえず画像がポップアップ表示すればいい人向けです

スライドショー表示やYouTubeのポップアップ表示などは出来ないと思います

そういう方は以下に出てくる参考サイトなどで調べなおしてください

また、ここでやることは全て自己責任でお願いします

動作がおかしくなった場合に備えて、正常な状態に戻せるようにバックアップしておきましょう

 

 

 

 

 

最近は新しくタブを開いて画像のみを表示するより手軽に拡大画像を見れたりするポップアップ表示が多くなって自分でもしたいと思ったのでちょっとググって頑張ってみました

 

 

使用するのは Colorbox です

 

 

colorbox

※1図

画像クリックでポップアップ

 

 

 

 

参考にしたサイトは

 

はぐれオーディオマニアの秘密

http://aupachi.blog.fc2.com/blog-entry-16.html

 

趣味の工房

http://rikuntyudady.blog101.fc2.com/blog-entry-445.html#続き

 

 

の2サイトです

基本的にはぐれオーディオマニアの秘密さんの記事に書いていることをやればできるのですが、大本のファイル内容が若干違ってたりするのでその違いと、趣味の工房さんは画像を使っての解説がわかりやすいのですが、こちらに載ってるコードでは動かなかったりと一長一短なので、足して4で割った感じにしていきたいと思います

 

 

 

まずColorboxのDownloadからファイル(colorbox-master.zip)をダウンロードして下さい

 

それを解凍すると以下のファイルが出てきます

 

 

colorbox2

※2図

 

赤枠内のexample1~example5はそれぞれポップアップ表示の仕方が違うものなのでColorboxのHPでサンプル(1図の赤枠)を確認して1つ選んで下さい

選んだもの以外は使用しないので削除してもらって結構です

私は example5 を選びましたのでこれからはexample5での説明になります

 

 

選びましたら、選んだフォルダ内の colorbox.css を開いておいてください(メモ帳)

するとこのようなのが出てくると思います

 

 colorbox3      colorbox4

 

 

左のではややこしいので、面倒ですが#で改行すると右のようになります

だけどこれは別にしてもしなくてもいいです

example1だと記述はもっと少ないですし

 

 

 

 

 

 

 

 

 

 

 

これはひとまず置いておいて、次に自分の画像ファイル置き場のURLを確認します

 

 

FC2ブログの管理画面→ファイルアップロードから適当に画像を表示させて

 

 

colorbox5

 

赤枠内のURLをコピーします(最後の/まで)

新しくつくったメモ帳にペーストしておくと後々手間が省けます

 

 

 

 

 

 

開いておいた colorbox.css に戻って、このスクリプトファイルの images/ と書いている場所をすべて先ほど確認したURLに置き換えていきます

 

全てと言っても操作一つで終わるので特にめんどくさいことはないと思います

メモ帳のメニューから編集→置換で 

 

検索する文字列 images/

置換後の文字列 URL

 

colorbox6

 

これで すべて置換 とすれば一発で終わるはずです

これを保存してメモ帳はそっとじ。

 

 

 

 

 

 

 

 

 

 

 

 

 

次に、FC2ブログへファイルをアップロードします

 

  • imagesフォルダ内の画像データ4枚
  • 先ほど書き換えたcolorbox.css
  • 2図の青枠内のファイル(「jquery.colorbox.js」「jquery.colorbox-min.js」)

 

※青枠内のファイルはそのままではアップロード出来ないので「jquery-colorbox.js」「jquery-colorbox-min.js」にリネームしてください

 

7つのファイルのアップロードが終わったら次はテンプレートの編集をします

 

 

 

する前に 自分の画像ファイル置き場のURL をペーストしていたメモ帳に以下のスクリプトをコピペしてください

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="ここへペーストjquery-colorbox-min.js"></script>
<link rel="stylesheet" type="text/css" href="ここへペーストcolorbox.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$('a[rel="gallery"],a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]').colorbox();
});
</script>

 

 

そしてここへペーストの場所に自分の画像ファイル置き場のURLを置換してください

そして、置換したものをコピーしておいてください

 

 

 

管理画面→テンプレートの編集からHTMLの編集画面で

 

 

colorbox7

 

<head>(青線)のすぐ下に先ほどのスクリプトをペーストします(赤枠)

 

そして更新をクリックして終了です

 

 

 

 

 

これでポップアップ表示できていると思います

できといてください。

 

 

初めにも言いましたが、他環境でできるかは知らん!

主に自分用のメモとして記事にしてます。

 

  

 

 

 

 

スポンサーサイト
カテゴリ: 未分類

 

この記事に対するコメント

go page top

 

コメントの投稿













管理者にだけ表示を許可する

go page top

 

トラックバック

トラックバックURL
→http://endlesslyaugust.blog45.fc2.com/tb.php/673-ee4a127b
この記事にトラックバックする(FC2ブログユーザー)
go page top

 

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