ひねもす、パシャ!

鳥にかぎらず、風景・植物など、気が向いたら、なんでも撮るのですが~^^;
  | MAIN HP | SUB HP | みんカラ | *admin|
Prev  ««« [ 2017/10 ]  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  31   »»»  Next

スポンサーサイト

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

FC2で Highslide.js(Ⅱ)

*** 前記事の内容 ***
       1. Highslide.js のダウンロード 
       2. Highslide.js の解凍とフォルダー内容  
       3. zoomin.cur , zoomout.cur の変更 
       4. loader.white.gif の名前の変更

【ここから、前回記事(3,4)を重複引用しています・・・!?】
 
  3. zoomin.cur , zoomout.cur
                              FC2ブログの仕様

FC2のアップローダーの仕様上、「CUR(カーソル拡張子)」 は、使用不可なので、拡張子を変更してFC2ブログのフォルダーにアップします。
 アップできるファイルの制限とフォルダーが作成できないことが ”hislide.js” の使い勝手を難しくしているようです。

 拡張子の名前は、gif でもイイのでしょうが~? gif では、Firefox や Google Chrome では、綺麗に表示できたのですが、
I E では、同名ファイルでもいるのでしょうか? Windows のカーソル表示となるものがありました。

 因って、変更する拡張子名は、「 .ico 」 とします・・・・・。 

イメージを読み込んで、アイコン保存の出来るソフトを使用して
 zoomin.ico , zoomout.ico  を作成してください?


*** 注: 他に制限ファイルもアップできる場所を用意できる場合は、この項は読み飛ばしてください!!
*** 例えば、FC2 HomePage の登録がされていれば、
   highslide のフォルダーのGraphics ファルダーまるごと HomePage に置けば、
いろいろな変更をしなくて済ませることが出来ます。


  4. loader.white.gif の名前の変更


loader.white.gif ⇒⇒⇒ loaderwhite.gif .(ドット、ピリオド)を削除するだけの変更です。 ^^;
FC2ブログでは、ファイル名にドット(ピリオド)は使えないようです。(アンダーバーでもOKです。)




これで、準備は完了です。
あとは、highslide.js , highslide.css , HTML ファイルの書き換えです。
基本的には、すべてのファイルがFC2ブログの同一指定箇所にアップされるので、highslide.js内部のファイルの居場所を指定しなおすための作業です。



*** highslide.js , highslide.css , FC2 BLOG Template の変更をする前に
バックアップをして、トラブルの回避に努めてください。
当方は、トラブルの責任は負いかねます~! 自己責任で・・・・・^^;

 5. highslide.js の設定変更・修正

  □ highslide.js (抜粋) ・・・ コメント文字(緑色) 修正文字(青色)挿入文字(黄色)削除文字(橙色)
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

50
51


787
788
/**
* Name: Highslide JS
* Version: 4.1.12 (2011-03-28)
* Config: default
* Author: Torstein Honsi
* Support: www.highslide.com/support
* License: www.highslide.com/#license
*/

