自作ホームページでＦａｎｃｙＺｏｏｍが動作しない
- 自作ホームページでＦａｎｃｙＺｏｏｍが動作しない問題について
- ＦａｎｃｙＺｏｏｍの導入に挑戦しましたが、動作せず困っています
- 詳細な手順を実施したにもかかわらず、ＦａｎｃｙＺｏｏｍが機能しない問題を解決できませんでした
- ベストアンサー
自作ホームページで「ＦａｎｃｙＺｏｏｍ」が動作しません
当方HTMLの知識が多少（といっても遊びの簡単なHP作成が可能な程度）あるだけの者です。 最近会社のHPを立ち上げることにしました。 そのHPでは画像を沢山使うことになり、「FancyZoom」を導入することにしました。 そこでGIGAZINEのFancyZoom紹介ページ （http://gigazine.net/index.php?/news/comments/20080208_fancyzoom/） を参考に導入に挑戦してみました。 しかし実際に出来上がったhtmlファイルでは、FancyZoomが動作せず、 <a>タグで挟んだサムネイル画像をクリックしても、単純にリンク先の画像のみが表示されるだけになってしまいます。 ローカルでも、ocnの無料レンタルサーバー上でも動作しません。 しかし、何故か同じファイルをfc2ホームページのサーバーにアップすると動作しました。 （理由は不明です。しかし会社のサーバーはocnのため、ocnで動作しないとダメなのです。） 自分はJavScriptの知識は全くなく、簡単なHTMLが分かる程度ですので自力ではこの問題を解決できませんでした。 どうかご教授願えませんでしょうか。 なお、行った作業は、 ・FancyZoom（ver.1.1）のzipをダウンロード、解凍、「js-global」と「images-global」をフォルダごとサーバーの一番上（public_html）に転送。 ・導入したいページの (1)<head></head>内に、 <script src="/js-global/FancyZoom.js" type="text/javascript"></script> <script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script> と記述。 (2)<body>のすぐ下に、 <body id="whatever" [...] onload="setupZoom()"> と記述。 (3)画像を <a href="images/○○.jpg"><img src="images/○○s.jpg" /></a> の形で記述。 （ファイル名に"s"とつくのがサムネとなる画像です。） ・このhtmlを保存してサーバーの一番上（public_html）に転送。 以上の作業です。
- shimajing
- お礼率97% (34/35)
- レンタルサーバ・ASP
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
なぜFC2で動いたのかは不明ですが、(1)の部分を下記のように記述を修正してください。 JavaScriptファイルの相対指定が間違っているので。 -------------------- <script src="./js-global/FancyZoom.js" type="text/javascript"></script> <script src="./js-global/FancyZoomHTML.js" type="text/javascript"></script>
関連するQ&A
- アコーディオンとロールアップの共用について
今、あるホームページを作っていて、アコーディオンとロールアップの機能を使用したいと思っています。 ロールアップについては今までも使ったことがあり、以下の2つのスクリプトを使用しています。 ○jquery.js ○yuga.js これに、今回はアコーディオンの機能を使いたいので、以下の3つのスクリプトを組み込んで使おうと思いました。 ○accordion.js ○prototype.js ○effects.js で、以下のようにHTMLソースのHEAD内にスクリプトを読み込む記述をして、動作テストを行ったところ、どちらか片方しか動作しないというトラブルが発生しました。 記述の順番を変えると、どちらかが動作するようです。 例1：ロールアップのみ動作する <script type="text/javascript" src="../js/prototype.js"></script> <script type="text/javascript" src="../js/effects.js"></script> <script type="text/javascript" src="../js/accordion.js"></script> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/yuga.js"></script> 例2：アコーディオンのみ動作する <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/yuga.js"></script> <script type="text/javascript" src="../js/prototype.js"></script> <script type="text/javascript" src="../js/effects.js"></script> <script type="text/javascript" src="../js/accordion.js"></script> これら2つの機能を同時に使用するにはどうすればいいでしょうか？
- ベストアンサー
- JavaScript
- 複数の外部ファイルを参照するにはどうすればいいの？
２２歳男性です。 ｈｔｍｌに以下のように記述していますがうまく動作しません。 <html> <head> <script type=\"text/javascript\" src=\"ｊｓ１ファイルパス\"></script> <script type=\"text/javascript\" src=\"ｊｓ２ファイルパス\"></script> </head> <body> ・・・・・・・ 上記のように記述して外部のｊｓファイルを参照しようとしているんですがうまくいきません。ｊｓ２ファイルは参照できるんですが、ｊｓ１ファイルは参照できません。 また、記述順を変えてみると、ｊｓ１ファイルは参照でき、ｊｓ２ファイルが参照できなくなります。 この２つのｊｓファイルを参照するにはどのように記述するべきなのでしょうか？
- 締切済み
- JavaScript
- javascriptファイルは１つに統合できますか
javascript初心者のため、どなたかご教示いただけるとありがたいです。 html内に外部javascriptファイルを読み込むようにscript要素で記述しているのですが、複数の外部jsを読み込んでおり、可能であればhtml内の記述を簡略化したいと思っております。 ＜現状＞ <script type="text/javascript" src="・・・/js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="・・・/js/jquery.page-scroller.js" charset="utf-8"></script> <script type="text/javascript" src="・・/js/jquery.cookie.js"></script> <script type="text/javascript" src="・・・/js/ui.core.js"></script> <script type="text/javascript" src="・・・/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="・・・/js/jquery.scrollfollow.js"></script> <script type="text/javascript" src="・・・/js/jquery.bxslider.js"></script> <script type="text/javascript" src="・・・/js/set_slider.js"></script> ・・・ jsに対する基礎的な質問ですが、上記のような複数の外部jsファイルを、1つの外部jsファイルにまとめることは可能なのでしょうか？ （単純に1箇所にコピー＆ペーストするようなイメージで） お手数ですが、ご教示のほど、宜しくお願い致します。
- ベストアンサー
- JavaScript
- JQUERYをはじめて導入したのですが、
JQUERYをはじめて導入したのですが、 読込み部分の記述が間違っているのか 「$(document).ready(function(){」のところで一箇所エラーとなります。 「オブジェクトでサポートされてないプロパティまたはメソッドです」となります。 設定内容の、現状は下記です。 「validate」設定を実現したいためにjqueryを導入。 ・JQUERYは現在の最新版のものを入手。 ・読み込んだファイルは全く編集などはしてないもの。 ・パスなどの記述は間違っていないようです。確実にファイルは存在しております。 ・一応パーミッションも確認済みです。 ・id"form-host"もformタグに設定しております。 <script type="text/javascript" src="/common/js/jquery.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.pack.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.js"></script> <script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.min.js"></script> <script type="text/javascript" src="/common/js/additional-methods.js"></script> <script type="text/javascript" src="/common/js/messages_ja.js"></script> <script type="text/javascript"> //入力チェック関数に対象フォームIDを指定 $(document).ready(function(){ $("#form-host").validate(); }); </script> jsファイルの読込みの順序が違うのでしょうか、 不必要なjsファイルを読み込んでしまっている？為なのか； validate関連を導入した事があるからいらっしゃれば、 ご教授願います。
- ベストアンサー
- JavaScript
- 複数スクリプトの読み込みでlightboxが動作しません
MT4.1でサイトを構築し、カレンダー、サイト内検索、画像表示（lightbox）をprototype.jsを用いたスクリプトを読み込む形で動かそうとしているのですが、画像表示（lightbox（最新版））のみを読み込ませた場合は動作するのですが、三種類とも読み込ませた場合画像表示（lightbox）が正常に動作せず、拡大画像のページに移動してしまいます。 ヘッダ内に組み込んでいるソースは下記となります。 --------------------------------------------------------- <!-- カレンダー表示 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/ajaxCalendar.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/dayChecker.js"></script> <!-- カレンダー表示 --> <!-- lightbox --> <link rel="stylesheet" href="<$MTBlogURL$>_ajax/lightbox/css/lightbox.css" type="text/css" media="screen" /> <script src="<$MTBlogURL$>_ajax/lightbox/js/prototype.js" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/lightbox.js" type="text/javascript"></script> <!-- lightbox --> <!-- 検索窓処理 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/blog_ajax_json_search.js"></script> <!-- 検索窓処理 --> --------------------------------------------------------- 画像表示（lightbox）のみにすると動作するので、他のスクリプトと衝突しているのだとは思いますが読み込みの順番などを変更しても効果がありませんでした。 解決策をご存知の方、ご教授をお願いいたします。
- 締切済み
- JavaScript
- FirefoxでonMouseOver/Outの動作がされません。。。
全くの初心者で恐縮ですが、どうしても判らなかったので投稿させていただきます。 onMouseOver/Outで画像を変化させるごく一般的なスクリプトを使用したいのですが、外部jsファイルから読み込ませるとどうしてもFirefoxで動作されません。 IEでは動くようですが、IEの場合間違った記述でも動作してしまう事がある、との事…。 また、外部jsファイルに置かずhtmlの中にスクリプトを記載した場合はFirefoxでも問題なく動きました。 エラーコンソールで確認すると「syntax error」となっており、記述に間違いがあるのは確かなようなのですが、検索にかけてもそれらしいものにはヒットしませんでした。 以下、作成しているファイルからコピペです。 ◆jsファイル if (document.images) { var img1on = new Image(); img1on.src = "img/1on.jpg"; var img1off = new Image(); img1off.src = "img/1off.jpg"; } function On(name) { if (document.images) { document.images[name].src = eval(name + 'on.src'); } } function Off(name) { if (document.images) { document.images[name].src = eval(name + 'off.src'); } } ◆htmlファイル ・<head>内に<script type="text/javascript" src="script.js"></script>を記載。 ・<body>内の該当リンク部分に下記の記載。 <a href="index.html" onMouseOver="On('img1')" onMouseOut="Off('img1')"><img src="img/1off.jpg" id="img1" /></a> 尚、スクリプトの内容はほぼこちら↓のサイト様の丸写し状態です。 http://www.tagindex.com/javascript/link/change1.html jsファイルのパスに間違いが無いか等、自分で考えられる事は全て確認してみたのですがどうしても判らず、どなたか詳しい方のお知恵を拝借出来ればと思います。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- インラインフレームを使って、lightboxを表示させたい
メインページ上にインラインフレームを使用して、写真のサムネイルを並べています。 このサムネイルをクリックするとlightboxで表示されるようにしたいのですが、上手くいきません。 メイン画像に表示されず、インラインフレーム内で、lightboxが動作せず、画像がリンクするだけです。 メインのHTML（main.html）のheadに下記の記述をし、 【main.html】 <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> インラインフレーム内（in.html）のサムネイルには下記を記述しています。 【in.html】 <a href="images/001.jpg" rel="lightbox" title="テスト"><img src="images/p01.jpg" border="0"></a> ちなみに、上記のタグをメインのHTMLに記述すると、ちゃんとlightboxは動きます。 インラインフレーム内だと、動かないのです。 ソースのどの部分に手を加えると、メインページ上に、表示されるようになるのでしょうか。 アドバイスお願い致します。
- ベストアンサー
- HTML
- 複数のjQueryを使用するときの記述の仕方
今、こちらのjQueryと http://jsajax.com/Articles/jQueryLavaLamp3/1083 こちらのjQueryを http://www.css-lecture.com/log/javascript/039.html 同じページ内で使用しようとしています。 記述は以下の通りです。 ---------------------------------------------------- <!-- ▼前者のjs --> <script src="js/jquery-1.2.6.js" type="text/javascript"></script> <script src="js/jquery.easing.min.js" type="text/javascript"></script> <script src="js/jquery.lavalamp.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#lavaLamp").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); }); </script> <!-- ▼後者のjs --> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script type="text/javascript" src="js/main/jquery.cycle.js"></script> <script type="text/javascript" src="js/main/slideshow.js"></script> このように記述しても後者のものしか動きません。 前後逆にすると前者が動きます。 以前の質問でjQueryのファイルには記述する順番があるとお答えを頂いたのですが、 調べても初心者の私には理解できず・・・。 こちらのファイルを同時に使用するにはどのような順番で記述したら宜しいのでしょうか？ 大変困っております、どうか宜しくお願い致します。
- 締切済み
- JavaScript
- ライブドアブログでlazyloadが使えない
ご覧頂きありがとうございます。 早速の質問ですが、ライブドアブログでjQueryのlazyloadが動作しません。どうしたものでしょうか。 目標としては、ブログ内の画像をスクロールと同時に読み込み、フェードインさせたいです。 行った手順としては、 jsファイル、画像ファイルをアップした後、 管理ページ＞デザイン設定＞カスタムJS から</head>直前に以下のコードを書きました。 <script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript" src="./jquery.dimensions.min.js"></script> <script type="text/javascript" src="./jquery.lazyload.js"></script> <script type="text/javascript"> $(function() { $("img").lazyload({ placeholder : "./img/loading.gif", effect : "fadeIn" }); }); </script> jsファイルや画像ファイルのパスは間違っていないことは確認しました。
- ベストアンサー
- JavaScript
- 教えてください! lightboxとskitter
javascriptがまだよく理解できていないので、 愚問に思われるかもしれないですが、上手く動作しなくて困っています。 <head>内に下記のように記述したのですが、lightboxが上手く作動しません。 記述に問題があるんでしょうが、調べても全くわからないので こちらに投稿させていただきました。 どなたかこの問題の解き方をお教えください。 よろしくお願いします。 <link rel="stylesheet" type="text/css" href="css/lightbox.css"> <!--lightbox--> <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> <!--smartRollover--> <script type="text/javascript" src="js/jquery.quickflip.source.js"></script> <link rel="stylesheet" type="text/css" href="css/skitter_css/skitter.styles.css"> <!--Skitter--> <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}); <!--数字を大きくするとSkitterの時間がゆっくりになる--> //$('.box_skitter_large').skitter({thumbs: true, label: false,}); }); </script>
- ベストアンサー
- JavaScript
お礼
早速やってみたところ、動作しました！ ドット一つの小さな間違いを見つけ出してくださり本当に感謝です。 ありがとうございました！