Camera slideshowの使い方について

2023/09/05 12:32

このQ&Aのポイント

jQueryプラグイン'Camera slideshow'を使い方について調べてみました。
しかし、試しに使ってみたところ全く動かない状況です。
改善方法や間違っている箇所についてご教授いただけると助かります。

ベストアンサー

Camera slideshowの使い方について

2013/10/23 23:37

jQueryプラグイン"Camera slideshow"を試しに使ってみたのですが、まったく動きません。どこが間違っているのか見当もつかなく困っています。【head内】 <head>  <link rel="stylesheet" id="camera-css" href="/camera.css" type="text/css" media="all"> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.mobile.customized.min.js"></script> <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/js/camera.js"></script> <script type="text/javascript" charset="utf-8"> <script type="text/javascript"> jQuery(function(){ jQuery('#camera').camera(); }); }); </script> </head> 【HTML部】 <div class="camera_wrap camera_blue_skin" id="camera"> <div data-src="../images/slides/bridge.jpg"></div> <div data-src="../images/slides/leaf.jpg"></div> <div data-src="../images/slides/road.jpg"></div> </div> この情報だけで質問をするのが失礼だったらすいません。初心者なもので誠に申し訳ございませんが、改善方法をどなたかご教授いただければ大変助かります。よろしくお願いしますm(_ _)m

mozu821
お礼率28% (2/7)

JavaScript
回答数7
ありがとう数2

みんなの回答 （7）
専門家の回答

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

ベストアンサー

warpspace
ベストアンサー率56% (83/147)

2013/10/27 15:46 回答No.7

誤っています。　jQuery.noConflict();　←　これは不要　jQuery("#camera").camera({ 　　height: "50%",　　←　カンマは不要　　}); 　}); 　　　　　↓ 　jQuery(function(){　←　これがない。　　jQuery('#camera').camera({ 　　　height: "50%" 　　　}); 　});

その他の回答 (6)

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2013/10/25 01:12 回答No.6

スクリプトエラーが出ずに終了するのなら確かに原因がわかりにくいですが、とりあえず開発用のツールで確認して、ケアレスミス、スクリプトエラーをなくしてみる事をお勧めします。

質問者

お礼 2013/10/25 12:49

そうしてみます。一連のアドバイスありがとうございました。

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2013/10/24 19:25 回答No.5

あともう一つ、 <script type="text/javascript" charset="utf-8"> <script type="text/javascript"> jQuery。。。（略）となってますが、charsetが書かれている<script>が閉じられていません。 BBS投稿時のコピーミスでなければ、不要なタグを消して見てください。

質問者

補足 2013/10/24 22:41

おっ--！転記ミスでした。ご指摘ありがとうございます。実際は閉じております。

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2013/10/24 19:05 回答No.4

jQuery(function(){}) とされてますが、jQuery.noConflict()はされてますか？

質問者

補足 2013/10/24 23:01

衝突を避けるやつでしょうか。やってみました。うんともすんとも動きませんーー。今のところ単独ですのでこれなしでも動いてくれるはずなんですが。。。 ↓サイトで動いているページです↓ http://www.noramasa.com/test/js_camera/ ↓今回私どもの動かないページです↓ http://www.yorozu-ako.com/index_tpl.html ※投稿時より少し変わっているかもしれません ※index_tpl.htmlはテキトーに作っただけですこれまでのご教授本当に感謝いたします。

warpspace
ベストアンサー率56% (83/147)

2013/10/24 17:37 回答No.3

ANo.2です。一度、IE 開発者ツールでHTMLとJavaScript のデバッグを行うことをお勧めします。

参考URL：: http://blogs.msdn.com/b/osamum/archive/2011/08/04/f12-ie9-html-javascript.aspx

warpspace
ベストアンサー率56% (83/147)

2013/10/24 12:32 回答No.2

スクリプトのパスは正しいですか？。全体のファイル構成が不明なのではっきりとは言えませんが、ひょっとして src="/js/xxxxx.js"　→　src="js/xxxxx.js" ではありませんか？。

質問者

補足 2013/10/24 16:56

アドバイスありがとうございます。スクリプトのパスは通っているんです。もちろんsrc="js/xxxxx.js"でも試しましたがダメでした。構成は、 www.ドメイン　/js 　　　/jquery.min.js 　　　/jquery.mobile.customized.min.js 　　　/jquery.easing.1.3.js 　　　/js/camera.js 　/images 　　　/各画像　/camera.css です。複数の使い方を示したサイトを参考にしましたが、原因箇所の見当つきません。サーバーの問題でしょうか？　　　

oldpapa70
ベストアンサー率34% (682/1991)

2013/10/23 23:55 回答No.1

撮影したカメラでスライドショーをみたいと言うことでしょうか？もしそうなら、カメラそのもののプログラム（？）で設定とか（カメラメーカーにより設定以外の名前になっているかも知れません）を選択すればスライドショウの項目があると思いますが。もしわからなければ、一度カメラの取り説を見てみましょう

