jQuery prettyPhoto設置について

2023/08/11 01:21

このQ&Aのポイント

jQuery prettyPhotoを設置する方法についてご質問です。
作成したサイトが文字コードshift_jisで作られている場合、jQuery prettyPhotoは正しく動作しないのでしょうか？
お知恵をお貸しください！

ベストアンサー

jQuery prettyPhoto　設置について

2011/04/23 00:27

jQuery prettyPhoto　設置についてド初級の質問ですが、よろしくお願いします。 http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ を設置するのに、ヘッダーに <script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> と記述すると別サイトで見ましたが、文字コードshift_jis　で作られたサイトでは正しく作動しないのでしょうか？（実際設置しましたがダメでした。）お分かりの方いましたら、ご回答ください！

epocari
お礼率73% (73/100)

JavaScript
回答数1
ありがとう数1

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

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

ベストアンサー

reggaepunc
ベストアンサー率59% (64/108)

2011/04/26 02:54 回答No.1

関連するQ&A

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プラグイン、サーバー上だと動かない。
こんにちは。このたび制作しているWEBサイトにjQueryプラグインのprettyphotoを実装したいのですが、ローカルの環境では問題なく動いてくれるのですが、サーバーにアップしたとたんにエラーがでてしまいまったく動いてくれません。 <head>内のスクリプトの記述は <script src="js/libs/modernizr-2.0.6.min.js"></script> <script src="js/prettyphoto/js/jquery-1.6.1.min.js"></script> <script src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'}); }); </script> という感じです。 ※そのほか直前にprettyphotoのCSSは読み込んでおりますサーバーにアップしたページのソースをみてみるとCan't find variable:$というメッセージがでていたのでプラグインの記述を (function($){ // $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'}); }); }(jQuery)); // にしてみてもCan't find variable:jQueryというメッセージがでてきてしまいます。こちらもともとテンプレートであったサイトを改変しているものなので、このほかHTML後半部分にもいろいろjavascriptの記述があります。以下となります。 <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.easing.compatibility.js"></script> <script type="text/javascript" src="js/jquery.validate.pack.js"></script> <script type="text/javascript" src="js/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript" src="js/jquery.tweet.js"></script>  <script type="text/javascript" src="js/superfish/js/superfish.js"></script> <script type="text/javascript" src="js/superfish/js/hoverIntent.js"></script> <script defer src="js/plugins.js"></script> <script defer src="js/script.js"></script> レイアウトが崩れないようひとつひとつとりはずしてみたのですがprettyphotoは動いてくれませんでした。またパスが間違っていないかも何度もチェックはしたつもりです。本当に困っているのですが、このような時どうやって原因を探していけばよいのか、何かアドバイスをいただけたらと思い投稿させていただきました。当方、WEB制作初心者のため、見当はずれなことを訊いていましたらご容赦ください。どうぞよろしくおねがいします。
- ベストアンサー
- HTML
jquery lightboxを設定しようとしていますが問題がでてます
jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとのことですが.. なにか　以下のＨＴＭＬソースに足らない部分がありますか？ご教授ねがいます。 <link href="css/top.css" rel="stylesheet" type="text/css"> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> <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() { $('.up_image a').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.7, txtImage: '画像', txtOf: 'の' } ); }); </script> </head>
- ベストアンサー
- JavaScript
複数のjavascriptが作動しない
http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、このページにlightboxを追加するとスムーズに移動するjavascriptが無効になってしまいます。  <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>  <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> どのように対処すればいいのでしょうか？ご教授お願いいたします！
- ベストアンサー
- 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を入れたのですが片方が動きません。 -------------------------  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/test.js"></script>  <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> ------------------------- コードは上記のように記述してありあます。スクロールはhttp://klutche.org/archives/536/様のを使用、、フォトギャラリーはhttp://myisland.jp/様のフォトギャラリーSample#2を使用しています。片方消すと正常に動くのでコードは間違っていないと思いますがなぜjsフォルダに一個一個入れて呼び出しているのに動かないのかわかりません。 head内にバージョン違いのjQuery本体を呼び出すと動かなくなるのは知っていますがこの場合本体は一個しか呼び出していないですよね・・・？プログラムさっぱりでとても困っています。解決策よろしくお願いします。
- 締切済み
- JavaScript
lightboxの設置
<html lang="ja"> <head> <link href="css/lightbox.css" rel="stylesheet" media="all" type="text/css" /> <script src="jquery-3.1.1.min.js" type="text/javascript"></script> <meta charset="UTF-8"> <title></title> </head> <body><a href="img/bb123.jpg" data-lightbox="group" data-title="S001"><img src="img/bb123.jpg" alt="" width="256" /></a> <script src="css/lightbox.js" type="text/javascript"></script> <script> lightbox.option({ 'fitImagesInViewport' : true, 'wrapAround': false }) </script> </body> </html> とりあえずテストで、lightbox2の設置をしようとしているのですが、サイトに書いてあるのと同じように、入力してみたのですが、サムネイル画像が、プレビュー機能で拡大して見れるようにしたいのですが、 lightbox２が機能してくれません。 http://www.oikawa-sekkei.com/web/design/js/lightbox_v2_8_1.html 因みに、jqueryは、バージョンが解らないので最新版をダウンロードして使っています。ご回答お願いします。
- 締切済み
- その他（プログラミング・開発）
一部のjQueryとmootoolsが競合します
dropdownメニューのdroppy(jquery)とmootoolsを使用したカレンダーが競合してしまいます。 mootoolsのカレンダーhttp://www.electricprism.com/aeron/calendar/ とメールフォームプロ　http://www.synck.com/contents/download/cgi-perl/mailformpro.html のjqueryの組み合わせは問題ありませんでした。そこにdroppy http://onehackoranother.com/projects/jquery/droppy/ が入ると動かなくなります。助けて頂ければ嬉しいです。よろしくお願いいたします。 jQuery.noConflict();やDollar Safe Modeなどもやってみましたが、うまくいきません。どこが間違っているのでしょうか？ <script type="text/javascript"> jQuery.noConflict(); jQuery(function(){ jQuery("#nav").droppy(); }); </script> ----------------------------- <script type="text/javascript"> $(function() { $("#nav").droppy(); }); (function($) { window.addEvent('domready', function() { myCal1 = new Calendar({ date1: 'Y/m/d' }, { direction: 1, tweak: {x: 6, y: 0} }); }); }(document.id)); </script> ---元はこちら↓-------------- <script type="text/javascript" src="commons/jquery.js"></script> <script type="text/javascript" src="js/jquery.droppy.js"></script> <script type="text/javascript"> $(function() { $("#nav").droppy(); }); </script> メールフォームプロ↓ <script type="text/javascript" src="commons/mfp.lang.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mfp.extensions.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mailform.js" charset="UTF-8"></script> <script type="text/javascript" src="postcodes/get.cgi?js" charset="UTF-8"></script> カレンダー↓ <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/calendar.rc4.js"></script> <script type="text/javascript"> //<![CDATA[ window.addEvent('domready', function() { myCal1 = new Calendar({ date1: 'Y/m/d' }, { direction: 1, tweak: {x: 6, y: 0} }); }); //]]> </script>
- ベストアンサー
- JavaScript
prototype+jquery+プラグイン
prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。何かいい方法はないでしょうか？エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>
- 締切済み
- JavaScript
liteboxと滑らかスクロールが同時処理出来ない
javascriptのliteboxと滑らかスクロールを１ページ内で行うことができません。 head内スクリプトタブ  <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>  <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js2/prototype.js"></script> <script type="text/javascript" src="js2/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js2/lightbox.js"></script> イメージタグ <a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a> ライトボックスのバージョンはlitebox2.0 滑らかスクロールは下記サイトからダウンロードさせて頂いたものを使ってます。 http://coliss.com/articles/build-websites/operation/javascript/296.html 一方のスクリプトタグをコメントで囲むと囲んでいない方のスクリプトが機能します。また、下の方に記述したスクリプトが機能します。なので上記の場合、liteboxは機能し、滑らかスクロールの方は機能しません。両方機能させるにはどうしたらよいのでしょうか？ジャバスクリプトは初めて使うのであまり詳しくありません。ご教授お願い致します。
- ベストアンサー
- JavaScript