![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?c9bd177)
Highslide JSの設置方法について質問です。
はじめまして、質問失礼いたします。
現在HPを製作中なのですが、サムネイル画像をクリックして拡大するためにHighslide JSを是非使いたくて試しに適当な画像で設置しようとしているのですが・・・。
参考サイトを読みながらでもなんともできずに困っています。
ページはhttp://2dpuppet.web.fc2.com/2dpuppet/gallery.htmlです。
どうかお詳しい方がいらっしゃいましたら、正しい設置をご教授願います。
宜しくお願い致します。
No.6ベストアンサー
- 回答日時:
たぶんメインをこっちに書き換えればエラーが何個か潰せるはず。
それでも動かなかったらまた対処します。
Out of memory at line:18
とかいうのは放置しておいてください。
(TOPで出るのは仕方ないし問題ないです)
なんで出るかは分かるので対処はできると思いますが教えてサイトだと対処に膨大な時間がかかりそうなのでパス
<script type="text/javascript" src="http://2dpuppet.web.fc2.com/highslide/highslide- …
<script type="text/javascript">
hs.graphicsDir = 'graphics/';
hs.outlineType = "rounded-white";
</script>
<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.captionEval = 'this.thumb.alt';
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: 0.75,
position: 'bottom center',
hideOnMouseOut: true
}
});
hs.callingFrameId = 'main1';
hs.$ = function (id) {
var iframe = document.getElementById(hs.callingFrameId);
var iDoc = iframe.contentDocument || iframe.contentWindow.document;
if (document.getElementById(id)) return document.getElementById(id);
else if (iDoc.getElementById(id)) {
// workaround for IE's missing importNode():
iEl = iDoc.getElementById(id);
return hs.createElement(iEl.tagName, { className: iEl.className, innerHTML: iEl.innerHTML } );
}
return null;
};
hs.Expander.prototype.getAdjacentAnchor = function(op) {
var iframe = document.getElementById(hs.callingFrameId);
var iDoc = iframe.contentDocument || iframe.contentWindow.document;
var aAr = iDoc.getElementsByTagName('A'), hsAr = {}, activeI = -1, j = 0;
for (i = 0; i < aAr.length; i++) {
if (hs.isHsAnchor(aAr[i]) && ((this.slideshowGroup == hs.getParam(aAr[i], 'slideshowGroup')))) {
hsAr[j] = aAr[i];
if (aAr[i] == this.a) activeI = j;
j++;
}
}
return hsAr[activeI + op];
};
hs.updateAnchors = function() {
var el, els, all = [], images = [], htmls = [], groups = {}, re;
var iframe = document.getElementById(hs.callingFrameId);
var iDoc = iframe.contentDocument || iframe.contentWindow.document;
for (var i = 0; i < hs.openerTagNames.length; i++) { /// loop through tag names
els = iDoc.getElementsByTagName(hs.openerTagNames[i]);
for (var j = 0; j < els.length; j++) { /// loop through each element
el = els[j];
re = hs.isHsAnchor(el);
if (re) {
hs.push(all, el);
/// images
if (re[0] == 'hs.expand') hs.push(images, el);
/// htmls
else if (re[0] == 'hs.htmlExpand') hs.push(htmls, el);
/// groupwise
var g = hs.getParam(el, 'slideshowGroup') || 'none';
if (!groups[g]) groups[g] = [];
hs.push(groups[g], el);
}
}
}
hs.anchors = { all: all, groups: groups, images: images, htmls: htmls };
return hs.anchors;
};
hs.getPosition = function(el){
var parent = el;
var p = { x: parent.offsetLeft, y: parent.offsetTop };
while (parent.offsetParent){
parent = parent.offsetParent;
p.x += parent.offsetLeft;
p.y += parent.offsetTop;
if (parent != document.body && parent != document.documentElement) {
p.x -= parent.scrollLeft;
p.y -= parent.scrollTop;
}
}
var ownerDocument = el.ownerDocument || el.document;
if (ownerDocument != document) {
var iframePos = hs.getPosition(document.getElementById(hs.callingFrameId));
p.x += iframePos.x;
p.y += iframePos.y;
}
return p;
};
</script>
この回答への補足
重ねて申し訳ないのですが、コントローラーを通常(オンマウスで画像上に表示されるボタン)にするのと背景を白くする方法はどうすれば宜しいでしょうか?
補足日時:2010/04/16 13:29ズームアップできました!
が、何やらコントローラーが変なリスト型になっているのと、背景が白ではなく透き通ってしまっています・・・;
No.5
- 回答日時:
中身をよく見たらそら飛ばないわなと思いました。
提示したページとあなたが作成しているHPは仕様が若干異なっているということをまず理解しましょう。
初回にページをロードした際のインラインフレーム内にhsを作成する記述がないため、オブジェクトがないというエラーが出てます。
Highslide JSの中身を全部確認してませんがたぶん
http://2dpuppet.web.fc2.com/2dpuppet/top-page.html
の中身にもインラインフレーム内の記述を書いてやれば動くんじゃないかと思います。
時間がないので検証等一切してませんのであしからず
この回答への補足
お忙しい中、回等ありがとうございます。
残念ながらそのフレーム内のページにも記載してはみましたが、変化がありませんでした。
因みに、ギャラリーページを単体で開いて画像をクリックすると
「Out of memory at line:18」というエラーが出ます。
何か関係があるのでしょうか・・・?
まだまだ色々試してはいますが上手くいきません。
お手数をおかけします。
位置が前後してしまいますがお許し下さい。
なんとかキャプションの設定もできましたが、コントローラーの設定だけができません。
オンマウスでアイコンが表示されるタイプにしたいのですが、どのようにすればできるでしょうか?
恐らくこれが仕上げになります。よろしくお願い致します。
No.4
- 回答日時:
src="
http://2dpuppet.web.fc2.com/highslide-with-galle …って書いてありますけど普通に404喰らいます。
フォルダごとUPしたならhighslideの下にhighslide-with-gallery.js
があるはずですから下のパスじゃないんですか?
http://2dpuppet.web.fc2.com/highslide/highslide- …
↑のでアクセスしたらつながるあたり単純なパス設定ミスな気がしますが?
この回答への補足
http://2dpuppet.web.fc2.com/highslide/highslide- …
に置き換えてみました。
が、まったく変化する様子がありません・・・。
色々と今も試していますが、どうにもうまくいきません。
大変お手数ですが、記述をチェックしていただけたらと思います。
本当に親身にありがとうございます。
宜しくお願い致します。
No.3
- 回答日時:
>>回等ありがとうございます!
>>記述してみたのですが、記述箇所等はこれで正しいでしょうか?
ローカル環境で試したら出来ましたよ。
実物みてないのでどこの記述が違うか分かりませんが。
一応考えられそうな事
1.メインのhighslide-with-gallery.jsのパスミス
まぁコレやったらエラーがでるので違うと思いますが・・・
2.highslide-with-gallery.jsをDLしていない
何やら機能によって色々jsが違うようなので
用途にあったjsを取ってこないといけないらしい。
左下に!マークでもでてエラー内容が記述されてれば一番わかり易いんですけどね。
![「Highslide JSの設置方法につい」の回答画像3](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/2/836639_5497e3f5b3001/M.jpg)
この回答への補足
http://2dpuppet.web.fc2.com/top.html
URLを貼り忘れていました;失礼いたしました。
こういったページになります。
highslide-with-gallery.js
というのは予めファイルに入っていました。
ファイルごとアップロードしたので、入っていると思われます。
No.2
- 回答日時:
インラインフレーム内の記述
<script type="text/javascript">
var hs = {
expand: function (element, params, custom) {
parent.window.focus(); // to allow keystroke listening
return parent.window.hs.expand(element, params, custom);
},
htmlExpand: function (element, params, custom) {
parent.window.focus(); // to allow keystroke listening
return parent.window.hs.htmlExpand(element, params, custom);
}
}
</script>
<style type="text/css">
* {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide {
cursor: url(/highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid white;
}
.highslide-caption {
display: none;
}
</style>
</head>
</script>
メインのほうは別途highslide-with-gallery.jsを取ってこないといけないようですね。
以下メイン
<script type="text/javascript" src="highslide-with-gallery.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'graphics/';
hs.outlineType = "rounded-white";
</script>
<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.captionEval = 'this.thumb.alt';
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: 0.75,
position: 'bottom center',
hideOnMouseOut: true
}
});
hs.callingFrameId = 'myIframe';
hs.$ = function (id) {
var iframe = document.getElementById(hs.callingFrameId);
var iDoc = iframe.contentDocument || iframe.contentWindow.document;
if (document.getElementById(id)) return document.getElementById(id);
else if (iDoc.getElementById(id)) {
// workaround for IE's missing importNode():
iEl = iDoc.getElementById(id);
return hs.createElement(iEl.tagName, { className: iEl.className, innerHTML: iEl.innerHTML } );
}
return null;
};
hs.Expander.prototype.getAdjacentAnchor = function(op) {
var iframe = document.getElementById(hs.callingFrameId);
var iDoc = iframe.contentDocument || iframe.contentWindow.document;
var aAr = iDoc.getElementsByTagName('A'), hsAr = {}, activeI = -1, j = 0;
for (i = 0; i < aAr.length; i++) {
if (hs.isHsAnchor(aAr[i]) && ((this.slideshowGroup == hs.getParam(aAr[i], 'slideshowGroup')))) {
hsAr[j] = aAr[i];
if (aAr[i] == this.a) activeI = j;
j++;
}
}
return hsAr[activeI + op];
};
hs.updateAnchors = function() {
var el, els, all = [], images = [], htmls = [], groups = {}, re;
var iframe = document.getElementById(hs.callingFrameId);
var iDoc = iframe.contentDocument || iframe.contentWindow.document;
for (var i = 0; i < hs.openerTagNames.length; i++) { /// loop through tag names
els = iDoc.getElementsByTagName(hs.openerTagNames[i]);
for (var j = 0; j < els.length; j++) { /// loop through each element
el = els[j];
re = hs.isHsAnchor(el);
if (re) {
hs.push(all, el);
/// images
if (re[0] == 'hs.expand') hs.push(images, el);
/// htmls
else if (re[0] == 'hs.htmlExpand') hs.push(htmls, el);
/// groupwise
var g = hs.getParam(el, 'slideshowGroup') || 'none';
if (!groups[g]) groups[g] = [];
hs.push(groups[g], el);
}
}
}
hs.anchors = { all: all, groups: groups, images: images, htmls: htmls };
return hs.anchors;
};
hs.getPosition = function(el){
var parent = el;
var p = { x: parent.offsetLeft, y: parent.offsetTop };
while (parent.offsetParent){
parent = parent.offsetParent;
p.x += parent.offsetLeft;
p.y += parent.offsetTop;
if (parent != document.body && parent != document.documentElement) {
p.x -= parent.scrollLeft;
p.y -= parent.scrollTop;
}
}
var ownerDocument = el.ownerDocument || el.document;
if (ownerDocument != document) {
var iframePos = hs.getPosition(document.getElementById(hs.callingFrameId));
p.x += iframePos.x;
p.y += iframePos.y;
}
return p;
};
</script>
これでいけませんかね
この回答への補足
回等ありがとうございます!
記述してみたのですが、記述箇所等はこれで正しいでしょうか?
ズームしないでただフレーム内に画像が表示されるだけになってしまいました・・・。
No.1
- 回答日時:
ざっとしか見てませんが
ローディングで止まってるあたりhs.graphicsDiがうまく読めてないのだと思われます。
ブログとかやったこともないので確かめてませんがFC2ブログは画像に相対パスを使うとアクセスできないとかいう記事を見た気がします。
なのでそこを直してみたら動かないでしょうか?
この回答への補足
因みに、ブログではなくHPです。
ズームアップはするようになったのですが、新たに困った問題が発生してしまいました。
HPにインラインフレームを使用しているのですが、ズームアップした画像がフレームから出ずに中で縮小された形になってしまいます。
http://highslide.com/examples/inside-iframe.html
こちらのページのようにしたいのですが、どうすれば良いでしょうか・・・?
度々すみません。お願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- BTOパソコン PCケースのHDD設置方法につきまして 3 2023/06/08 14:19
- その他(Microsoft Office) outlook設定方法 1 2022/05/30 13:22
- 一戸建て 23畳のリビングルームにおける、ダウンライトの数について 5 2022/05/22 22:47
- エアコン・クーラー・冷暖房機 3階にエアコン設置について 3 2023/04/19 17:41
- WordPress(ワードプレス) ワードプレスのパーマリンク設定について 1 2023/02/11 19:08
- その他(開発・運用・管理) 【至急】.htaccessによるディレクトリ単位でのリダイレクト 2 2023/08/10 13:46
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- その他(ニュース・時事問題) 男性用トイレ(つまり父親が入るほう)にオムツ交換台があることが少ない問題。 4 2023/04/21 22:19
- バックアップ アプリJSバックアップについてGalaxynote2を使ってます。 バックアップしても本体ストレージ 1 2022/06/28 03:12
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
翌月を取得するGASが分かりません
-
GASでundefinedエラーが出ます
-
C言語の質問です HTMLでこのよ...
-
AM,PMの時間表示について
-
ジェネレーターの作り方
-
jsによって検索プルダウン、都...
-
APIを使って埋め込んだグーグル...
-
javascriptでテーブルに追加し...
-
GASでGoogleフォームの自動返信...
-
C# 演算 奇数と偶数 表現の仕方
-
「nullまたはオブジェクトでは...
-
二次元配列を使って順位をだす...
-
このスクリプトを修正したいの...
-
FireFoxのjavascriptで自動でキ...
-
同じIDで定義した要素の配列を...
-
JavaScriptにおける[] とか :...
-
順列生成アルゴリズムについて...
-
MFCのキャプション変更
-
任意の座標をクリックさせるには
-
jQueryの"return false"の役割...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
javaScriptのコードの修正をお...
-
ジェネレーターの作り方
-
翌月を取得するGASが分かりません
-
ASP.NETのコントロールの値をJa...
-
GASでundefinedエラーが出ます
-
C#で、ContextMenuStripに動的...
-
GASでGoogleフォームの自動返信...
-
ASP.NET MVCでObjectをjsに渡す
-
VSCODE[Python]の設定について
-
C# 演算 奇数と偶数 表現の仕方
-
javascriptでiframeのURL変更は?
-
イベントが初めの一回しか起き...
-
なぜmatchメソッドがエラーにな...
-
gas スプレッドシートがアクテ...
-
jqGridについて
-
var exports = exports || {}; ...
-
JavaScriptで文字列の特定文字...
-
javascriptでテーブルに追加し...
おすすめ情報