[↑PageTop]
«
»
ブログ検索 タグ検索
申し訳ありません。 該当する記事は削除、又は、公開中止の可能性があります。
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comment

Post

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

ブログの記事に貼り付けてある画像。
ブログを華やかにしてくれる大切なアイテムな訳ですがもう少し見栄え良くと言う事で、Fancy Zoomとい、ビュアー?を入れてみる事にしました。
FC2ブログへの導入方法と、カスタマイズ項目も解る範囲で説明したいと思います。

ビュアーの候補はいくつかあったのですが、Fancy Zoomは画像へのリンクを一つ一つ修正しなくても良い点で、導入決定となりました。
機能だけなら、highslide jsの方が高機能なんですけどね。

何はなくとも、まずはダウンロードから。
公式ホームページ
Fancy Zoom
へ行って、FancyZoom 1.1.zip をダウンロード。

ダウンロードしたFancyZoom 1.1.zipを解凍して中身を見てみると、
/
├__MACOSX       (MACOSX用のようなので放置)
└FancyZoom 1.1    (こっちを使用)
 ├images-global    (画像)
 │└zoom        (必要な画像は全てこの中 25個の画像ファイル)
 └js-global       (プログラム本体。2本のJavascriptでした。)

FancyZoom 1.1というフォルダーがあります。
このフォルダーの中身が本体のようです。


ホームページの説明では、そのフォルダーの中身をFTPでアップロードして、
使用したいページの<head>~</head>の間に、

<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>


を追加。

次に、<body>タグに、onload="setupZoom()"要素を追加。

そうすると、
<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>
と言った、画像への直接リンクが、zoomするようになるらしい。


なるほど。

ローカルにファイルを置いて試してみると、「こいつ・・・動くぞ!」
でも、使いたいのはFC2ブログの中です。
FTPで、フォルダ構造を維持してアップロードする事は出来ません。

仕方がないので、Fancy Zoomのプログラムを眺めてみる事にしました。
結構、ソースの中にいろいろとコメントが書いてあったりするんですよ。

var zoomImagesURI = '/images-global/zoom/'; // Location of the zoom and shadow images
お~やっぱりちゃんと書いてあるじゃん!
/images-global/zoom/の部分を、自分の画像をアップロードしたフォルダーにしてやればいいのね。

その上には、下記のような設定項目もありました。(違ってたらごめん)

var includeCaption = true; // 表題を付けるか? true = 付ける
var zoomTime = 5; // アニメーションの時間(ミリ秒)
var zoomSteps = 15; // アニメーションのフレーム数
var includeFade = 0; // 半透明機能を使うか 1=使う
var minBorder = 90; // 大きな画像をズームした時、画面の端からどのくらい空けるのか
var shadowSettings = '0px 5px 25px rgba(0, 0, 0, '; // 一部の対応ブラウザー用の影の設定


ここまで解れば、早速作業です。
1.画像ファイル25個を全てアップロード
2.画像アドレスを確認。
  私の場合は、http://blog-imgs-24.fc2.com/f/e/r/ferio68k/画像ファイル名
  と言うアドレスでした。
3.var zoomImagesURI = '/images-global/zoom/';
  を、先程調べたアドレスに書き換える。
  var zoomImagesURI = 'http://blog-imgs-24.fc2.com/f/e/r/ferio68k/';
4.書き換えたら、Javascriptファイルもアップロード。
5.Javascriptのアドレスも確認。
  私の場合は、http://blog-imgs-24.fc2.com/f/e/r/ferio68k/FancyZoom.js
  と言ったアドレスになります。

6.ブログのテンプレートを書き換える。
  書き換える箇所は、公式ホームページに説明のあった通りの2カ所。
  <script src="/js-global/FancyZoom.js" type="text/javascript"></script>
  は、ちゃんと自分のアップロードしたスクリプトのアドレスに変える事。
  <script src="http://blog-imgs-24.fc2.com/f/e/r/ferio68k/FancyZoom.js" type="text/javascript"></script>
  同じように、
  <script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
  の方も書き換えてください。
  あとは、<body>タグに、onload="setupZoom()"要素を追加してやれば完成

後は、画像を貼り付けるだけで、zoomしてくれるようになります。

注意:表題をつけたい場合は、<a ..... title="表題"> ~ </a> としてやらないと表示されません。


FC2ブログでファイルをアップロードすると、
<a ..... ><img ... alt="表題"/></a>
と言うタグが挿入されます。

いちいち書き換えれば良いのでしょうが、面倒なので、何とか修正したいですね。

以下スクリプトの改造となりますので、個人の責任で行ってください。何があっても私は責任取れませんよ。
覚悟を決めたら、つづきをどうぞ。


【 追記 】
さて、表題を、title要素で指定するんだから、まずは、プログラム中でその部分を探して見る事にします。「title」で検索。

if (from.getAttribute('title') && includeCaption) {
    // Yes, there's a caption, set it up
    document.getElementById(zoomCaption).innerHTML = from.getAttribute('title');
} else {
    document.getElementById(zoomCaption).innerHTML = ""
}

見つかったのは、FancyZoom.js の2カ所だけ。ご丁寧に、caption, set it upなんて、コメントまで記述されてます。いきなりビンゴみたいですね。

ここで、title要素が見つからなかったら、<a>タグの下位の<img>タグのalt要素の値を使用するように、プログラムを追加してみます。

if (from.getAttribute('title') && includeCaption) {
  // Yes, there's a caption, set it up
  document.getElementById(zoomCaption).innerHTML = from.getAttribute('title');
} else {
  var myImgElements = from.getElementsByTagName("img");
  if (myImgElements[0].getAttribute('alt') && includeCaption) {
    document.getElementById(zoomCaption).innerHTML = myImgElements[0].getAttribute('alt');
  } else {

    document.getElementById(zoomCaption).innerHTML = ""
  }
}

赤い部分が、追加・修正した箇所です。
早速アップロード!


<a>タグに、タイトルを追加
表題
<a href="画像アドレス" title="タイトル指定">
<img src="サムネイルアドレス" alt="表題" />
</a>



FC2ブログのファイル挿入そのまま
表題
<a href="画像アドレス">
<img src="サムネイルアドレス" alt="表題" />
</a>


Yes!! ちゃんと imgタグに設定された alt要素の内容を表示しました。

これで、ファイル管理で画像をアップロードする時にタイトル打ち込むだけで、ボタンをおして、画像を挿入するだけで表題が付くので楽々ですね。
関連記事

Comment

Post

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


HOME : TOP

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