• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:小さな別ウインドウを開いて、そこで、スライドショーが展開しているHPを見かけることが良くありますが)

小さな別ウインドウでスライドショーを展開する方法

このQ&Aのポイント
  • 小さな別ウインドウでスライドショーを展開するには、特定のJavaScriptコードを使用します。このコードを使うことで、新しいウインドウを開くことができます。
  • 以下のJavaScriptコードをHTMLファイルに追加すると、別ウインドウが開かれ、指定したURLが表示されます。
  • コードには、ウインドウのサイズや表示する要素などを指定するためのパラメータが含まれています。これを調整することで、スライドショーの表示方法をカスタマイズすることが可能です。

質問者が選んだベストアンサー

  • ベストアンサー
noname#199778
noname#199778
回答No.1

ご質問のようなケースであれば、小さな別ウィンドウを開くスクリプトと、スライドショーを展開するスクリプトをそれぞれ別々のHTMLファイルに記述しておき、小さな別ウィンドウを開くスクリプトで、スライドショーを表示させるHTMLファイルを呼び出すのが一番手軽だと思います。 たとえば、別に用意するスライドショーのスクリプトを仕込んだHTMLファイルを「slideshow.html」とするなら、サブウィンドウを呼び出す側のHTMLファイルのスクリプトは、 <script type="text/javascript"><!-- function WOpen(){ window.open("slideshow.html","_blank","width=300, height=250"); } //--></script> としてやれば、サイズなどを指定された新しいウィンドウを開いて、そこにスライドショーを見せるHTMLファイルを読み込むので、サブウィンドウ内でスライドショーを展開させることが可能になるのではないかと思います。 もしこれをウィンドウを開く側のHTMLですべてまかなうとしたら、かなり大掛かりなスクリプトを組む必要があると思います。 1つのファイルですべてを済ますことから離れて2つのHTMLファイルを用意し、スライドショーのページを別ファイルにして、それをサブウィンドウに読み出したほうが手間が省けると思いますが、いかがでしょうか。 ちなみに、ご質問文にあるスクリプトの動作については、はじめにWinOpenLinkという配列を作って、そこにウィンドウを開くときに使うデータを格納し、 その次に変数makescriptにJavascriptのscript要素の内容をタグごと格納し、 その次にdocument.write()でmakescriptをそこに書き出し、 最後にLWOpen(0)でdocument.write()で書き出したスクリプトを呼び出しているようです。 JavaScriptをJavaScriptで書き出すなど、かなり無駄が多いと思いますし、これだと新しいウィンドウを開いてそこに指定されたファイルを表示させるだけだと思います。 スライドショーを実行させるようなソースは含まれていないように見えますので、これだけではスライドショーにはならないでしょう。 見当違いでしたらごめんなさい。 参考になれば幸いです。

hikarika1
質問者

お礼

