• 締切済み

画像拡大機能のjsをスマホで読み込まない

ホームページの画像拡大表示に、shadowbox.jsを使っています。 このような画像拡大機能を持つJavaScriptjsをスマホで読み込まないHTMLの書き方を教えてください。 <head>内に、以下のように記述しています。 <link type="text/css" href="../css/shadowbox.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="../js/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> PCでこのホームページを表示させた場合は問題無いのですが、スマホではshadowbox.jsを動作させたくありません。 そのための手法を教えてください。 PC・iPadで動作、スマホ（iPhone・Android）で動作させないの区分けで考えています。 または、shadowbox.jsと同じような画像拡大表示jsのケースでも、結構です。 以上、ソースで書いていただけると助かります。 よろしくお願いいたします。

みんなの回答

回答No.3

そうじゃなくて。。 if(ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1)){ //もし、iPhoneかアンドロイドかモバイルなら 　// document.write(' ～～～～～～～～'); //スマホ用表示 } else{ //さもなくば 　// document.write('' ～～～～～～～～''); //パソコン用表示 　/* ここ！！ PC側だけ初期化をすればいいってこと */ 　Shadowbox.init(); } それと、document.writeはサンプル程度では使いますが、 実際にはほとんど使われないので、この命令で何かを？ ってのは、面倒が増えることのほうが多いですよ。

回答No.2

>getDevice が”sp“なら、読み込ませない記述は書けるのでしょうか？ 読み込んでも、動かさなければ解決しそうですね。 Shadowbox.init(); こいつを、SP時は呼ばないようにしてみてはいかがでしょう？ 初期化されなければ、機能しない可能性は高いと思いますよ。

YOKOHAMA-Boy
質問者

補足

補足が遅れて申し訳ありません、もう少しお知恵をください。 他のScriptでは、 <script> var ua = navigator.userAgent.toUpperCase(); //ユーザーが使用している環境を調べる if(ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1)){ //もし、iPhoneかアンドロイドかモバイルなら document.write(' ～～～～～～～～'); //スマホ用表示 } else{ //さもなくば document.write('' ～～～～～～～～''); //パソコン用表示 } </script> は、エラー無く実行されます。 document.write(' ～～～～～～～～');　内に、 document.write('<script type="text/javascript"> Shadowbox.init(); </script>'); のように、scriptの記述があるとエラーになるようです。 これを、回避する方法はあるのでしょうか？ または、JavaScriptで、内包するJavaScriptを動作させること自体が、無理なのでしょうか？ 細かくてすみませんが、よろしく教示願います。

回答No.1

https://webnetamemo.com/coding/jquery/201606253129 そういう場合は機種判別系の考え方を使い、 あなたが求める機種で、初期化なりを 行えばOKです。 ソース付きのサイトですので、すぐにわかるとは思います。

YOKOHAMA-Boy
質問者

補足

該当ページにある以下の部分と、当方がhead内に書いているshadowbox関連の読み込み記述との関係が判りません。 初歩的質問で、申し訳ありません。 該当ページA部：var getDevice = (function(){ var ua = navigator.userAgent;～以下略 該当ページB部：if( getDevice == 'sp' ){～以下略 当方がhead内に書いているshadowbox関連の読み込み記述 <link type="text/css" href="../css/shadowbox.css" r～以下略 getDevice が”sp“なら、読み込ませない記述は書けるのでしょうか？ よろしくお願いいたします。

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • shadowbox.jsについて

    shadowbox.jsとslimbox.jsを併用したいと考えています。 もともとshadowbox.jsをPrototypeで使用し、HTMLを呼び出すのに使用していたのですが、 画像のライトボックス表示にslimbox.js（jquery使用）を使いたいと思い、 両方とも記述したらshadowboxの方が正常に動作しなくなりました。 何か解決策はありますでしょうか。 非常に困っています。お願いします。 ちなみに以下の様なコードをhead内に記述しております。 <script src="../../common/js/prototype.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../common/js/shadowbox/shadowbox.css"> <script src="../../common/js/shadowbox/shadowbox.js" type="text/javascript"></script> <script type="text/javascript">Shadowbox.init();</script> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript">Shadowbox.init();</script> </script> <link href="../../common/css/slimbox/slimbox.css" type="text/css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="../../common/js/jquery.js"></script> <script type="text/javascript" src="../../common/js/slimbox.js"></script> <script type="text/javascript"> //slimbox $(document).ready(function() { $('a[rel*=lightbox]').slimbox(); }); </script>

    • ベストアンサー
    • CSS
  • shadowbox3.0.3で画像が開きません

    環境 Mac OSX DreamweaverCS5.5 上記環境でサイト制作しまして、Dwの"ブラウザでプレビュー"の使用してSafariとFirefoxで問題なく動作、表示する事を確認した後、FC2ホームページにアップロードしたところshadowbox.jsが動作せずに困っております。 具体的には <a href="image/image01.JPG" rel="shadowbox"><img src="image/image01_thumb.jpg"></a> とゆうコードでサムネイル画像をクリックして拡大表示したいのですが、クリックするとブラウザが暗転し"Loading"の文字とアニメーションが表示されますが、そこから進まず画像が表示出来ません。 またshadowboxの.jsファイルと.cssファイルを読み込む記述は以下のようになってます <link rel="stylesheet" type="text/css" href="js/shadowbox/shadowbox.css" /> <script type="text/javascript" src="js/shadowbox/shadowbox.js"> </script> <script type="text/javascript"> Shadowbox.init({ language: 'ja', players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv'] }); </script> これまでshadowboxに関するブログや質問など見てみましたが、特にコードの記述には問題が無さそうに思い、どこに問題があるのか全く分からなくなってしまいました。 これにはどのような問題が考えられるでしょうか？　初歩的な質問だとは思いますがよろしくお願いし致します。

    • ベストアンサー
    • CSS
  • Shadowbox.jx3.0.3が動かない。

    初めまして、このたびlightbox風のjqueryに惹かれて、shadowbox.jsの導入を考えております。。。が、 公式ホームページでadapterに jQuery を選び、ZIPを解凍して、一番簡単そうな画像表示を試みてみましたが上手くいきません。 色々な解説サイトを見ましたが、手順どおりやってはいるつもりなのですがお手上げになってしまいました。 何度試みても、ただ画像にリンクするだけで、lighboxらしい動きになりません。 以下にソースを掲載させて頂きますので、どうかお力添えお願い致します。。 <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> </head> <body> <a href="1.jpg" rel="shadowbox" title="My Image">My Image</a> </body> </html> ※index.htmlやshadowbox.css ,shadowbox.jsは全て同階層です。 jqueryもDLして、ヘッダ部分に <script type="text/javascript" src="/jquery-1.5.1.min.js"></script> という一文も入れてみましたが全く動かない状態です。 説明足らずな点も多いと思いますが、どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • shadowbox について

    最近「shadowbox」というJSが 3.0b にバージョンアップされ、それを使っている者です。 http://www.shadowbox-js.com/ そこで質問です。 画像とYOUTUBE動画はしっかりJSが働きますが、「shadowbox」のウリでもあるイメージマップとサイト表示ができません。 head内記述は以下の通りです。 <link rel="stylesheet" type="text/css" href="***/shadowbox/shadowbox.css"> <script type="text/javascript" src="***/shadowbox/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ language: "en", players: ['img', 'html', 'iframe', 'qt', 'wmp', 'qtwmp', 'swf', 'flv'] }); </script> 「shadowbox.css」と「shadowbox.js」は公式HPで使用されている物をそのままコピーした物を使っています。 http://www.shadowbox-js.com/src/shadowbox.css http://www.shadowbox-js.com/src/shadowbox.js イメージマップについては、公式サイトのソースでは画像アドレスに対して「rel="shadowbox"」の記述が全くないのにJSが動作しているという謎仕様。 同じようにしたり、rel属性を付けても画像が普通に表示されるだけでJSが働きません。 htmlについては、リンクアドレスが「***.html」の場合のみJSが働きますが、「***.co.jp」などの場合は働きません。 色々調べたのですが、3.0bは最近公開された事もあってか、日本語で説明されたHPが見あたりません。 海外サイトを翻訳したりして調べても、そもそも当方はJS初心者なので理解に苦しんでおります。 おそらく「shadowbox.js」が原因だとは思うのですが、行数も多くどこの記述で何が変わるのかさえ判らない状態で困っております。 どなたか、無知な私にご教示願えないでしょうか。

  • ファイヤーフォックスでCSSが機能しません

    会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>

  • XHTMLで外部JSファイルを読み込むには？

    XHTMLで外部JSファイルを読み込むには？ よろしくおねがいします。 初歩的ですみません 当方　XHTML+CSSでページを作成し JSファイルを読み込みページのTOPへ移動するスクリプトを 作ったのですがXHTML上では上手くうごいてくれません。。。。 ソースはこちらです。 -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- 上記のソースは普通に動作するのですがDOCTYPEの宣言を ------------------------------------------------------------- <!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"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- にすると・・・動いてくれません。下段のソースを利用したいのですが 何かJSファイルを読み込む方法はありますでしょうか？？ アドバイス頂ければ幸いです。よろしくお願いいたします。

  • 教えてください!　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が作動しない

    http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに 下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、 このページにlightboxを追加すると スムーズに移動するjavascriptが無効になってしまいます。 <!--ページをスムーズに移動するjs--> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--lightboxのjs--> <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> どのように対処すればいいのでしょうか？ ご教授お願いいたします！

  • 外部ファイルJS参照を全て消さないと「文字が正しくありません」エラー

    実に不思議なのですが、 以下のように4つのJSファイルをインクルードしているHTMLファイルを ローカルで開くと「文字が正しくありません」とスクリプトエラーが何回かでます。 ですが、script1～4.js　の行を全てコメントアウトすると、エラーはでません。 1～4のどれかにエラーが含まれているのかと、一つ一つを外してみましたが、 どの行を外しても、やはり「文字が正しくありません」と出てしまいます。 ローカルの然るべきパスに1～4はあります。また、HTML同様、JSもEUCになってます。 何が原因なのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>タイトル</title> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <link href="../css/style.css" rel="stylesheet"> <script src="../js/script1.js" type="text/javascript"></script> <script src="../js/script2.js" type="text/javascript"></script> <script src="../js/script3.js" type="text/javascript"></script> <script src="../js/script4.js" type="text/javascript"></script> </head>

  • <head>外での、外部css、外部jsの読み込み

    基本的な質問で失礼します。 <head>内ではなく、たとえば<body>内に外部cssと外部jsを読み込む際、 今まで、以下のようにスクリプトを書いて読み込んでおり、うまくいっていました。 <script type="text/javascript"> document.write('<link rel="stylesheet" type="text/css" href="hoge.css" media="screen,print">'); document.write('<script src="hoge.js" type="text/javascript"></script>'); </script> ところが、あるサイト作成時、上記スクリプトでは効かなくなってしまいました。 （HTML 4.01 Transitional） そこで、<head>内で書くように、以下のように記述したら、うまく機能しました。 <link rel="stylesheet" type="text/css" href="hoge.css" media="screen,print"> <script type="text/javascript" src="hoge.js"></script> 自分の中では、この記述は<head>内で書くときであって、<head>外ではうまく読み込めないと思っていたのです。 そもそも、<head>外なのに、このような書き方をしてよいものでしょうか？ まぁ、きちんと読み込めていて、動きも期待通りだから良いのでしょうが… 皆さん、どのように読み込んでいるのかなっと思い質問してみました。 どうぞ宜しくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する