スポンサーサイト

--年--月--日 --:--

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

「Highslide JS」 FC2ブログ 導入方法! スライドショー

2010年03月21日 16:51

※ バージョンは4.1.5として書いてる為、行数などが違ったりしますm(_ _)m
   最新(2010年3月付)の4.1.8を使用しても問題ありません。



(以下の手順でうまく動作しない場合や、分からない場合は、
コメントにて質問していただければ出来る限りお答えします)


(1)Highslide JSをダウンロード&解凍
まずは本サイトで以下の手順(画像の左から)でダウンロードします。
http://highslide.com/

TOPページの「Down Load!」を押下 バージョンを選択して「Download now!」を押下 迷わず「Yes」ボタンを押下

保存したファイルを解凍。

解凍するとフォルダ内にindex.htmというのがあるのですが、
このhtmlからHighslideのサンプルを色々見る事ができます!
自分が好きなやつを見つけて自分なりにカスタマイズしちゃいましょー!

サンプル実行画面で「ソースの表示」とやれば、
どう書けば良いのか書いてあります^^
英語ですがw


(2)画像ファイルをアップロード
解凍すると、highslideフォルダ内にgraphicsフォルダがあるので
その中にある画像を全てアップロードします。
また、outlinesフォルダ内にある画像も全てアップロードします。

ポイント!
『zoomin.cur』と『zoomout.cur』はFC2ではアップロード出来ない拡張子のため、
「.ico」に変更してからアップロードします。

※拡張子を変更しないでアップロードする方法はこちらの5を参照


(3)JavaScriptファイルの編集
一般的なHighslideであれば、『highslide.js』を編集。
このブログでも使われているものを使いたい場合は、『highslide-with-gallery.js』を編集。
ポイント!
両方とも編集する箇所・内容は一緒です。

①56行目辺り。
アップロードした画像の絶対パスに変更します。
graphicsDir : 'highslide/graphics/',
     ↓
graphicsDir : 'http://blog-imgs-XX.fc2.com/△/△/△/○○/',

『.ico』に変更してアップロードしたのでこちらも変更します。
expandCursor : 'zoomin.cur',
     ↓
expandCursor : 'zoomin.ico',

expandCursor : 'zoomout.cur',
     ↓
expandCursor : 'zoomout.ico',

※『.ico』に変更しない方法を行った場合は以下のように変更する必要があります。
expandCursor : 'zoomin.cur',
     ↓
expandCursor : 'http://****.web.fc2.com/highslide/
zoomin.cur',


expandCursor : 'zoomout.cur',
     ↓
expandCursor : 'http://****.web.fc2.com/highslide/
zoomout.cur',



※②と③は『.ico』に変更しない方法をとった方のみ!変更した方は不要!
②737行目辺り
var cur = hs.createElement('img', { src: hs.graphicsDir + hs.restoreCursor });
     ↓
var cur = hs.createElement('img', { src: hs.restoreCursor });

③2028行目辺り
hs.styleRestoreCursor = window.opera ? 'pointer' : 'url('+ hs.graphicsDir + hs.restoreCursor +'), pointer';
     ↓
hs.styleRestoreCursor = window.opera ? 'pointer' : 'url('+ hs.restoreCursor +'), pointer';

④971行目
var src = hs.graphicsDir + (hs.outlinesDir || "outlines/")+ this.outlineType +".png";
     ↓
var src = hs.graphicsDir + this.outlineType +".png";

編集が終わったら保存。