質問者

お礼 2013/10/24 08:20

ご連絡ありがとうございます。 Camera slideshowはスクリプトのプラグインになり、今回の件では撮影したカメラ機器は関与しておりません。 ↓をウェブサイトで動かそうとしているだけです。 http://www.pixedelic.com/plugins/camera/ また何かありましたらご教授お願いします。

関連するQ&A

スライドショーについて
ど～もど～も。よろしくです。http://okwave.jp/qa5423914.html 上のURLでの質問はjQueryじゃなくて「TinySlideshow」ってやつだったんだけど、jQueryだったらどうなるのかな？私も同じような設計で悩んでてピッタシと思うのがやっとあった！と思ってたら・・・jQueryじゃないみたい（泣）私のしたいことはjQueryを使ったスライドショーで、時間によって色んな画像がころころと変わるようなものを作りたいです。ソースを貼っておくのでよろしくお願いします。ｈｔｍｌファイル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD><TITLE>test</TITLE><META content="text/html; charset=utf-8" http-equiv=Content-Type><META content=IE=7 http-equiv=X-UA-Compatible> <LINK rel=stylesheet type=text/css href="css/style.css"> <LINK rel=stylesheet type=text/css href="css/ie6.css"> <LINK rel=stylesheet type=text/css href="css/backnumber.css"> <LINK rel=stylesheet type=text/css href="css/lightview.css"> <LINK rel=stylesheet type=text/css href="css/shopcruise.css">  <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/jquery-1.3.2.js"></SCRIPT> <SCRIPT type=text/javascript>　jQuery.noConflict();　</SCRIPT><SCRIPT type=text/javascript src="js/jquery.easing.1.3.js">/SCRIPT> <SCRIPT type=text/javascript src="js/jquery.galleryview-1.1.js"></SCRIPT><SCRIPT type=text/javascript src="js/jquery.timers-1.1.2.js"></SCRIPT><SCRIPT type=text/javascript>　jQuery(document).ready(function(){jQuery('#slide').galleryView({ panel_width: 638,panel_height: 300,frame_width: 80,frame_height: 38,transition_interval: 3000,overlay_height: 0　});});　</SCRIPT>  <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/swapimage.js"></SCRIPT> <SCRIPT type=text/javascript src="js/prototype.js"></SCRIPT> <SCRIPT type=text/javascript src="js/scriptaculous.js"></SCRIPT> <SCRIPT type=text/javascript src="js/lightview.js"></SCRIPT> </HEAD><BODY><DIV id=slide class=galleryview>  <DIV id=gallery_box>  <DIV class=panel><IMG alt="○○○　src="./images/1.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/2.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/3.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/4.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/5.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/6.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./imagess/7.jpg" width=640 height=300> </DIV>   <UL class=filmstrip> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_7s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_2s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_3s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_4s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_5s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_6s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_1s.jpg"> </LI></UL> </DIV> </DIV></BODY></HTML> 長くなっちゃってごめんなさい。困っているので、お願いします。
- 締切済み
- JavaScript
crossSlideがうまく機能しないです；
簡単な画像切り替えのプラグインとして、 crossSlideを見つけたので使用してみようとしたんですが、全く何も表示されない状態で困っています。下記のようにソースは記載しています。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="ja" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <link href="css/index.css" rel="stylesheet" type="text/css"> <script type='text/javascript' src='js/jquery-1.9.1.min.js'></script> <script type='text/javascript' src='js/jquery.cross-slide.js'></script> <script type="text/javascript"> $(function(){ $('#mainvisual').crossSlide({ sleep: 1, fade: 1 },[ { src: 'images/01.jpg' }, { src: 'images/02.jpg' }, { src: 'images/03.jpg' } ]); }); </script> </head> <body> <p>タイトル</p> <div id="mainvisual"> <p>写真</p> </div> </body> </html> cssは何も指定していません。 jsフォルダに、jquery-1.9.1.min.jsファイル、jquery.cross-slide.jsファイルを入れています。 imagesフォルダには、01.jpg、02.jpg、03.jpgを入れてます。ブラウザには <p>タイトル</p> は表示されるのですが、 div#mainvisualの中の <p>写真</p>の文字は表示されません。何が原因なのでしょうか。よければアドバイスの方よろしくお願いします。
- ベストアンサー
- JavaScript
jquery.bgSwitcherが設置できない
私は、いまbgSwitcherの設置ができなくて悩んでいます。「fadeOut」を利用したいのですが、画像は表示されるのですが、そこから何も動きません。だれか分かる方がいらっしゃれば是非教えていただきたいので、宜しくお願いします。 ▼私の現在の状況************************************************************ <!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>○○○</TITLE> <META name="keywords" content="○○○"> <META name="description" content="○○○"> <meta name="robots" content="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/lightbox/js/prototype.js"></script> <script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgSwitcher.js"></script> <script> jQuery(document).ready(function($) { $('#fadeOut').bgSwitcher({ images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'], interval: 2000 }); }); </script> </head> <body> <div id="wrap"> <div id="container"> | 途中は省略 ↓ <div id="fadeOut" class="bg"><p><img src="images/top_main.png" width="670" height="450" /></p></div> | ↓ 以下省略。ちなみに「class="bg"」は、 .bg { 　width: 640px; 　height: 415px; 　margin: 0; 　padding: 0; } こういった感じです。 *************************************************************************** これで、なぜ動かないのでしょうか？このプラグインは、jquery.bgSwitcher.js 自体を何か編集する必要があるのでしょうか？開発された方のサイトを隅から隅まで見ても分かりませんでした。 ▼開発者様のサイト http://rewish.org/javascript/jquery_bg_switcher ちなみに、jQueryのバージョンは、jquery-1.7.1.minです。どなたか、ご助力をお願い致します。
- 締切済み
- JavaScript
複数jQueryの配置で干渉　設置位置
Javascript事は全くわかりませんが、色々なプラグインとしてjQueryを利用しています。 ----------------- jQueryに干渉があったようで、正常に動作させたいのですが、疑問があります。１サイト目（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 正常に動作します。２サイト目（HTML head内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> 正常に動作します。上記の２サイトを合体させた：（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script src="js/abcd.js" type="text/javascript"></script> すると、 layout.min.jsに不具合がでるようです・・・ <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> でも、ダメです。 <script src="vendor/jquery.min.js" type="text/javascript"></script> を <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> に変更してもダメでした。 tel.js内を、 jQuery.noConflict(); (function($) { $(function(){ を $j に変えたり、 jQuery に書き替えてもダメでした・・・そこで、以下のように移動しましたら動作しました。（HTML header内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> （HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 上記のように、 HTML head部と、HTML 最下部に分けるのは、正しい方法なのでしょうか？
- 締切済み
- JavaScript
同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>  <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> <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>  </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
教えてください!　lightboxとskitter
javascriptがまだよく理解できていないので、愚問に思われるかもしれないですが、上手く動作しなくて困っています。 <head>内に下記のように記述したのですが、lightboxが上手く作動しません。記述に問題があるんでしょうが、調べても全くわからないのでこちらに投稿させていただきました。どなたかこの問題の解き方をお教えください。よろしくお願いします。 <link rel="stylesheet" type="text/css" href="css/lightbox.css">  <script src="js/prototype.js" type="text/javascript"></script> <script type="text/javascript" src="js/builder.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/smartRollover.js"></script>  <script type="text/javascript" src="js/jquery.quickflip.source.js"></script> <link rel="stylesheet" type="text/css" href="css/skitter_css/skitter.styles.css">  <style type="text/css"> .box_skitter_large{ width:490px;height:190px; } </style> <script type="text/javascript" src="js/skitter_js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.skitter.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.animate-colors-min.js"></script> <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({interval: 8000});  //$('.box_skitter_large').skitter({thumbs: true, label: false,}); }); </script>
- ベストアンサー
- JavaScript
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の各最新版で試しましたが同様でした。どの部分が間違っているのでしょうか？ご教授お願いします。
- ベストアンサー
- JavaScript
Jqueryスライダーが動きません。
WEB制作の素人です。簡単といわれている「FlexSlider2」ですが、私がやったところ、画像は出たもののスライドにならず、そのまま上下に出てしまいます。一度見ていただき、間違えを教えていただけますか？（ちなみにスムーススクロールは動きます）  <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script>    </head> <body id="@@(id)@@"> <div id="wrapper">  <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p>  <div id="main_visual"> <div class="flexslider"> <ul class="slides"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします。
- ベストアンサー
- JavaScript
jQuery LightBox Plugin動かず
複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加これで完了のはずですが、しかし動作しません。画像のページが開いてしまいます。なぜ動かないのでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。
- ベストアンサー
- JavaScript
画像スライドショー用のjQueryを埋め込みたい
画像スライドショー用のjQueryを埋め込みがしたいです。埋め込みたい物は以下のサイトの物です。 http://www.zurb.com/playground/orbit-jquery-image-slider ここの本文にもあるのですが私の思う通りにまずは記載します。 header部分に <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.orbit.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/orbit.css"> を記載し埋め込みたい場所に <div id="featured"> <img src="overflow.jpg" alt="Overflow: Hidden No More" /> <img src="captions.jpg" alt="HTML Captions" /> <img src="features.jpg" alt="and more features" /> </div> を記載するまではわかるのですが、 <script type="text/javascript"> $(window).load(function() { $('#featured').orbit(); }); </script> はどこに記載するのでしょうか？？またデレクトリーはどこにいれればいいのでしょうか？？基礎的な質問で申し訳ございませんが、教えて頂ける方宜しくお願い致します。
- ベストアンサー
- JavaScript