if (!hs) { var hs = {
// Language strings
lang : {
cssDirection: 'ltr', 
loadingText : 'Loading...',
loadingTitle : 'Click to cancel',
focusTitle : 'Click to bring to front',
fullExpandTitle : 'Expand to actual size (f)',
creditsText : 'Powered by Highslide JS',
creditsTitle : 'Go to the Highslide JS homepage',
restoreTitle : 'Click to close image, click and drag to move. Use arrow keys for next and previous.'
}
// See http://highslide.com/ref for examples of settings
graphicsDir : 'highslide/graphics/',   ⇒⇒⇒http://blog-imgs-**.fc2.com/*/*/*/*******/
expandCursor : 'zoomin.cur', // null disables   (拡張子変更)⇒⇒⇒ 'zoomin.ico'
restoreCursor : 'zoomout.cur', // null disables  (拡張子変更)⇒⇒⇒ 'zoomout.ico'
expandDuration : 250, // milliseconds
restoreDuration : 250,
marginLeft : 15,
marginRight : 15,
marginTop : 15,
marginBottom : 15,
zIndexCounter : 1001, // adjust to other absolutely positioned elements
loadingOpacity : 0.75,
allowMultipleInstances: true,
numberOfImagesToPreload : 5,
outlineWhileAnimating : 2, // 0 = never, 1 = always, 2 = HTML only
outlineStartOffset : 3, // ends at 10
padToMinWidth : false, // pad the popup width to make room for wide caption
fullExpandPosition : 'bottom right',
fullExpandOpacity : 1,
showCredits : true, // you can set this to false if you want
creditsHref : 'http://highslide.com/',
creditsTarget : '_self',
enableKeyListener : true,
openerTagNames : ['a'], // Add more to allow slideshow indexing

dragByHeading: true,
minWidth: 200,
minHeight: 200,
allowSizeReduction: true, // allow the image to reduce to fit client size. If false, this overrides minWidth and minHeight
outlineType : 'drop-shadow', // set null to disable outlines ⇒ 'rounded-white'
// END OF YOUR SETTINGS


preloadGraphic : function () {
var src = hs.graphicsDir + (hs.outlinesDir || "outlines/")+ this.outlineType +".png";

   *** 12-19行目 : アイコン上にマウスが来た時のポップアップの表示文字の変更です。
              デフォルトは英語表記です。  ・・・・・・そのまま、英語表記でイイかも~!?


 6. highslide.css の設定変更・修正

  □ highslide.css (抜粋) ・・・ コメント文字(緑色) 修正文字(青色)挿入文字(黄色)削除文字(橙色)
1
2
3
4


64
65
66
67
68
69
70


82


126


185

195

205

332

383

497

519


538
539

618
619

626
627

636
637


762
763
764
765
766

779

822
823
824
825

839


886
/**
* @file: highslide.css
* @version: 4.1.9
*/



a.highslide-full-expand {
background: url(graphics/fullexpand.gif) no-repeat;
display: block;
margin: 0 10px 10px 0;
width: 34px;
height: 34px;
}


background-image: url(graphics/loader.white.gif);  ⇒ url(loaderwhite.gif)


background: url(graphics/close.png);


    background: url(graphics/controlbar-white.gif) 0 -90px no-repeat;

    background: url(graphics/controlbar-white.gif) right -90px no-repeat;

    background-image: url(graphics/controlbar-white.gif);

    background: url(graphics/resize.gif) no-repeat;

    background-image: url(graphics/closeX.png);

    background-image: url(graphics/controlbar-black-border.gif);

    background: url(graphics/icon.gif) no-repeat 0 1px;


.controls-in-heading .highslide-controls a {
    background-image: url(graphics/controlbar-white-small.gif);

.text-controls li {
    background-image: url(graphics/controlbar-text-buttons.png);

.text-controls a {
    background: url(graphics/controlbar-text-buttons.png) no-repeat;

.text-controls a span {
    background: url(graphics/controlbar-text-buttons.png) no-repeat;


.highslide-thumbstrip-horizontal .highslide-scroll-up div {
    margin-bottom: 10px;
    cursor: pointer;
    background: url(graphics/scrollarrows.png) left center no-repeat;
    height: 42px;

    background: url(graphics/scrollarrows.png) center right no-repeat;

.highslide-thumbstrip-vertical .highslide-scroll-up div {
    margin-left: 10px;
    cursor: pointer;
    background: url(graphics/scrollarrows.png) top center no-repeat;

    background: url(graphics/scrollarrows.png) bottom center no-repeat;


} // [EOF]
    *** お願い: 多分、訂正漏れはない筈ですが~? みつけられたら、こっそりとご連絡ください~^^;

 7. highslide 関連ファイルのアップロード
 
GRAPHICS フォルダー内のファイルをすべてと、highslide.js、highslide.css、zoomin.ico、zoomout.ico を
「 FC2 BLOG 管理画面 」 ⇒ 「ツール」 ⇒ 「ファイルアップロード」 から、面倒でしょうが・・・・・(^。^;)
ひとつひとつ、アップロードしてください。 アップロードする毎にアップロード先が赤い文字で表示されます。
 アップロード先をメモしておいてください。 次項目で重要です・・・・。

 8. FC2 テンプレートの修正

「 FC2 BLOG 管理画面 」 ⇒ 「 環境設定 」 ⇒ 「テンプレートの設定」 ⇒ 「 編集 」
「 HTML 」 編集画面にて、<head> ****** </head> 部分に、下記の項目を挿入する。

黄色の箇所に、前項でメモしたアップロード先を入れてください。 
highslide.js、highslide.css に記入したアップロード先も間違いないかの確認を~!?


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highslide JS</title>

<script type="text/javascript" src="http://blog-imgs-**.fc2.com/*/*/*/*******/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="http://blog-imgs-**.fc2.com/*/*/*/*******/highslide.css" />
<script type="text/javascript">
    hs.graphicsDir = 'http://blog-imgs-**.fc2.com/*/*/*/*******/'; 
    hs.outlineType = 'rounded-white';
</script>

 9. ブログ上での使用方法

 記事の作成時に、画像項目部分を下記のように(青色表示部分)書き加えるとhighslide 表示するはずです~!? 
         *** ご注意 : 下記の項目をコピペすると < が全角で入れてあるのでエラーになります。***


<a id="thumb1" href="投稿画像ファイル名" class="highslide" onclick="return hs.expand(this)"
<img src="投稿画像縮小ファイル名" alt="Highslide JS"
title="Click to enlarge"
height="100"( ⇚ 縮小画像サイズ ⇒ ) width="46" /></a>

*** 上の画像表示文に続けて、下記の文を付け足すと説明文も表示できます。 ***
<div class="highslide-caption">

ここに投稿画像の説明を記入すると、拡大画像の下部に表示されます・・・。
</div>

Highslide JS   
【SAMPLE】 右画像クリックで表示します。 
ここに投稿画像の説明を記入すると、拡大画像の下部に表示されます・・・。


以上で、完了のハズです~? 後追いの記事なので、書き漏れがあるかもしれませんがご勘弁を・・・・・^^;
 何かの参考になればとの思いのMEMOです~! でも、うちのは現在稼働中です~?
関連記事
スポンサーサイト

■■■ コメント ■■■ 

◆◆◆トラックバック◆◆◆

トラックバック URL : http://yurari2010.blog98.fc2.com/tb.php/92-425a9f15

■■ コメントの投稿 ■■








.....コメントの修正・削除をする場合に必要です。
管理者にだけ表示を許可する

プロフィール

T.Honbo

Author:T.Honbo
残り少ない人生、カメラ片手に
孫とのんびり気ままに~^^;

最新記事

最新コメント

openclose

TREE リンクリスト

TREE カテゴリーリスト

openclose

TREE タグリスト

検索フォーム

月別アーカイブ

最新トラックバック

RSSリンクの表示

fc2 info

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