(4)CSSファイルの編集
CSS内で使用している画像のファイルのパスを全て自分のパスに合わせて変更する。
(url(~ で書かれている部分)全てです。
url(graphics/******.xxx)
     ↓
url(http://blog-imgs-XX.fc2.com/△/△/△/○○/xxxx.ooo)

編集が終わったら保存。

(5)編集したJavaScriptファイル&CSSファイルをアップロードする

(6)FC2のテンプレート編集
<head>~</head>の間に以下の記述を追加。
<script type="text/javascript" 
src="http://blog-imgs-XX.fc2.com/△/△/△/○○○○/highslide.js
または highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="http://
blog-imgs-XX.fc2.com/△/△/△/○○○○/highslide.css" />

<script type="text/javascript">
hs.graphicsDir = 'http://blog-imgs-XX.fc2.com/△/△/△/○○○○/';
hs.dimmingOpacity = 0.75; // 透明度設定(0.00~1.00で指定)
     ↓
これ以降はそれぞれのサンプルソースを貼り付ければOK!
</script>



これで編集は終了!
お疲れさまでしったー!!

あとはいつも通り、記事を書いて画像を貼って以下のように編集すればHighslideが動き出します^^

(7)画像<a>~</a>の属性変更
<a href="画像のURL" 
class="highslide" onclick="return hs.expand(this)">
<img src="サムネイル画像のURL" alt="○○" title="◇◇" /> </a>


これで完了ですっ!
自分のブログでやってみたけどうまくいかなかった時は気楽に
コメントしていただければお答え出来る範囲でお答えします(・Д・#)

MHF・攻略ブログクリックして頂けるとマンモスうれぴー(≧Д≦)


コメント

  1. セツナ | URL | A1vz8dvw

    Re: 「Highslide JS」 FC2ブログ 導入方法! スライドショー

    丁寧に説明して頂けたおかげで、とても分かりやすかったです
    ありがとうございます。

    ブログパーツから「Flashを囲んでいるタグ<span><dir>」を
    探してみたのですが、見つかりませんでした。

    自分なりに色々試してみましたが、どれも駄目だったので
    諦めて、このまま利用していこうと思います。

    ありがとうございました。

  2. | URL | W4gcG/Bk

    Re: タイトルなし

    初めまして^^


    これは・・・

    ちょっと難しいですけどHighslide jsのJavaScriptで解決はできます。
    でもFlashの上に表示というわけではなく、
    Flashを消してHighslideを表示される方法です。

    下記、青文字をJavaScriptに含ませてみてください。
    var id = "flash0";
    の部分はFlashを囲んでいるタグ<span>か<dir>などのIDに変えてください。


    もしエラーが出たり、うまくいかなかったりしたらまた気楽にコメントしてくださいヽ(=´▽`=)ノ


    hs.graphicsDir = 'lib/highslide/graphics/';
    hs.align = 'left';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'rounded-white';
    hs.wrapperClassName = 'white';
    hs.fadeInOut = true;
    //hs.dimmingOpacity = 0.75;


    // 画像クローズした後に呼ばれる
    hs.Expander.prototype.onAfterClose = function(sender){ 
    var id = "flash0";
    if($(id) != null){
    $(id).style.visibility = "visible";
    }
    }

    // 大きな画像を表示時に呼ばれる
    hs.Expander.prototype.onInit = function(sender){ 
    var id = "flash0";
    if($(id) != null){
    $(id).style.visibility = "hidden";
    }
    }

  3. セツナ | URL | A1vz8dvw

    はじめまして。

    Highslide JSを導入してみたのですが
    プラグインに設置したFlashの下に画像が表示されてしまいます。

    色々自分なりに調べてみたのですが
    解決策は見つからず・・・。

    解決策があるなら教えて欲しいです
    よろしくお願いします。

  4. | URL | W4gcG/Bk

    Re: Re: 「Highslide JS」 FC2ブログ 導入方法! スライドショー

    おぉそれは良かったです^^
    これで、しゃいさんもhighslideでブログがパワーアップしますね♪

  5. しゃい | URL | -

    Re: 「Highslide JS」 FC2ブログ 導入方法! スライドショー

    丁寧な返信ありがとうございます!
    お陰さまでなんとかできました!
    本当にありがとうございました!

  6. | URL | W4gcG/Bk

    Re: Re: 「Highslide JS」 FC2ブログ 導入方法! スライドショー

    はじめまして^^

    ここは分かりにくかったですね・・・申し訳ないです。。
    早速ですが、説明しますね。

    「それぞれのサンプルソース」という意味ですが、
    これは解凍したフォルダにある「index.htm」の中にある
    それぞれのサンプルのソースってことです。

    まず「index.htm」を開いて色々サンプルがあるので
    自分で好みのを見つけてください♪


    このブログでは標準の「Highslide JS core(ただ画像が拡大するやつ)」と、
    自分が使ってる「With Gallery」内にある「Mini gallery hidden
    under one thumbnail, dimming page background」
    ↑バックが暗くなって拡大するやつです。
    の説明になっています。

    ですが、(1)~(5)の下準備が出来ていれば
    (6)で貼り付けるソースを変えるだけで
    上記2つ以外の機能にも切り替えられるので
    「それぞれのソース」と書いています。


    前おきが長くなってしまいましたが・・・それぞれのソースって所に何を書けばいいのか、
    以下手順を書いておきますね。
    (※With Galleryの「Gallery example with white design」のソースを使っての説明となります)


    ※スクリプトのアラームがでるかもですが許可してOKです。

    ①「index.htm」の「Gallery example with white design」をクリックして開きます。

    ②3枚画像がある画面が開くのでその画面内で、
     「右クリック」→「ソースの表示」
     
    ③ソースが表示されたら、21行目を注目。
     (6)の説明で書いてある『hs.graphicsDir』とかが見つかると思います。
     ここの部分(<script>~</script>まで)をFC2テンプレートに貼り付ければOKです!
     
     hs.graphicsDirは説明で書いてある通り、アップロード先のURLに書き直さないとダメです。
     

    説明は以上となります!

    また分からなかったり、うまく動作しない場合などは気楽にコメントしてください(・Д・#)
    慌てずに一つずつやっていきましょうー♪

  7. しゃい | URL | -

    Re: 「Highslide JS」 FC2ブログ 導入方法! スライドショー

    はじめまして。
    質問なんですが、(6)の

    これ以降はそれぞれのサンプルソースを貼り付ければOK!

    というところの、それぞれのサンプルソースというのがよくわかりません…。
    お手数かけますが、教えていただけると幸いです。

コメントの投稿

(コメント編集・削除に必要)
(管理者にだけ表示を許可する)

トラックバック

この記事のトラックバックURL
http://mhfkillerloop.blog95.fc2.com/tb.php/577-5768bb50
この記事へのトラックバック



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