PHP初心者のための画像スライドショー作成方法

前へ 次へ
このQ&Aのポイント
  • PHP初心者でも簡単に画像のスライドショーを作成する方法について教えてください。
  • 画像をアップロードしてリサイズし、PHPとjQueryを組み合わせて次へボタンをクリックすると画像がスライドするようなスライドショーを作成したいと思っています。
  • ソースコードを用意しましたが、うまくスライドしない部分があります。手直しや新しいアプローチを教えてください。
回答を見る
  • ベストアンサー

PHP初心者です。

PHP初心者です。 画像を何枚かアップロードし、リサイズをしてImagesフォルダ に収めたのですが、それをPHPとJRUQEYと組み合わせて「次へ」 ボタンをクリックすると、アップロードした順番に画像が スライドするというのを作りたいのですが、スライドする所 でつまづいています。どなたかご教授お願い致します。 　 　ただ、初心者ですのでごく基本的な関数でお願いしたいのと、 質問の内容は実用的ではないと思いますが、どうか宜しく お願い致します。 　以下がソースになりますが、手直しもしくは新しいものが あれば宜しくお願い致します。 <html> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <script src="jquery.js"></script> <script> pic=new Array; c=0; <? $dir=opendir("./images/"); $cnt=0; while( $f=readdir($dir) ){ if(is_file("./images/".$f)){ print("pic[".$cnt."]='".$f."';\n"); $cnt++;} } ?> $(function(){ $("img").attr("src","images/"+pic[c]); }); $cnt=0; $(function btn(){ cnt++; $("img").attr("src","images/"+pic[c]); }); </script> <body> <img /> <form method="post"> <input type="button" value="次へ" onclick="btn()"> </form> </body> </html> 　 　宜しくお願い致します。

  • PHP
  • 回答数2
  • ありがとう数1

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

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 どのようにうまく行かないのかを質問内容に含めたほうが回答が付きやすいですよ。 スクリプト内に修正コメント入れてみました。 <script> pic=new Array; //いらない //c=0; <? $dir=opendir("./images/"); $cnt=0; while( $f=readdir($dir) ){ if(is_file("./images/".$f)){ print("pic[".$cnt."]='".$f."';\n"); $cnt++;} } ?> //いらない //$(function(){ //$("img").attr("src","images/"+pic[c]); //}); //間違い(JavaScriptの変数に$はいらない) //$cnt=0; cnt = 0; $(function btn(){ //手直ししました //cnt++; //$("img").attr("src","images/"+pic[c]); //まずは画像を表示(cという変数は無い,cntの間違い) //$("img").attr("src","images/"+pic[c]); $("img").attr("src","images/"+pic[cnt]); //変数をカウントアップ cnt++; //画像数を超した場合の処理 //「次へ」ボタンへdisableを設定し押せなくする if(cnt>=pic.length) { $('#btn-next').attr('disabled','disabled'); } }); </script> ボタンにid="btn-next"を追加しフォルダ内の画像数をオーバーしないようにています。 後はいろいろ工夫すれば「最初へ」や「最後へ」や「戻る」ボタンも可能です。

42ceo1014
質問者

お礼

有難う御座いました。 初歩的な間違いをしていました。 「どのようにうまく行かないのかを質問内容に含めたほうが回答が付きやすい」→そうですね！これからそのように致します。 有難う御座いました。

その他の回答 (1)

  • shimix
  • ベストアンサー率54% (865/1590)
回答No.2

