Highslide JSの設置方法について質問です。

質問

Highslide JSの設置方法について質問です。
はじめまして、質問失礼いたします。

現在HPを製作中なのですが、サムネイル画像をクリックして拡大するためにHighslide JSを是非使いたくて試しに適当な画像で設置しようとしているのですが・・・。
参考サイトを読みながらでもなんともできずに困っています。

ページはhttp://2dpuppet.web.fc2.com/2dpuppet/gallery.htmlです。
どうかお詳しい方がいらっしゃいましたら、正しい設置をご教授願います。
宜しくお願い致します。

回答No.6

yuki4499 · ベストアンサー

たぶんメインをこっちに書き換えればエラーが何個か潰せるはず。
それでも動かなかったらまた対処します。
Out of memory at line:18
とかいうのは放置しておいてください。
(TOPで出るのは仕方ないし問題ないです)
なんで出るかは分かるので対処はできると思いますが教えてサイトだと対処に膨大な時間がかかりそうなのでパス

<script type="text/javascript" src="http://2dpuppet.web.fc2.com/highslide/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 = '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>

お礼

ズームアップできました！
が、何やらコントローラーが変なリスト型になっているのと、背景が白ではなく透き通ってしまっています・・・；

補足

重ねて申し訳ないのですが、コントローラーを通常（オンマウスで画像上に表示されるボタン）にするのと背景を白くする方法はどうすれば宜しいでしょうか？

回答No.5

yuki4499

中身をよく見たらそら飛ばないわなと思いました。
提示したページとあなたが作成しているHPは仕様が若干異なっているということをまず理解しましょう。

初回にページをロードした際のインラインフレーム内にhsを作成する記述がないため、オブジェクトがないというエラーが出てます。
Highslide JSの中身を全部確認してませんがたぶん
http://2dpuppet.web.fc2.com/2dpuppet/top-page.html
の中身にもインラインフレーム内の記述を書いてやれば動くんじゃないかと思います。
時間がないので検証等一切してませんのであしからず

お礼

位置が前後してしまいますがお許し下さい。
なんとかキャプションの設定もできましたが、コントローラーの設定だけができません。
オンマウスでアイコンが表示されるタイプにしたいのですが、どのようにすればできるでしょうか？
恐らくこれが仕上げになります。よろしくお願い致します。

補足

お忙しい中、回等ありがとうございます。
残念ながらそのフレーム内のページにも記載してはみましたが、変化がありませんでした。

因みに、ギャラリーページを単体で開いて画像をクリックすると
「Out of memory at line:18」というエラーが出ます。
何か関係があるのでしょうか・・・？

まだまだ色々試してはいますが上手くいきません。
お手数をおかけします。

回答No.4

yuki4499

src="http://2dpuppet.web.fc2.com/highslide-with-gallery.js"
って書いてありますけど普通に404喰らいます。
フォルダごとUPしたならhighslideの下にhighslide-with-gallery.js
があるはずですから下のパスじゃないんですか？
http://2dpuppet.web.fc2.com/highslide/highslide-with-gallery.js
↑のでアクセスしたらつながるあたり単純なパス設定ミスな気がしますが？

お礼

色々と今も試していますが、どうにもうまくいきません。
大変お手数ですが、記述をチェックしていただけたらと思います。
本当に親身にありがとうございます。
宜しくお願い致します。

補足

http://2dpuppet.web.fc2.com/highslide/highslide-with-gallery.js
に置き換えてみました。
が、まったく変化する様子がありません・・・。

回答No.3

yuki4499

>>回等ありがとうございます！
>>記述してみたのですが、記述箇所等はこれで正しいでしょうか？

ローカル環境で試したら出来ましたよ。
実物みてないのでどこの記述が違うか分かりませんが。

一応考えられそうな事
1.メインのhighslide-with-gallery.jsのパスミス
　まぁコレやったらエラーがでるので違うと思いますが・・・
2.highslide-with-gallery.jsをDLしていない
何やら機能によって色々jsが違うようなので
用途にあったjsを取ってこないといけないらしい。

左下に!マークでもでてエラー内容が記述されてれば一番わかり易いんですけどね。

補足

http://2dpuppet.web.fc2.com/top.html
URLを貼り忘れていました；失礼いたしました。
こういったページになります。

highslide-with-gallery.js
というのは予めファイルに入っていました。
ファイルごとアップロードしたので、入っていると思われます。

回答No.2

yuki4499

インラインフレーム内の記述
<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

yuki4499

ざっとしか見てませんが
ローディングで止まってるあたりhs.graphicsDiがうまく読めてないのだと思われます。
ブログとかやったこともないので確かめてませんがFC2ブログは画像に相対パスを使うとアクセスできないとかいう記事を見た気がします。
なのでそこを直してみたら動かないでしょうか？

お礼

回等してくださってありがとうございました！
なんとかズームアップするようになりました。ありがとうございます。

補足

因みに、ブログではなくＨＰです。

ズームアップはするようになったのですが、新たに困った問題が発生してしまいました。
HPにインラインフレームを使用しているのですが、ズームアップした画像がフレームから出ずに中で縮小された形になってしまいます。

http://highslide.com/examples/inside-iframe.html

こちらのページのようにしたいのですが、どうすれば良いでしょうか・・・？
度々すみません。お願い致します。