Highslide JSで

質問

http://highslide.com/

こちらのスクリプトで次のことは実現できるでしょうか？

ポップアップする画像ウインドウを
ブラウザの何%というサイズに指定する。
（現在の状態では大きすぎて下のコントローラが隠れてしまいます）

後、ポップアップした画像をクリックするとその画像が閉じられるのですが、
閉じるのではなくて次の画像に行くようにする

もしできるとしたらどの項目でしょうか？
宜しければ教えてください。

回答No.3

yyr446 · ベストアンサー

No.1,No2です。お返事おそくなりまして．．．
回答を修正します。
hs.Expander.prototype.onImageClick = function (sender) {
return hs.next(this);
}
じゃなくて
hs.Expander.prototype.onImageClick = function (sender) {
return hs.next();
}
ですね、引数にthisなんてしたら、ずっとその画像ですもんね！
それから、スライドショーみたいに順番に見せるなら、予めslideshowGroupを
作っておきます。ってゆうか、「hs.addSlideshow()」というメソッド使えば
自分でクリックイベントのハンドリングなんてしなくていいんですけど、
それはさておき、書き方ですが、↓な感じです。
<script type="text/javascript">
hs.graphicsDir = '/jslib/highslide/highslide/graphics/';
hs.showCredits = false;
//hs.outlineType = 'custom';
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.align = 'center';
hs.captionEval = 'this.a.title';
hs.dragByHeading = false;

hs.maxWidth = 400; //　最大幅セット
hs.maxHight = 300; //　最大高セット

var config1 = {
slideshowGroup:'group1',
transitions: ['expand','crossfade']
};

hs.Expander.prototype.onImageClick = function (sender) {
return hs.next();
}
</script>
マークアップは、↓な感じ(サブネールは必須じゃないですけど）

<div>
<a class="highslide" title="xxx" onClick="return hs.expand(this,config1)" href="/xxx.png">
<img src="サブネールxxx.png" alt="サブネールxxx" title="xxx" /></a>
<a class="highslide" title="yyy" onClick="return hs.expand(this,config1)" href="/yyy.png">
<img src="サブネールyyy.png" alt="サブネールyyy" title="yyy" /></a>
<a class="highslide" title="zzz" onClick="return hs.expand(this,config1)" href="/zzz.png">
<img src="サブネールzzz.png" alt="サブネールzzz" title="xxx" /></a>
........
</div>

「hs.addSlideshow()」というメソッド使うんなら、hs.Expander.prototype.onImageClick
の部分は不要で、変わりに
hs.addSlideshow({
slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
className: 'text-controls',
opacity: '0.75',
position: 'below',
offsetX: '0',
offsetY: '-15',
hideOnMouseOut: false
}
});
を入れる。日本語化するなら
（続く）

回答No.4

yyr446

（続き）日本語化するなら

hs.lang = {
cssDirection: 'ltr',
loadingText: 'Loading...',
loadingTitle: 'クリックでキャンセル',
focusTitle: 'クリックで手前に表示',
fullExpandTitle: '元のサイズで表示 (f キー)',
creditsText: 'Powered by <i>Highslide JS</i>',
creditsTitle: 'Go to the Highslide JS homepage',
previousText: '戻る',
nextText: '進む',
moveText: '移動',
closeText: '閉じる',
closeTitle: '閉じる (esc キー)',
resizeTitle: 'リサイズ',
playText: '再生',
playTitle: 'スライドショー開始 (スペースキー)',
pauseText: '停止',
pauseTitle: 'スライドショー停止 (スペースキー)',
previousTitle: '戻る (← キー)',
nextTitle: '進む (→ キー)',
moveTitle: '移動',
fullExpandText: '元のサイズ',
number: 'Image %1 of %2',
restoreTitle: 'クリックで閉じます。ドラッグで動かせます。矢印キーで前後の画像へ移動します。'
};

とこれも追加

このあたりの構築は、同サイトの「Highslide Editor」というサービスでも
必要なscriptとのセットとCSSをzipにして作ってくれるので、
そいつをカストマイズするのがお手軽だという売り文句なんだが、
日本人にはぜんぜんそうじゃないぞ！
http://highslide.com/editor/

回答No.2

yyr446

添削出来るほど、Highslide.js使い込んでないけど、一点だけ
htmlの要素のonclick属性に個別にイベント登録しなくても、
Highslide.jsでイベントハンドラーの登録が出来るからそれを使ったほうが
便利だと思います。そのへんもリファレンスにサンプルがたくさん載ってます。

例えば、
<script type="text/javascript">
hs.Expander.prototype.onImageClick = function (sender) {
return hs.next(this);
}
</script>
は、ポップアップした画像をクリックした時に実行させる関数の登録だと思います。

お礼

どうもありがとうございます。
JSやCSSで設定をしておいた方が、HTMLに個別につける必要がなく楽という感じでしょうか・・
理解不足で申し訳ありません。

ここ数日、CSSファイルとにらめっこ状態なのですが
どうもわかりません。やはりその道を学んでいない素人なので難しいです。
書いてくださったスクリプトをオンクリックで利用するとしたら
どうしたらよいかもし宜しければ教えていただけないでしょうか。
上記をヘッダー内に書き込むとして
ボディーのHTMLには同追加すればよいでしょうか？

現在は
<a href="2.jpg" class="highslide" onclick="return hs.expand(this, config1 )">

</a>

このような記述になっています。
ヘッダーに追加してeturn hs.expandをreturn hs.nextに書き換えただけでは動作してくれないのですが・・・

回答No.1

yyr446

Highslide JS API Referenceにいろいろ載ってます。
http://highslide.com/ref/

＞ブラウザの何%というサイズに指定
これはないですね。最大サイズのピクセル指定なら
hs.maxWidth = 400;
hs.maxHight = 300;
と指定できます。

＞ポップアップした画像をクリックするとその画像が閉じられるのですが、
閉じるのではなくて次の画像に行くようにする

hs.Expander.prototype.onImageClick = function (sender) {
return hs.next(this);
}

かな

お礼

yyr446様

ご回答ありがとうございます。
そちらのリファページの方で穴が開くほど見てみたのですが、
スタイルシートなどの知識がない素人なので
理解できなかったり、書き方がわからなかったり・・

素人也で
onclick="return hs.expand(this, config1 );hs.expand(this, { maxWidth: 400 })"

このような書き方で一応画像が任意の大きさになったのですが、
この書き方はどうでしょうか？
もし宜しければサイトで使えるように添削・訂正していただけると非常に助かります・・・
%指定は、このスクリプトでは無理と認識して宜しいでしょうか？
つまりブラウザの大きさで可変する感じは基本的には無理ということになるでしょうか？
マージン？などでも無理でしょうか？

また下のNEXTもリンクタグに合せて書き込むにはどのように書けばいいでしょうか？

<a href="..3.jpg" class="highslide"　onclick="return hs.expand(this, config1 )">

</a>

大変恐縮ですが、教えていただけると助かります。