このphpスクリプトにアクセスしたときに、ブラウザにはどういうhtmlソースが返っていますか（ブラウザの「ソース表示」で確認してください）。 そのhtmlソースが質問者三の意図したとおりであれば、phpスクリプトとしては何の問題もありません。あとはJavaScript（jQuery）の問題です。 とりあえず while( $f=readdir($dir) ){ は while(($f=readdir($dir)) !== false) { とすべきでしょうけどね。 http://jp2.php.net/manual/ja/function.readdir.php

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. PHP

関連するQ&A

  • javascriptのスライドショーで、ポイント時に代替テキストを表示するか、ポイントしなくてもキャプションを表示するためには？

    初心者ですが何とかjavascriptで自動のスライドショーを動かしています。写真にポイントした時にalt等で代替テキストを表示するか、ポイントしなくてもキャプションを表示するためにはどのような記述が必要なのでしょうか？ スタイルシートは使っていません。 現在はこんな感じです。 根本的に違うのでしょうか？できれば簡単な方法があればと思います。 head部には <SCRIPT> <!-- var img = "1.JPG,2.JPG,3.JPG"; var imgs = img.split(","); var i=0; var pic = new Array(); for(cnt=0; cnt<imgs.length; cnt++){ pic[cnt] = new Image(); pic[cnt].src = imgs[cnt]; } function sulaidoImg1() { i++; i%=imgs.length; imgFil1.filters.blendTrans.Apply(); imgFil1.src = pic[i].src; imgFil1.filters.blendTrans.Play(); } //--> </SCRIPT> 対象部分には <SCRIPT> <!-- imgFil1.src=pic[0].src; setTimeout("sulaidoImg1()", 3000); //--> </SCRIPT>

  • 文書オブジェクトについて？？？

    フォームボタンの画像を入れ替えたいのですが、 正しく動きません。何が悪いのでしょうか？ 文字コードはEUC-JPを使っていますが、関係あるのでしょうか？ <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <TITLE>Javascript</TITLE> <script type="text/javascript"> <!-- function btn_click(dat) { if(teban == 1){ document.forms['btn'].elements['btn1'].src = "./img/b.gif"; }else{ document.forms['btn'].elements['btn2'].src = "./img/d.gif"; } } --> </script> </HEAD> <BODY> フォームのボタンを使ってクリックすると画像が変わる　　ようにしたい <form name="btn"> <input name="btn1" type="image" src="./img/a.gif" onClick="play_start(1); return false;"> <input name="btn2" type="image" src="./img/c.gif" onClick="play_start(2); return false;"> </form> </BODY> </HTML>

  • JavaScriptのスライドショー　IE以外のブラウザで再生できない

    JavaScriptのサンプルソースを提供されている方のサイトから コピーして使用させていただいているものです IEでは再生OKなのですが、Firefox、GoogleChrome、Safariで再生させるように改変することは可能でしょうか？ <script> <!-- var img = "1.jpg,2.jpg,3.jpg"; var imgs = img.split(","); var i=0; var pic = new Array(); for(cnt=0; cnt<imgs.length; cnt++){ pic[cnt] = new Image(); pic[cnt].src = imgs[cnt]; } function sulaidoImg1() { i++; i%=imgs.length; imgFil1.filters.blendTrans.Apply(); imgFil1.src = pic[i].src; imgFil1.filters.blendTrans.Play(); } //--> </script> BODY内↓ <img id="imgFil1" style="FILTER: blendTrans(duration=1)" onfilterchange="setTimeout('sulaidoImg1()',4000)" border="1"><br> <script> <!-- imgFil1.src=pic[0].src; setTimeout("sulaidoImg1()", 4000); //--> </script>

  • bxsliderが動かない

    Javascript初心者なのですが、自分のサイトにbxsliderを置きたいと思っています。 試しに白紙のHTMLファイルに以下のように記述してみました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.bxslider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxslider({ auto: true, }); }); </script> </head> <body> <ul class="bxslider"> <li><img src="images/pic1.jpg"></li> <li><img src="images/pic2.jpg"></li> <li><img src="images/pic3.jpg"></li> <li><img src="images/pic4.jpg"></li> </ul> </body> </html> jsやcssの場所は正しいです。 しかし、表示してみると画像が4枚縦に並んで表示されるだけとなってしまいます。 Firefox, Chrome、IEの各最新版で試しましたが同様でした。 どの部分が間違っているのでしょうか？ご教授お願いします。

  • jQueryのフェードイン・アウト効果について

    いつもお世話になります。 jQueryを使いタブメニューに画像ボタンを使って内容の切り替えをし、切り替え時にフェードイン・アウトの効果を出したいと思います。 以下がソースです。 <!-- html --> <div id="wrapper"> <ul id="tabMenu"> <li class="tab_a"><img src="tab1.png"/ ></li> <li class="tab_b"><img src="tab2_2.png" /></li> <li class="tab_c"><img src="tab3_2.png" /></li> </ul> <div id="tab_a"> tab_aの内容 </div> <div id="tab_b"> tab_bの内容 </div> <div id="tab_c"> tab_cの内容 </div> </div> <!-- jQuery --> var img_dir = "http://www.hogehoge.com/images/"; jQuery(function(){ // tab_aボタンをクリックした時の処理 jQuery(".tab_a").click(function(){ jQuery("#tab_a").css("display", "block"), jQuery("#tab_b").css("display", "none"), jQuery("#tab_c").css("display", "none"), jQuery(".tab_a img").attr("src", img_dir + "tab1.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3_2.png"), }); // tab_bボタンをクリックした時の処理 jQuery(".tab_b").click(function(){ jQuery("#tab_a").css("display", "none"), jQuery("#tab_b").css("display", "block"), jQuery("#tab_c").css("display", "none"), jQuery(".tab_a img").attr("src", img_dir + "tab1_2.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3_2.png"), }); // tab_cボタンをクリックした時の処理 jQuery(".tab_c").click(function(){ jQuery("#tab_a").css("display", "none"), jQuery("#tab_b").css("display", "none"), jQuery("#tab_c").css("display", "block"), jQuery(".tab_a img").attr("src", img_dir + "tab1_2.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3.png"), }); }); 上記のコードでタブの切り替えは出来ましたが、ここからどう追記すれば切り替え時にフェード効果を付けれるのか分かりません。 やり方を検索し調べてはいるものの、解決に至らないので相談させていただきました。 よろしくお願いします。

  • 同HTML内で複数のjQueryを設置したいです

    買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか？ 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>

  • スライドショーにフェード効果と再ランダム表示を…

    前回、重複しない画像選びを教えて頂き、その後の続きを頑張ってみましたが 策が尽きてしまいました。皆様のお力をお借りできないでしょうか。 【※現在の状況】 ・[A]→[B1]→[B2]→[C]の順番で再生 ・[A] [C]は固定（指定）画像を表示、[B1] [B2]はB1～5.jpgの中からランダムに表示し、重複選択を回避しています。 上記にさらに下記機能をプラスしたいと思っております。 【実現したいこと】 ・クロスフェード（またはフェードイン、アウト）を実装したい。 ・初回再生時にランダムで取得した画像を、リピート再生時にもう一度ランダム読込み表示させたい。 形式は上記内容を踏まえた物であれば、まったく違うものになっても構いません。 どうか助けて頂けないでしょうか。よろしくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SLIDESHOW</title> <script type="text/javascript" src="http://medienfreunde.com/lab/innerfade/js/jquery.js"></script> <script type="text/javascript" src="http://medienfreunde.com/lab/innerfade/js/jquery.innerfade.js"></script> <SCRIPT LANGUAGE="JavaScript"> <!-- var imgA = ["images/A.jpg"], 　　 imgB = new Array(); imgB[0] = "images/B1.jpg"; imgB[1] = "images/B2.jpg"; imgB[2] = "images/B3.jpg"; imgB[3] = "images/B4.jpg"; imgB[4] = "images/B5.jpg"; var n1 = Math.floor(Math.random()*imgB.length); while ( true ) { var n2 = Math.floor(Math.random()*imgB.length); // n1とn2がちがっていればループ終了　同じの場合はもう一度ランダム実行 if ( n1 != n2 ) break; } 　　imgC = ["images/C.jpg"]; cnt = 0; interval = 1000; function img_slide(){ //以下枚数分繰り返し if(cnt==0) {document.show.src=imgA; cnt++; }else if(cnt==1) {document.show.src=imgB[n1]; cnt++; }else if(cnt==2) {document.show.src=imgB[n2]; cnt++; }else if(cnt==3) {document.show.src=imgC; cnt=0; } } function img_move(){ img_slide(); timerID = setTimeout("img_move()",interval); } // --> </SCRIPT> </head> <body onload="img_move()"> <div> <img src="images/A.jpg" name="show" width="300" height="250" > </div> </body> </html>

  • 画像を使用したタブを複数設置

    下記、サイトを参考にタブ切り替え式のjQueryを設置しました。 http://web.showjin.me/2011/05/jquery_tab_image.html これを同じファイル内に複数設置したく 同じscriptをjsファイルに3つコピーし 設置しましたが、エラーで動かなくなったので 各、ul.btn_tab li aのtab部分tab01、tab02、tab03とし、 .container_tabをcontainer_tab01～03、 a.selectedをa.selected01～03と それぞれ変更してみました。 上記の方法で動作は実現できたのですが、 これをもっとスマートなscriptにする方法があればご教授頂けないでしょうか。 どうぞ宜しくお願い致します。 id、classを修正し、以下を3パターン設置しています。 javascript ================ /* クリックしたときに出る点線を防ぐ（IE対策）*/ $(function(){ $("ul.btn_tab li a").focus(function(){ $(this).blur(); }); }) /* タブボタンのon/offとタブの内容を切り替える */ $(function(){ /* 初期設定 */ $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); $(".container_tab div:not("+$("ul.btn_tab li a.selected").attr("href")+")").hide(); /* クリック時の処理 */ $("ul.btn_tab li a").click(function(){ // 今のul.btn_tab li a.selectedのhrefの値を保持しておく var name1=$("ul.btn_tab li a.selected").attr("href"); $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); $("ul.btn_tab li a").removeClass("selected"); $(this).addClass("selected"); /* クリックした画像はmouseoverで_onが付けられているので、そのままだと_on_onとなり、画像へのパスが通らなくなる。 なので、今付いている_onをいったん削除してから再度_onを付け直す */ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); // 保持しておいたhrefの値のdivの内容がフェードアウトしたら、クリックされたボタンのhrefの値のdivの内容をフェードインする $(name1).fadeOut(500,function(){ // クリックされたul.btn_tab li a.selectedのhrefの値を保持 var name2=$("ul.btn_tab li a.selected").attr("href"); $(name2).fadeIn(500); }); return false; }) }) /* マウスオーバー時の処理 */ $(function(){ $("ul.btn_tab a").mouseover(function(){ /* セレクタがついているかどうかの条件判断はマウスオーバーとマウスアウトのそれぞれに対して設定する。 マウスオーバー時だけだと、クリックした後、マウスアウトするときに_onが外されて通常時の画像になってしまうため */ var className = $(this).attr('class'); if(className!='selected'){ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")) } }).mouseout(function(){ var className2 = $(this).attr('class'); if(className2!='selected'){ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")) } }) })

  • PHP POSTについて質問です

    　　 こんにちわ PHP初心者です。 今ショッピングカートづくりをしています。 そこでピンチなのでご指導お願いいたします。 商品を発送する送り先情報を必要な数だけonclickで一件一件増やしもらって その情報を次のページで確認してもらうようにしたいのですが <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var tbl_cnt = 1; jQuery(document).ready(function($) { $('#add_btn').click(function() { var original = $('#form_set_' + tbl_cnt); tbl_cnt++; $(original).clone().insertAfter(original) .attr('id', 'form_set_' + tbl_cnt) .find('label').each(function(idx, obj) { $(obj).attr('for', $(obj).attr('for').replace(/_[0-9]+$/, '_' + tbl_cnt)); }).end() .find('input').each(function(idx, obj) { $(obj).attr({ 'id' : $(obj).attr('id').replace(/_[0-9]+$/, '_' + tbl_cnt), 'name' : $(obj).attr('name').replace(/_[0-9]+$/, '_' + tbl_cnt) }).val(''); }); }); }); </script> <form action="shop_check.php" method="post"> <table id="form1"> <tbody> <tr> <td><label for="okuriname">氏名</label></td> <td><input type="text" id="okuriname" name="okuriname[$i]"></td> </tr> <tr> <td><label for="okuriemail">email</label></td> <td><input type="text" id="okuriemail" name="okuriemail"></td> </tr> <tr> <td><label for="okuripostal1">郵便番号</label></td> <td><input type="text" id="okuripostal1" name="okuripostal1">-</td> <td><input type="text" id="okuripostal2" name="okuripostal2"></td> </tr> <tr> <td><label for="okuriaddress">住所</label></td> <td><input type="text" id="okuriaddress" name="okuriaddress"></td> </tr> <tr> <td><label for="okuritel">電話番号</label></td> <td><input type="text" id="okuritel" name="okuritel"></td> </tr> </tbody> </table> <input type="button" value="送り先の追加" id="add_btn"><br> <input type="submit" value="送信" name="submit"> </form> この後どのようにしたら次のページで 複数の情報を受け取ればいいのでしょうか？ （javascriptはweb上にあったものを引用してます。） javascriptの事もわかっていませんなのでお手柔らかにおねがいします。

    • ベストアンサー
    • PHP
  • プログラムのみで複雑に画像を変える方法役

    クリックすると画像が次々と変わるものを作りたいのですが、 下記方法では画像の枚数が増えたり、複雑な動作を作る場合、 複雑な構造になってしまうと思うのですが、 少しでも複雑にならない方法はありますか？ フラッシュは使わずにプログラムだけで 同じ位置で画像を変えたいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script language="JavaScript"> <!-- var img1 = new Image(100,50); var img2 = new Image(100,50); var img3 = new Image(100,50); var img1.src = "sample1.gif"; var img2.src = "sample2.gif"; var img3.src = "sample3.gif"; function mF1(){ document.images[0].src = img1.src; setTimeout("mF2()",100); } function mF2(){ document.images[0].src = img2.src; setTimeout("mF3()",100); } function mF2(){ document.images[0].src = img3.src; } //--> </script> </head> <body> <img src="omote.jpg" width="100" height="50" onclick="mF1()"> </body> </html> あと、document.images[0].srcを変数として格納すると動作しないのですが、 document～というのは変数にできないのでしょうか。 var dcum = document.images[0].src; function mF1(){ dcum = img1.src; setTimeout("mF2()",100); } function mF2(){ dcum = img2.src; setTimeout("mF3()",100); } function mF2(){ dcum = img3.src; }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する