![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
http://highslide.com/
こちらのスクリプトで次のことは実現できるでしょうか?
ポップアップする画像ウインドウを
ブラウザの何%というサイズに指定する。
(現在の状態では大きすぎて下のコントローラが隠れてしまいます)
後、ポップアップした画像をクリックするとその画像が閉じられるのですが、
閉じるのではなくて次の画像に行くようにする
もしできるとしたらどの項目でしょうか?
宜しければ教えてください。
No.3ベストアンサー
- 回答日時:
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
- 回答日時:
(続き)日本語化するなら
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
- 回答日時:
添削出来るほど、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
- 回答日時:
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>
大変恐縮ですが、教えていただけると助かります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PDF Just PDF 5 proでポップアップしたファイル名がつきまとう 2 2022/12/18 09:56
- その他(IT・Webサービス) どうすればgoogleのポップアップの表示が消えますか? 3 2022/09/11 14:04
- Chrome(クローム) 最近Win10にてブラウザが左にスッと隠れていく現象に悩まされてます 3 2023/07/22 23:11
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- Photoshop(フォトショップ) 【大至急】写真加工に強い方、お願いします。 現在、自作のブックカバーをプリンパさんに依頼しています。 6 2023/06/10 11:51
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- その他(開発・運用・管理) フォルダの中にファルダを作成してファイルを格納するバッチコマンド 1 2022/06/30 11:39
- Excel(エクセル) ハイパーリンク で『指定されたファイルを開くことが出来ません』 3 2023/04/25 18:02
- その他(ブラウザ) Mycrosoft Edge の「コレクション」に、画像とテキストを追加したい 2 2022/05/28 11:10
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryスライドショー画像への...
-
JavaScript スライドの画像にリ...
-
jQueryで特定のURLの時のみ表示
-
「画像の上を流れる文字列」を...
-
画像を切り替えランダム表示
-
Gifアニメ、最後のコマに行った...
-
Javascript で共通の処理をどこ...
-
ポップアップウインドウを開い...
-
1枚の画像をクリックして複数の...
-
Highslide JSで
-
MAX関数を使ってからLEFT JOIN...
-
読み込んだQRコードをフォーム...
-
前回の質問の続き
-
JavaScriptで変更した属性の元...
-
条件分岐でキーが入力されてい...
-
iframe内のリンクが飛ばないの...
-
【HTML、VBScript】HTAでのイベ...
-
JavaScriptで、?マークとコロ...
-
onclickとonmouseoverを同時に...
-
2階層のメニューを作ってjQuery...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Javascriptで指定した日付と時...
-
javascriptで毎月替わる画像
-
画像をフォルダに入れれば表示...
-
画像の重なりの順序を代える方...
-
スワップイメージが上手く動作...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
Gifアニメ、最後のコマに行った...
-
bxsliderにて読み込み後に内容...
-
Javascript で共通の処理をどこ...
-
1枚の画像をクリックして複数の...
-
各フォルダから1枚ずつ画像をラ...
-
画像を切り替えランダム表示
-
画像削除機能を付けたい
-
マウス追従スクリプトについて
-
画像ランダム表示、しかしダブ...
-
<table>、もしくは<iframe>内で...
-
1枚の画像をクリックすると複数...
-
画像とテキストのセットをラン...
おすすめ情報