回答ありがとうございます、この素材ソースはスライドショーではないわけですね。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • HPにスライドショーが反映されません。

    Macユーザーです。OSは10.9.5です。FC2でページを作っています。 HPにスライドショーを設置したいと思い、HTMLタグを用いてページの編集をしました。 ですが、写真が反映されなかったりページのデザインが崩れたりしてしまいます。 こちら(http://matome.bgah.jp/2014/01/javascript-bxslider/)にあるスライドショーの最終形が理想だったので、HTMLタグは本当にそのまま貼り付けて、写真はFC2のディレクトリ内にあるので既存のアドレスと置き変えました。結果、写真は反映されましたが大きさが変えられず、画面いっぱいいっぱいに表示されてしまいました。 またどこもソフトのダウンロードが必須なようで、添付先のURLに書いてある必要なものはダウンロードしました。ただ、ファイルを同じ場所に作る、imgファイルを作ってそこに使いたい写真を入れる、というのも何だか疑問です。HPのタグではPCに入っているものに干渉できませんよね?ここの説明がよくわかっていないから出来ないのでしょうか? URL先のような綺麗なスライドショーを作るにはどうしたら良いのでしょうか… 他のサイトに掲載してあるタグを試しにやってみても上手く反映されませんでした。 タグを使わなくても簡単に出来る方法があればそれも教えて頂きたいです。 どうか詳しい方、お力を貸してください…

    • ベストアンサー
    • Mac
  • JavaScriptでスライドショーを作ってみたい。

    毎回お世話になっています。 僕は最近HP製作をしていて、だんだん慣れてきたので、JavaScriptやHTMLなどのスクリプト系にチャレンジしています。 ネットで調べてみると、JavaScript使ってスライドショーができるそうなのですが、スクリプトをコピーしてやってもうまくいきません。 http://www1.seaple.ne.jp/sirayuri/tenji/kawazu/kawazu.htm 上のアドレスのようにある、スライドショーのようにクロスフェードしながら写真を変えたいのですが、写真の一部しか出てこない、2枚目の写真が出てこないような問題が出てきます。 prImg1.srcの部分もわからないので、下のような感じでよろしいのでしょうか? prImg1.src="L:\***\img\top_pict.png"; SRC=保存先指定ですか? スクリプトの説明を見ていてもよくわからないので、ここに質問させていただきました よろしくお願いしますm(_ _)m

  • 別ウインドウを開くようにしてるのですが

    こんにちは HPで画像を開く際に、下のようなjavascriptを使っています。 <SCRIPT Language="JavaScript"> <!-- function openwin(url) { /* 横幅400px、縦幅200pxのウインドウを開く */ w = window.open(url, 'win','width=400,height=200,status=no,scrollbars=yes,directories=no,menubar=no,resizable=yes,toolbar=no'); } //--> </SCRIPT> body部分に <a href="javascript:openwin('abc.htm')">いろは </a> としています。 で、お教え願いたいのは、別のサイズのウインドウにしたいときはどうしたらいいのでしょうか? 普段は400×200でいいのですが、たまに400×400にしたいときがあります。 方法を教えてくださいませ よろしくお願いいたします。

  • スライドショー

    初めまして、ちゃりおと申します。 JavaScript初心者です。 あるページに静止画(.jpg)が3枚あって、それらをクリックするとアニメGIFにきりかわってスライドショーが始まる、という簡単なスクリプトをつくってみました。 ただ、これだと静止画の数が増えた場合に保守効率が悪くなってしまいます。JavaScriptを使うにしても、同じ機能を実現するためにもっとスマートな方法はないものでしょうか? 諸先輩方、お知恵をおかしください。 //スクリプトここから <html> <head> <title>slideshow</title> <script language="javascript"> <!-- function autoslide_aisa(){ document.n_aisa.src = "img/aisa_anime.gif"; } function autoslide_ann(){ document.n_ann.src = "img/ann_anime.gif"; } function autoslide_mipori(){ document.n_mipori.src = "img/mipori_anime.gif"; } // --> </script> </head> <body BGCOLOR="#FFFFFF"> <table border="0" cellpadding="0" cellspacing="0" width="80%" align="center"> <tr> <td align="center" valign="bottom"> <a href="javascript:autoslide_aisa()"><img src="img/aisa1.jpg" name="n_aisa" border="0" align="bottom"> </a> </td> <td align="center"> <a href="javascript:autoslide_ann()"><img src="img/ann1.jpg" name="n_ann" border="0"> </a> </td> <td align="center"> <a href="javascript:autoslide_mipori()"><img src="img/mipori1.jpg" name="n_mipori" border="0"> </a> </td> </tr> </table> </body> </html> //スクリプトここまで

  • スライドショーなんですが・・・。

    スライドショーで 下記のようなHTMLなのですが 一回停止をクリックしてから 再開をクリックすると 一枚目の写真に戻るようになっています。 停止したところから再開するにはどう直せばよいのですか? よろしくお願いします <HTML> <HEAD> <TITLE>スライド</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- var num = 1; var flag = 1; var Fm = new Array(5); Fm[0]=""; Fm[1]=" 一枚目"; Fm[2]=" 二枚目"; Fm[3]=" 三枚目"; Fm[4]=" 四枚目"; Fm[5]=" 五枚目"; function timer() { if(document.img.complete) { document.img.filters.blendTrans.Apply(); document.img.src = "photo" + num + ".JPG"; document.img.filters.blendTrans.Play(); document.Fmess.fmess.value = Fm[num]; num++; if(num >5) num = 1; } if(flag == 1) { TimerID = setTimeout("timer()", 5000); } } function crl() { clearTimeout(TimerID); flag = 0; } function restart() { TimerID = setTimeout("timer()", 5000); num = 1; flag = 1; } //--> </SCRIPT> <BODY BGCOLOR="#000000" TEXT="#FFFFFF" onLoad="setTimeout('timer()', 6000)"> <CENTER> <IMG NAME="img" SRC="写真01.JPG" style="filter:blendTrans(duration=1)"> <FORM NAME="Fmess"> <INPUT TYPE="text" NAME="fmess" VALUE=" 説明 " SIZE=50> </FORM> <A HREF="JavaScript:crl()">[停止]</A>    <A HREF="JavaScript:restart()">[再開]</A>    <A HREF="JavaScript:window.close()">[終了]</A> </CENTER> <BR> </BODY> </HTML>

  • スライドショーが出来ません。。

    web作成は全くの初心者で、今までいろんなサイトの見本のhtmlをコピペしてなんとか少しづつ形にになってきたのですが、どうしてもスライドショーができません、、、 こちらのサイト(http://kowaza.boo.jp/)の<スライドショー>  *  フェードインしながら次々と画像を表示 * というのを参考に作ってみたのですが、全然スライドショーになりません。 何がいけないのか全く分からないのですが、どこかおかしなところがありましたら教えて下さい。どうぞよろしくお願い致します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>スライドショーの実験</title> <script type="text/JavaScript"> <!-- var myspd = 200;            var myx = 5;             var mypic = new Array("myp1","myp2","myp3");    var mycnt = 0; var myp = 0; function mygo() { document.images[mypic[myp]].filters['alpha'].opacity = mycnt; mycnt += myx; if(mycnt >= 100) { mycnt = 0; myp++; } if(mypic.length <= myp) return; setTimeout("mygo()",myspd); } //--> </script> </head> <body onLoad="mygo()"> <span style=" position:absolute ; top:20px ; left:20px ; z-index:1;"> <img src="top.jpg" width="300" name="myp1" border="0" style="filter:alpha(opacity=0);"></span> <span style=" position:absolute ; top:40px ; left:50px ; z-index:2 ;"> <img src="before.jpg" width="300" name="myp2" border="0" style="filter:alpha(opacity=0);"></span> <span style=" position:absolute ; top:60px ; left:80px ; z-index:3 ;"> <img src="after.jpg" width="300" name="myp3" border="0" style="filter:alpha(opacity=0);"></span> </body> </html>

  • スライドショー(1回)が思うように動作しません

    下記のjavascriptをホームページを参考にして記述したのですが、スライドショースタートをクリックするとスライドショーが表示されるのですが、ページを表示したときは、画像が×になっています。どのようにしたら画像が表示されるのですか <html> <head> <title>zyoutou</title> </head> <body background="yoru.gif"> </body> <SCRIPT LANGUAGE="JavaScript"> <!-- if (navigator.appVersion > "3") { phot_a = new Image(); phot_a.src = "1.jpg" phot_b = new Image(); phot_b.src = "2.jpg" phot_c = new Image(); phot_c.src = "3.jpg" 省略 phot_i = new Image(); phot_i.src = "9.jpg" phot_j = new Image(); phot_j.src = "10.jpg" phot_k = new Image(); phot_k.src = "11.jpg" phot_l = new Image(); phot_l.src = "12.jpg" } function bbb(b1,b2) { if (navigator.appVersion > "3") { document.images[b1].src = eval(b2); } } function ccc() { if (navigator.appVersion > "3") { bbb('img2','phot_b.src') setTimeout("bbb('img2','phot_a.src')",1000) setTimeout("bbb('img2','phot_b.src')",2000) setTimeout("bbb('img2','phot_c.src')",3000) 省略 setTimeout("bbb('img2','phot_i.src')",9000) setTimeout("bbb('img2','phot_j.src')",10000) setTimeout("bbb('img2','phot_k.src')",11000) setTimeout("bbb('img2','phot_l.src')",12000) } } <!----> </SCRIPT> <IMG src=""2.jpg" name="img2">      <A href="javascript:ccc()" >スライドショー スタート</a> </html>

  • JavaScriptでスライドページを作る

    JavaScriptでスライドページを作りたいの ですが <SCRIPT language=JavaScript> <!-- function cc(slide) { dis=Math.abs(600/slide); while(dis>0) { dis--; scrollBy(slide,0); } } //--> </SCRIPT> ↑だと横にスクロールが出来るのですが 下にスクロールさせるにはどのように すればよいのでしょうか? どなたかご教授お願いしますm(_ _)m

  • スライドショーを中央にしたい

    ホームページビルダー6.0を使用してます。 スライドショーがモニターの大きさに関係なく中央に表示させたいのですが出来ません。 以下のタグの何処を直せば良いのでしょうか? 宜しくお願いします。 [タグ] </SCRIPT></HEAD> <BODY bgcolor="#999999" text="#0000ff" link="#0000ff" vlink="#0000ff" alink="#0000ff" onload="HpbSlideInit(false, 4000, 'Layer6', 'Layer3', 'Layer1', 'Layer2', 'Layer3');"> <DIV style="width : 640px;height : 481px;top : 50px;left : 50px; position : absolute; z-index : 6; " id="Layer6">

  • JavaScriptでスライドショーを実現したい

    JavaScriptでスライドショーのようなページを作成中です。 100枚くらいの連番ファイル名の画像を、 tableを使って5×20くらいでサムネイル表示させ、 その1つの画像をクリックすると、window.openを使って 新ウィンドウを開き、そのウィンドウにDocument.writelnを使って 選択した画像を表示し、その下にフォームのボタンを配置し、 ボタンを押すことで、次の画像に切り替えることができる。 という風にしたいのですが、 フォームのボタンを押すことで画像を切り替える、 というのが実現できません。こんな感じです。  writeln("<input type='button' value='前の写真' onclick='ChangeImage(-1)'>");  writeln("<input type='button' value='次の写真' onclick='ChangeImage(1)'>"); つまり、フォームのボタンを押して、画像を切り替える関数に 飛んでいないようです。 恐らく、その新ウィンドウに、 関数が登録されていないからだと思うのですが、 JavaScriptをまだよく分かっていないので、 その辺がよく分かりません。 新ウィンドウに関数をDocument.writelnで出力しようとすると、 <script language="JavaScript">の部分で、なぜか文字化けしてしまい、 関数を新ウィンドウに組み込ませることもできませんでした。 ソースがなくて分かりづらいとは思いますが、 なにかよい方法がありましたら、ご教授下さい。