極意(16)スライドショーを極める

QHMのスライドショーには、いろいろのタイプのスライドショーがあります。
オーソドックスなスライドショー(#slideshow)に始まり、画像送りボタン付きのスライドショー(#slides)には、標準サイズ(フレームサイズ「無指定」)、スモールサイズ(small)、ポートレイトサイズ(portrait)、ラージサイズ(large)の4種類があります。今回、それらの全て(但し、ラージサイズを割愛します)を同一ページで表現してみました。


先ずは、メインビジュアルでスライドショーを表示

当ページのメインビジュアル部分をご覧になって下さい。
スライドショーが設置されているのが確認できます。

[check]作成手順

  1. 別ページ(URS03_SlideShow)でスライドショーを作成します。
  2. そのページをメインビジュアル機能で当ページの先頭で呼び出します。

[check]そのおまじないが以下になります。

#main_visual(USR03_SlideShow);

[check]別途作成のスライドショー・ページの中身です。

#slideshow(200){{
http://fujigopc.com/haik/swfu/d/slidesow011.png
http://fujigopc.com/haik/swfu/d/slidesow012.png
http://fujigopc.com/haik/swfu/d/slidesow013.png
http://fujigopc.com/haik/swfu/d/slidesow041.png
http://fujigopc.com/haik/swfu/d/slidesow042.png
http://fujigopc.com/haik/swfu/d/slidesow043.png
http://fujigopc.com/haik/swfu/d/slidesow021.png
http://fujigopc.com/haik/swfu/d/slidesow022.png
http://fujigopc.com/haik/swfu/d/slidesow023.png
}}


次に、オーソドックスなQHMのスライドショーです



[check]前記のスライドショーのおまじないです。

#slideshow(390){{
http://fujigopc.com/haik/swfu/d/slide600_101.jpg
http://fujigopc.com/haik/swfu/d/slide600_102.jpg
http://fujigopc.com/haik/swfu/d/slide600_103.jpg
http://fujigopc.com/haik/swfu/d/slide600_104.jpg
http://fujigopc.com/haik/swfu/d/slide600_105.jpg
http://fujigopc.com/haik/swfu/d/slide600_106.jpg
http://fujigopc.com/haik/swfu/d/slide600_107.jpg
http://fujigopc.com/haik/swfu/d/slide600_108.jpg
http://fujigopc.com/haik/swfu/d/slide600_109.jpg
http://fujigopc.com/haik/swfu/d/slide600_110.jpg
http://fujigopc.com/haik/swfu/d/slide600_111.jpg
http://fujigopc.com/haik/swfu/d/slide600_112.jpg
}}

[check]画像の大きさは、600x390px です。


画像送りボタン付きのスライドショーです。


1.フレームサイズ「無指定」のスライドショーです
Frame



[check]前記のスライドショーのおまじないです。

#slides{{
slide600_201.jpg
slide600_202.jpg
slide600_203.jpg
slide600_204.jpg
slide600_205.jpg
slide600_206.jpg
slide600_207.jpg
slide600_208.jpg
slide600_209.jpg
slide600_210.jpg
slide600_211.jpg
slide600_212.jpg
}}


2.フレームサイズ「small」のスライドショーです
Frame



[check]左のスライドショーのおまじないです。

#slides(small,left){{
M200_01.jpg
M200_02.jpg
M200_03.jpg
M200_04.jpg
M200_05.jpg
M200_06.jpg
M200_07.jpg
M200_08.jpg
M200_09.jpg
M200_10.jpg
M200_11.jpg
M200_12.jpg
M200_13.jpg
M200_14.jpg
}}


3.フレームサイズ「portrait」のスライドショーです
Frame



[check]右のスライドショーのおまじないです。

#slides(portrait,right){{
M450_01.jpg
M450_02.jpg
M450_03.jpg
M450_04.jpg
M450_05.jpg
M450_06.jpg
M450_07.jpg
M450_08.jpg
M450_09.jpg
M450_10.jpg
M450_11.jpg
M450_12.jpg
M450_13.jpg
M450_14.jpg
M450_15.jpg
M450_16.jpg
M450_17.jpg
}}


ご意見箱


  • 小室さま。
    確かに#slidesの画像送りボタン付きのスライドショーは、画像をクリックするとトップページではなく、そのページのトップにジャンプしますね。標準仕様みたいですね。#slideshowならそのようなことはないで#slideshowに変更したら如何でしょうか? -- 管理人 2016-03-24 (木) 14:14:17
  • QHMクラブの掲示板のほうへ同様の書き込みをさせていただいたのですが、
    #slidesでスライドショーを表示させることはうまくいきましたが
    写真をクリックしてしまうとトップページへ飛んでしまいます。
    こちらの#slidesのページでも同じ症状となります。
    トップへ飛ばないようにするにはどのようにしたらよいでしょうか -- 小室 2016-03-11 (金) 10:34:07