質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1637閲覧

lightboxなどで拡大した後に、更にルーペ等で部分拡大したい。

stowe

総合スコア19

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/07/01 06:31

編集2017/07/01 10:23
<html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <link href="css/style.css" rel="stylesheet" type="text/css"> <link href="css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script> <script type="text/javascript" src="js/jquery.loupe.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#single_1").fancybox({ helpers: { width: '200px', title: { type: 'float' } }, afterShow: function () { $("#single_1").loupe({ width: 100, // width of magnifier height: 100, // height of magnifier loupe: 'loupe' // }); </script> </head> <body> <a id="single_1" href ="img/mic.jpg"><img src="img/mic.jpg" alt="" width="250"></a> </body> </html> コード ```###前提・実現したいこと 題名の通りなんですが、画像をクリックするとlightboxのようなjqueryで一度拡大して、その後に虫眼鏡やルーペ等で部分的に拡大が出来ないかという質問です。 例えば、fancyboxを使い拡大した後、こちらの↓loupeのjqueryを拡大した画像に追加できないでしょうか? http://redopop.com/loupe/ それか、lightboxのようなjqueryで部分拡大も出来るようなやつがあればご享受下さい。 宜しくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2017/07/01 06:40

試してみましたか? その結果はいかがでしたか? その際のソースコードとエラーメッセージなどがあればご提示お願いいたします。
stowe

2017/07/01 08:13

fancyboxのバージョン1に上記のルーペをくっつけようとしましたが、ダメでした。ダメでしたというか、自分があまりにも理解していないので、試すどころの領域じゃないんだと思います・・・。その時のソースコードをここに載せたらよろしいですか?
Lhankor_Mhy

2017/07/01 08:55

はい、エラーメッセージも併せておねがいします。
stowe

2017/07/01 10:07

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <link href="css/style.css" rel="stylesheet" type="text/css"> <link href="css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script> <script type="text/javascript" src="js/jquery.loupe.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#single_1").fancybox({ helpers: { width: '200px', title: { type: 'float' } }, afterShow: function () { $("#single_1").loupe({ width: 100, // width of magnifier height: 100, // height of magnifier loupe: 'loupe' // }); </script> </head> <body> <a id="single_1" href ="img/mic.jpg"><img src="img/mic.jpg" alt="" width="250"></a> </body> </html>
stowe

2017/07/01 10:08

fancybox1とこちらのサイトのloupe➡http://redopop.com/loupe/を使いました。画像がただただ大きくなるばかりです。
Lhankor_Mhy

2017/07/01 10:10

できれば、質問に追記する形で、コードハイライトを使って書いていただきたいのですが…… さすがに改行なしのコードを読む気にはなれない……
stowe

2017/07/01 10:11

ですよね、張り方こんなんでいいのかとか思ったんですが、ちょっとお待ち下さい。
stowe

2017/07/01 10:17

コードハイライトのやり方が分からず、検索しています。少々お待ち下さい・・・。
stowe

2017/07/01 10:21

コードハイライトわからなかったので、質問を編集させてもらいました。そちらをご覧になって頂けますでしょうか?どうぞよろしくお願い致します。
guest

回答1

0

ベストアンサー

補足にいただいた
https://forums.asp.net/t/2011436.aspx?Need+to+add+image+magnifier+to+FancyBox+
のコードのとおりにやってみたら動作しました。書いてある通りにやってみてください。

とりあえず、かっこの対応がひどいです。開いたかっこは必ず閉じてください。

javascript

1 $(document).ready(function () { //←閉じ忘れ 2 $("#single_1").fancybox({ //←閉じ忘れ 3 helpers: { //←閉じ忘れ 4 width: '200px', 5 title: { 6 type: 'float' 7 } 8 }, 9 afterShow: function () { //←閉じ忘れ 10 11 $("#single_1").loupe({ 12 width: 100, // width of magnifier 13 height: 100, // height of magnifier 14 loupe: 'loupe' // 15 });

次にルーペをつけるターゲットが違います。

javascript

1 $(".fancybox-image").loupe({

そして、CSSを忘れています。

CSS

1.loupe{ z-index: 9000; }

投稿2017/07/01 11:15

Lhankor_Mhy

総合スコア35869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

stowe

2017/07/01 11:25

ありがとうございます。初歩的なことが出来ていませんでした。今やってみたんですが、やはり動かず・・・。URLのコードの通りですよね?
stowe

2017/07/01 11:31

Zインデックスは着けていましたが、記述し忘れていたので、問題はカッコの閉じとloupeの対象ですよね?そこだけが間違っていたのであれば、今修正したのですが、、、Lhankor_Mhy様のコードを見せて貰えませんか?
Lhankor_Mhy

2017/07/01 11:37

もしかするとfancyboxのバージョンによる問題かもしれませんね。ご提示のURLのコードはバージョン2系を使っていましたので。
Lhankor_Mhy

2017/07/01 11:40

ああ、jQueryのバージョンも違いますね。結構古いものを使っていますね。1.4系ならばまずまず動きそうな気もするのですけれど……
stowe

2017/07/01 11:40

あ、1系を使用しておりました。2系にして再度やってみます。
stowe

2017/07/01 11:48

バージョン2を使用したらきちんと動きました。ありがとうございます。とても感謝しております。また機会がありましたら回答よろしくお願い申し上げます。
Lhankor_Mhy

2017/07/01 11:52

ご解決なによりです。お疲れさまでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問