Script is OFF

Ad Sense

Links（Search）

Links（Soft&Design&Tips）

Links（Favorite）

Links（My Old Blogs）

Blog People

Blog Birthday

Awasete Yomitai

Ad Sense

TOP Entries

TOP Comments

TOP Track backs

Categorise

Monthly Archives

RSS Feeds

    track feed
    Add to Google

Tag Cloud

NewMark

HOME > IT Tips > Highslide JS実装手順

Highslide JS実装手順

Category : IT Tips | | CM [4] | TB [2]　
Tag : Tips * JavaScript * CSS * Highslide *
Prev：Highslide JS：サムネイル画像クリックでクールに画像をオーバレイ
Next：Tabs Generator：ナビメニュータブのジェネレータサイト
○実装手順
１．Highslide JS公式サイトへ移動
２．Highslide JS旧版（version2.2.8）をダウンロード
　・左メニュー「Download」クリック
　・version2.2.8を選択し「Download now」クリック
　・Highslide Downloadで「yes」クリック
※何故旧版かというと、最新版はアップロードできない名称なので念のため
３．解凍し、highslideフォルダ直下のjsファイル2つをそのままアップロード
４．以下を <head>〜</head> 間に記述
※赤文字部分は自分の環境に合わせて記述してください
<script type="text/javascript" src="http://○○○/file/highslide.js"></script>
<script type="text/javascript">
    hs.graphicsDir = '<%url>file/';
    hs.outlineType = null;
    window.onload = function() {
        hs.preloadImages();
    }
</script>
５．以下を <body> 直後に記述
※FC2アクセス解析をしている場合、そのタグの直後に
<div id="highslide-container"></div>
６．CSS編集で以下を記述
.highslide {
    /* cursor: url(highslide/graphics/zoomin.cur), pointer; */
    outline: none;
}
.highslide img {
    border: 2px solid white;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-image {
    border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
}
.highslide-loading {
    display: block;
    color: white;
    font-style: 'MS Sans Serif';
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    background-color: gray;
    color: white;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
※CSS編集での詳細設定はお好みでやってみてください

そして、前準備が終わり、次は画像とWebページに付加する <a> タグの属性です。
「target="_blank"」を消して、赤文字部分を追記。
<a href="http://blog31.fc2.com/b/blackcat13numbers/file/ye3.jpg" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"><img src="http://blog31.fc2.com/b/blackcat13numbers/file/ye3s.jpg" alt="ye3.jpg" border="0" align="left"/></a><br clear="all" />

と記述すると
ye3.jpg

これで実装できたかと思います。できない場合、何なりと質問いただければ頑張って回答したいと思います。疲れた；
※明日（4/17）付けで投稿しておきます
FC2ブックマークに追加



関連エントリー

ランキング参加中☆クリック投票お願いします
ブログランキング・にほんブログ村へ
ブログランキングサイトに登録中です
人気ブログランキング  P-NETBanking  ブログの殿堂  ブログ王ランキング

コメント

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

こんばんは
先ほどはblogに来て頂いてありがとうございました。
サムネイル画像で検索していて、初めは一番新しいのでやっていたんで、途中で壁に当たっていました。
こちらの大変解かりやすい記事に出会い助かりました。とても嬉しかったです。

遅ればせながら、さきほどトラバさせていただきました。

次回のご紹介も期待しています。よろしくお願いします。

コメント

コメントありがとうございます^^

遅くなりましたが、CM/TBありがとうございますv-398
これからもクールなjsとかTipsをブログでも適応できるようなネタを載せたいと
思いますv-392
お互い更新頑張っていきましょうね^^

コメント

やってみました！

FC2フォーラムで質問されているのをみて、このブログにきました。

中を拝見すると、面白いTipsが紹介されていたので早速取り入れさせていただきましたヽ(｀▽´)/

私は自分では何もできませんが、多くの方の技を取り入れさせていただいています。

コメント

こんばんわ^^

iserinさん
初めまして。コメントありがとうございます^^
自分のブログで書いた情報を使っていただけるなんて光栄ですv-398
これからも色々なTipsを書く予定なので是非ともよろしくお願いします^^

コメントの投稿


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

トラックバック

http://blackcat13numbers.blog31.fc2.com/tb.php/188-78c7dee2
この記事にトラックバックする(FC2ブログユーザー)

サムネイル画像．Highslide JS

私はテンプレートindexページにサムネイル画像を置きそれをかっこよく拡大させるテンプレートを夢見ています。 先日、作成したgallery-w では画...

HighSlide

連休中ということで、ブログのテンプレートに新しいワザを導入してみました。「HighSlide」と言うもので、サムネイル画像をクリックすると、カ...

 HOME 

FC2ブログ 紹介予定派遣

Design byLoco-net::blog