スポンサーサイト

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

上記の広告は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・攻略ブログクリックして頂けるとマンモスうれぴー(≧Д≦)
スポンサーサイト

HighslideJS ちょっと仕様を変更!

2010年03月21日 12:53

長らく使っております。
画像拡大スクリプト「Highslide JS

↓Click
夜の工場キレイでふ(≧▽≦)

結構前から流行りだしてる夜の工場見学。
なんかツアーとかもあるらしいよ!

これいいですよね~。
カッコイイですw

うちの団員のmikiさんも使い始め他のMHFに関係するブログの方でもちらほら見ます^^

で、今回この休日を使って今までの単品表示ではなく、
複数スライド、再生機能も含めた方に変更してみました。
またバッグが暗くなるようにも変更してあります。

参考元はHighslide JSのサンプルにある、「Two mini galleries on the same page」です。

次の記事にて、今回取り込んだやつのやり方を書いていこうと思います。

ブログパワーアップ! 剛種チケット

2009年08月16日 17:54

Lightboxは色々と重いので変更しました!

Highslideは画像拡大まで時間もかからず負担が少なくていいです^^
Lightbox、カッコイイから好きだったんだけど。。
2年間ありがとうございました!

さてさてHighslideの凄い所は・・・!!
クリックで拡大!
そして拡大後、クリック押したまま動かす事が可能!
もう1回クリックで閉じる!
更に更に!!
カーソルキー↑↓で連続で画像を見れますww

す、素晴らしい!!

では早速下の記事と今回の画像を↑↓で試してみてくださいなw
mhf_20090814_235045_312.jpg
剛種チケット、ウマウマですよ~!ヴぉるはw
さて、この画像見て通り、剛種チケットへの道・ヴォルガノス変種なんだけど。
この日、10回で40枚集まりましたぁ!!w
つまりは平均4枚ってことですね♪
ウマ
ま、運が良かっただけかと思いますがヴォル変種ウマすぎます!
サブとかやってないで是非討伐をw
基本で2枚か・3枚。4枚でます。
で、もってサブも出ればウマウマですわw

では今日もヴォル変種行ってまいります><

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



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