さくらのブログに「FancyZoom」を導入する

さくらのブログに所謂LightBox風の「FancyZoom」を導入してみた。LightBoxは過去のHTMLタグを改変する必要があり、非常に面倒であるが、「FancyZoom」は何ら変更の必要はない。この点が導入の決め手となった。なお、対象はデスクトップレイアウトのみ。

表示例

↓ さくらのブログの画像アップローダーを使用して画像を貼り付け。HTMLタグには何ら手を加えていない。

IMG_20160101_124035.jpg

Jkun Blog_001.jpg

Jkun Blog_002.jpg

導入手順

スクリプトのダウンロードと解凍
cabel.name: FancyZoom 1.1 からスクリプト (zipファイル) をダウンロードする。ダウンロードが終わったら解凍する。

ファイルの構成を確認する
FancyZoom 1.1
  + images-global
    + zoom
  + js-global
    - FancyZoom.js
    - FancyZoomHTML.js

FancyZoom.js の44行目を修正する
↓ 表示用部品画像ファイル群のディレクトリへのパスを通す。

var zoomImagesURI   = 'http://jkunblog.com/FancyZoom 1.1/images-global/zoom/'; // Location of the zoom and shadow images

FancyZoom 1.1 ディレクトリをアップロードする
FTPソフトを使用してサーバーへアップロードする。

デザイン> PC> HTML を編集する
さくらのブログの管理画面で、HTML編集を行う。
↓ jsファイル2個のロードと<body>タグ内からの関数呼び出しを追加する。

<!--FancyZoom-->
<script src="http://jkunblog.com/FancyZoom 1.1/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="http://jkunblog.com/FancyZoom 1.1/js-global/FancyZoomHTML.js" type="text/javascript"></script>
<!--/FancyZoom-->
</head>
<body onload="setupZoom()">

以上で作業は完了。過去の画像に関しても反映されるので、大いに助かるスクリプトである。

admin
カテゴリ:ブログサービス
2016/01/14 13:45 | コメント (0)
◎この記事へのコメントは 0 件です。コメント欄を表示しますか?
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