今では画像のイメージビューアーとしてのjQueryプラグインは多々あります。
最近よく見かけるもので、画像をクリックもしくはロールオーバーすることで
周りのレイアウトは保持したままで画像のみがその場で拡大表示されるエフェクト。
画像の見せ方としてちょっと興味があったので
プラグインを使わず実際にスクリプトを組んで実装する方法を、
あれこれ試してみたサンプルを紹介してみます。
まずは動作サンプルは以下から。
画像にマウスオーバーしてみてください。
jQuery IMG HOVER ZOOMUP【SAMPLE01】
画像にマウスオーバーすることで周りのレイアウトを崩さずに画像のみを拡大表示します。
拡大後、画像からマウスアウトすると元に戻ります。
内部構成について、まずはHTMLから。
配置する画像とそれに付随するテキストのみの形で
HTMLはあくまでシンプルな形にしておきます。
◆HTML <div id="container"> <div> <img src="img/photo01.jpg" alt="" class="magnify" />これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。 </div> <div> <img src="img/photo02.jpg" alt="" class="magnify" />これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。 </div> </div><!--/container-->
実際にマウスオーバーで拡大動作を実行させる＜img＞タグに対して
「class=”magnify”」を付けます。（もちろんこのクラス名は変更可）
※＜img＞タグの属性「width」「height」はjQuery側から追加するのでHTMLソースには記述しません。
そして、今回は特にCSSで特別な指定はしていませんが
演出として、拡大表示した際に画像にCSS3を使ってのドロップシャドウをつけているのでその指定方法について。
クラスを一つ用意して「box-shadow」を指定。（もちろんIEは表示されません。）
◆CSS
.shadow {
-moz-box-shadow: 0 0 10px #333;
-webkit-box-shadow: 0 0 10px #333;
box-shadow: 0 0 10px #333;
}
そして実際の動作スクリプトは以下。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).load(function(){
var thumbSize = 150;
var magnifySize = 350;
$(".magnify").each(function(){
$(this).css({width:(thumbSize)});
});
var objWidth = $('.magnify').width();
var objHeight = $('.magnify').height();
$(".magnify").each(function(){
$(this).wrapAll('<span class="magnify_cover"></span>');
$(this).parent('.magnify_cover').css({
margin: '0 10px 10px 0',
width: (objWidth),
height: (objHeight),
float: 'left',
position: 'relative'
});
});
$(".magnify").hover(function(){
$(this).css({top:'0',left:'0',position: 'absolute'});
$(this).stop().animate({width:(magnifySize)},500,function(){
$(this).addClass('shadow');
});
}, function(){
$(this).stop().animate({width:(thumbSize)},300,function(){
$(this).css({top:'',left:'',position: 'relative'});
$(this).removeClass('shadow');
});
});
});
});
</script>
スクリプト上部にある変数「thumbSize」は縮小（通常）表示の画像サイズ（width）で、
もう一方の「magnifySize」は拡大表示した際の画像サイズ（width）を指定する項目になります。
※ここには任意の値を入力します。
ページロードした際にクラス「magnify」がついた画像に対して
その周りを「span class=”magnify_cover”」が覆い被さり、
「span class=”magnify_cover”」は縮小表示の画像サイズと同じ大きさで配置されます。
画像にマウスオーバーした際には「span class=”magnify_cover”」が
縮小画像が配置されている状態と同じ役目をしてレイアウトを保持。
画像自体は「position:absolute」状態で拡大表示しています。
拡大後は画像に対してクラス「shadow」が追加され、
CSS3でドロップシャドウがついた状態になります。
ひとまず全体構成については、この様な感じに。
上記サンプルは画像が左寄せの場合のみのサンプルになりますが、
左右交互に画像を配置するような場合には以下の様な構成で可能になります。
jQuery IMG HOVER ZOOMUP【SAMPLE02】
HTML側でそれぞれのセクションを囲っている＜div＞に対してクラスを付けることで
画像を右に配置するか左に配置するか記述します。
◆HTML <div id="container"> <div class="left"> <img src="img/photo01.jpg" alt="" class="magnify" />これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。 </div> <div class="right"> <img src="img/photo02.jpg" alt="" class="magnify" />これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。 </div> <div class="left"> <img src="img/photo03.jpg" alt="" class="magnify" />これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。 </div> <div class="right"> <img src="img/photo04.jpg" alt="" class="magnify" />これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。 </div> </div><!--/container-->
画像を左に配置する場合は＜div class=”left”＞
画像を右に配置する場合は＜div class=”right”＞ とします。
CSS側は一つ目のサンプルと同じ構成。
スクリプトは下記の様な構成になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).load(function(){
var thumbSize = 150;
var magnifySize = 350;
$(".magnify").each(function(){
$(this).css({width:(thumbSize)});
});
var objWidth = $('.magnify').width();
var objHeight = $('.magnify').height();
$(".magnify").each(function(){
$(this).wrapAll('<span class="magnify_cover"></span>');
$(this).parent('.magnify_cover').css({
width: (objWidth),
height: (objHeight),
position: 'relative'
});
if($(this).parents().hasClass('left')) {
$(this).parent('.magnify_cover').css({
margin: '0 10px 10px 0',
float:'left'
});
}
if($(this).parents().hasClass('right')) {
$(this).parent('.magnify_cover').css({
margin: '0 0 10px 10px',
float:'right'
});
}
});
$(".magnify").hover(function(){
if($(this).parents().hasClass('left')) {
$(this).css({top:'0',left:'0',position: 'absolute'});
}
if($(this).parents().hasClass('right')) {
$(this).css({top:'0',right:'0',position: 'absolute'});
}
$(this).stop().animate({width:(magnifySize)},500,function(){
$(this).addClass('shadow');
});
}, function(){
$(this).stop().animate({width:(thumbSize)},300,function(){
if($(this).parents().hasClass('left')) {
$(this).css({top:'',left:'',position: 'relative'});
}
if($(this).parents().hasClass('right')) {
$(this).css({top:'',right:'',position: 'relative'});
}
$(this).removeClass('shadow');
});
});
});
});
</script>
親にあたる＜div＞のクラスを見て条件分岐で
「float:left」「float:right」とそれに伴う配置設定を振り分けています。
全体構成については以上です。
この様なその場で拡大表示させるイメージビューアーも
そんなに複雑なスクリプトにならずに実装可能になりそうなので
何かの時に使えそうです。
スクリプトを少しカスタマイズすれば
マウスオーバーではなくクリックして動作実行に変更するのも可能になります。
この様なイメージビューアーが必要になった際に是非。。。
サイトにある画像ロールオーバー時にズームするスクリプトについてですが、１回目のロードではレイアウトが正しく表示されずに、テキストに写真がかぶります。しかし、２度目のロードはきれいに表示されます。これを解消する方法はあるのでしょうか。よろしくお願いします。
＞Y.Aさん
コメントありがとうございます。
申し訳ないのですが、
こちらで検証している環境では、その様な現象を確認できずにいるのですが
ご確認いただいているOS環境とブラウザをお聞かせ頂いてもよろしいでしょうか。
サンプルデータをダウンロードしても
同じ現象になりますでしょうか。
宜しくお願い致します。
Black Flagさま
返信ありがとうございます。
OSはMAC10.6.8 ブラウザはGoogle Chrome です。サンプルは正しく表示されました。
こちらのソースコードが何か間違っているのだと思います。よろしくお願いします。
http://vertdesign.org/ozcafe_5.php
＞Y.Aさま
確認環境について、ご連絡ありがとうございました。
ご作成のサイトも拝見させていただきました。
とても素敵なサイトですね。
レイアウトが崩れてしまう現象については、
Chromeでは要素の高さの値がブラウザのロード後でないと
取得できなくなっているので（昔はそうではなかったと思うのですが・・・）
functionの実行タイミングを変えることで解消すると思います。
ここで紹介している動作スクリプト全体を
————————————————-
$(window).load(function(){
～ この間に動作スクリプトをコピー ～
});
————————————————-
と囲むことで、
ウィンドウがロードした後に
functionが実行するようになるので、
変更してみてください。
使用しているjQueryのバージョンの影響もあるかもしれませんが
おそらくこの方法で直ると思われますので、
一度試していただけますでしょうか。
よろしくお願い致します。
ご返信ありがとうございます。
早速試してみます。
独学で試行錯誤しながら作っています。
こちらをみつけたときは宝物を発見したような気持ちでした。
ありがとうございました。
＞Y.Aさま
ありがとうございます。
そう言っていただけるととても嬉しく思います。
また動作でうまくいかないことなどありましたら
ご連絡くださいませ。
はじめまして。
jqueryを始めたばかりで悩んでいた所に、こちらのサイトへたどり着きました。
自分が思っていた動きを紹介して下さっていたので、早速参考にさせて頂きました！
質問なのですが、猫ちゃんの写真が右下へ動くのを任意の場所（右上や左上）に動かす事はできますか？
また、画像が最大表示された後に、その写真の中にテキストを表示させるにはまた別の動きを追加する必要がありますか？
先程気づいたのですが、IE9だと動かないです…
＞nyanさん
コメントありがとうございます。
このスクリプトをご活用いただき嬉しく思っております。
ご指摘いただきましたIE9の動作に関してですが
記事が少々古いものだったので、
使用しているjQueryのバージョンが古い影響で
IE9での不具合動作になっていました。
記事内のスクリプトでも「1.7.1」のバージョンに修正しましたので
「1.7.1」以上のバージョンでお試しください。（動作確認済みです。）
拡大動作に関しては、26行目辺りからの下記の部分
——————————————-
$(“.magnify”).hover(function(){
$(this).css({top:’0′,left:’0′,position: ‘absolute’});
——————————————-
ここの「top:’0′」と「left:’0′」が拡大する際の基準ポイントとなっているので
右上にする場合は「bottom:’0′」と「left:’0′」
左上にする場合は「bottom:’0′」と「right:’0′」
と変更することで可能かと思います。
指定をいろいろ変えて試してみてください。
よろしくお願いします。
BlackFlag様
ワザワザコードの記述までしていただきありがとうございます。
この後試してみようと思います！
後IE9の件は色々調べていたらバージョンが～という事で、おっしゃられた通り
バージョンアップした事で改善されました。
また行き詰った時などにこちらのサイトを参考にします。
ありがとうございました。
こんにちは。初めまして。
私もこのサイトにたどりついたときには感動でした！
初心者にもわかりやすい解説、本当にありがとうございます。
まだローカルの段階なのですが、２つのイメージが縦に並んでいて、上側のイメージが開くときは、下のイメージを隠す感じで、下のイメージにマウスをあわせると、今度は上のイメージを隠す感じでグワンとそれぞれイメージを拡大したいのですが、
どっちかが上になると、どっちかのイメージの下に映像が重なってしまうのです。。。
例えば上のイメージが大きくなるときは下のイメージの上にちゃんとなるんですが、下のイメージを拡大させる時は、上のイメージの下に表示されるので、重なってしまうのです。。。
両方ともポジションをアブソリュにしてみたんですが、ルラティフで試したらマウスを合わせるとイメージが移動してしまうようになってしまい。。。私が初心者なばっかりに変なテクニカルとは違う質問で本当にすみません。。。
私もどうしたらよいのかわからなくなってしまいました。。。
もしお時間がございましたらご教示頂けると大変たすかります。
＞白くまさん
コメントありがとうございます。
このビューアースクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました画像の重なり具合に関してですが
CSSのpositionは変更せずに、
重なり具合を指定するCSSプロパティ「z-index」を使って調整することで
実現可能かと思っております。
当記事の一つ目のサンプルの26行目から36行目辺りまでの
スクリプトを下記のように書き換えます。
—————————————————————————-
$(“.magnify”).hover(function(){
$(this).css({top:’0′,left:’0′,position:’absolute’,zIndex:’99′});
$(this).stop().animate({width:(magnifySize)},500,function(){
$(this).addClass(‘shadow’);
});
}, function(){
$(this).stop().animate({width:(thumbSize)},300,function(){
$(this).css({top:”,left:”,position:’relative’,zIndex:’1′});
$(this).removeClass(‘shadow’);
});
});
—————————————————————————-
画像にロールオーバーした時に「z-index」を「99」と大きな値にして
マウスオーバーが離れた際に値を「1」に変えて小さくします。
この様にロールオーバーした際に重なり具合の値を変更させることで
拡大した画像が最前面に表示されると思います。
試してみてください。
よろしくお願いします。
はじめまして。
いつも拝見しています。
私はJクエリーも全くの初心者なのですが、こちらのサイトのお陰で日々勉強させてもらっている状態で、
本当に感謝しています。
現在、こちらのサンプル２の方を試しているのですが、２点教えていただけると助かります。
一つ目は、画像が拡大された時だけその画像の下の方に、文字を表示させる事は可能ですか？
二つ目は、拡大した画像を元に戻すのに、マウスアウトではなく画像をタップ（クリック）したら戻れるように
することは可能でしょうか？
お忙しい中申し訳ないのですが・・・。
どうぞよろしくおねがいします。
大変すばらしい内容を披瀝いただいて、ありがたく使用させていただいています。このページてjQueryに始めて出会ってからは、画面展開が一気に変わってしまいました。本当の初心者ですので、言語の学習もおぼつきません。単にサンプルを加工している輩であります。
白くまさんへの回答を試してみましたが、どうしてもメインとしたい写真が前面に出てきません。そこで、写真の左側に透過領域を作って、その分だけ右にづらすことで、回避していますが、なんとか、ここにご紹介のある内容でマウスオンの写真が前面に出てくるようにしたく、チャレンジしましたが、うまくいきません。
お暇な時で結構ですので、アドバイスいただけますようにお願いいたします。
なお、URLは検索で出て参りますが、内容からして、この場では勝手ながら、ご容赦いただければ幸いです。
＞つぐみさん
コメントありがとうございます。
この画像ビューアースクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただいた2点ですが
その様な動作での実装も不可能ではないのですが
この記事で紹介しているスクリプトからかなり改修しなくてはいけなく・・・
またその様な動作のサンプルが作れたらここで紹介させていただきます。
（ちょっと試してみたのですが、すぐには実現できなそうだったので…）
すみませんがよろしくお願いします。
＞湯川さん
コメントありがとうございます。
このビューアースクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました重なりの件ですが
以前のコメントの白くまさんに宛てた回答の構成で実現できるかとは思っております。
実際の動作をご確認いただけるようにサンプルファイルを用意致しましたので
必要であれば下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQueryIMG_HoverZoomUP/jQueryIMG_HoverZoomUpOverlap.zip
2枚の画像を並べてそれぞれマウスオーバーで拡大した画像が
前面に表示される構成になっております。
お試しください。
よろしくお願いします。
>BlackFlag さん
お忙しい中、コメントありがとうございます。
なんだかすごく手間のかかる内容だったようで、すみません。
こちらのサンプルはスマホサイトで使用させてもらっているので、PCとは動きが少し違って
いるためどうしたらいいのか考えていました。
とりあえず自分でもいろいろ試してみます。
また、今後もこちらのサイトを参考に、勉強させていただきますね。
どうもありがとうございました。
>BlackFlag 様
早速のご返事感謝痛み入ります。
サンプルまでお付けいただい、恐縮の極みであります。
サンプルを動作させますと、マウスオーバーの画面がきちんと前面に表示されます。
このサンプルにて、ソースを手直ししてみますので、動作後にご報告いたします。
本当にご多忙のところ恐縮でございます。
当方は、人様からのサンプルを使うだけの立場にて、申し訳ありません。
この度は、ありがとうごさいました。
＞湯川さん
サンプルファイルの動作について
ご確認ありがとうございました。
実際の動作がご確認いただけたようで
安心致しました。
また不明な点などありましたらご連絡くださいませ。
よろしくお願いします。
>BlackFlag 様
お陰様で、完動いたしました。ありがとうごさいました。感謝申し上げます。
動かない原因は、もちろん、ソースの誤りではなく、私のポカミスです。
<!DOCTYPEの記述ミスと
zIndex を zindex と記述していたことによるものでした。
素人をご指導いただき本当にありがとうございました。
これに懲りずに、今後共ご指導ご鞭撻をお願いいたします。時節柄、ご自愛の程を・・・
>BlackFlag 様
>zIndex を zindex と記述していたことによるものでした。
ではなく、
zIndex を z-index と記述していたことによるものでした。
に訂正いたします。
これで、写真の左側に透過領域をわざわざ作って、その分だけ右にづらすことで、回避するといった
面倒なことも必要なくなりました。
本当にありがとうございました。
＞湯川さん
実装完了のご報告
ご丁寧にありがとうございました。
無事に問題箇所も解消されて
理想の動作が実装できた様で安心致しました。
今回の様な重なり具合の制御は
いろいろとスクリプトを組んでいく際にも
HTML／CSSの構成も考慮して構築していく必要があったり
なかなか慣れるまでは大変かと思います。。
（自分もいまだに苦戦することはよくあります・・・）
また何かありましたら
ご連絡くださいませ。
よろしくお願いします。
はじめまして。
画像の拡大エフェクトを探してこちらに巡り合えました。
とても素晴らしいエフェクトでとても気に入っています。
実はｊQueryは素人で、ご説明の通りに配置してみたのですが、
元となる画像が300×100pxで、通常これをimg内でwidth=”200″ height=”50″にして表示しているのですが、
スクリプト内の記述を
var thumbSize = 200
var magnifySize = 300
にしたところ、幅は伸びるのですが、高さが変わりません。
height=”50″を有効にしたまま高さも拡大できるようにする事は可能でしょうか。
また、サイズの違う画像がいくつかあるのですが、
スクリプト内に記述するサイズを、長さ（px）ではなく拡大率（％）などにする事は出来ますでしょうか。
説明が下手で大変申し訳ありませんが、
何卒宜しくお願い致します。
＞あうさん
コメントありがとうございます。
この画像ビューアースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
縮小サイズと拡大サイズで画像の比率が違う場合は
あまり想定していなかったのですが、実装するとなると
縮小サイズの幅と高さと拡大サイズの幅と高さを
それぞれ指定する形になるかと思います。
参考までにサンプルを用意しましたので
必要であれば下記よりダウンロードしてみてください。
http://black-flag.net/devel/jQueryIMG_HoverZoomUP/jQueryIMG_HoverZoomUP_WH.zip
併せて画像のサイズを％で指定するには
————————————-
var magnifySize = ’200%’;
————————————-
の様にサイズ指定部分でシングルクォーテーションで囲って
％指定していただければいけるかと思います。
お試しください。
よろしくお願いします。
親切丁寧にご回答下さいまして有難うございます。
大変勉強になりました。
早速活用させて頂きます。
有難うございました。
Black Flag様
はじめまして。とても参考になりました。
また質問したい内容が「白くまさん」と同じであり
コードまで書いてあったので助かりました。
感謝申し上げます。
＞d9sugaさん
コメントありがとうございます。
この画像拡大ビューアースクリプトをご活用いただいている様で
嬉しく思っております。
コメントの内容まで細かくご参照いただき
ありがとうございます。
当ブログでは他にも色々と紹介させていただいておりますので
あれこれお試しいただけると幸いです。
よろしくお願いします。
キャッシーと言います。 お世話になります。
jQuery IMG HOVER ZOOMUP【SAMPLE01】が気に入って、サンプルをダウンロードし、自分の作品への
適用を考えています。（ほかのサンプルも一通り試してみましたが、以下の現象は全部同じです）
BlackFlagさんのどのサンプルも、Chromeでも、IEでも問題なく画像が見え動作します。
ところが、自分で用意した写真数枚を差し替え、サンプルの猫ちゃんと共用しますと、Chromeでは自分の
写真も猫ちゃんも両方問題なく画像が見えますが、IEにすると、猫ちゃんは見えますが、自分の用意した
写真は見えません。（空白になってしまう）
更に、全部、自分の写真に入れ替えると、Chromeでは問題なく全部見えますが、IEにすると、全部見え
なくなってしまいます。
jpg、pngでも同じです。 IEで画像が出なくなる事に付いて何かお心当たりあれば教えていただけますか？
お忙しい所、恐縮です。
＞キャッシーさん
コメントありがとうございます。
この画像拡大ビューアースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
実際に実装されている各ファイルを見てみないと何とも言えないのですが
特定の画像が表示されない時に考えられるものとしては
ファイル名（拡張子含む）の英字表記の大文字小文字が
HTMLソース上に書かれているものと実際のファイル名が違う場合などが
考えられるかと思います。
ご確認ください。
よろしくお願いします。
早速の返信、ありがとうございます。 御指摘いただいたように、拡張子が大文字／小文字の違いで、Brawserで表示出来ない事は、たびたび経験し、今回もか？ と再確認しましたが、間違っていませんでした。
ただし、一つ不思議な現象が分かりました。 私はHTMLもCSSもDreamweaver(DW)を使って書き込み、表示はDWの
機能の、”ブラウザでのプレﾋﾞュー／デバッグ”で確認しています。
これを使うと、Chromeでは、ネコちゃんも私の写真も、両方問題なく表示できます。 しかし、IEにするとネコちゃんは表示
されますが、私の写真は表示されません。
そこで、そのファイルを普段使用している、FC2のサーバにアップしたところ、ChromeでもIEでも、”ネコちゃん”、”私の写真”ともども、問題なく表示出来る事が分かりました。
ちなみに、そのurlは以下の通りです。
http://cassieandmomo.jp/jQ_HoverZmUpOverlap/index.html
どうも、DWの機能の、”IEプレビュー”と”私の写真”の関係（相性）のようです。 そんなのってあるんですかね？？
写真はネコちゃんも、私の写真もPhotoshopで大きさや、ｐｘは同じにしてるんですが・・・。
いずれにしても、原因は今一つスッキリしませんが、逃げ道の一つは見つかりました。
こんな御経験ありますか？
＞キャッシーさん
DWは普段あまり使用しないのでその様な経験はありませんが
検索してみるとDWのプレビューで画像が表示されない例はいくつかあるようですね。
画像自体がRGBではなくCMYKになっていたり
いくつか改善方法はあるようなので
「DW プレビュー 画像」をキーワードに
あれこれ検索してみてください。
よろしくお願いします。
御親切にありがとうございます。
BlackFlagさんへ
DWで自分の画像のみを入れて、作成し「DW プレビュー 画像」を見ると、Chrome, IEとも問題なく表示されます。
多分、そのファイルをサーバにアップしても問題なく表示出来ると思います。
自分の画像のみを入れる → プレビューOK → サーバアップ → 表示OK！ となる道筋が見えて来ましたので
当面の作業は進められる見通しが立ちました。
いずれ、ゆっくり「DW プレビュー 画像」について検索などして、調べてみます。
ありがとうございました。 今後も宜しくお願いします。
こんにちわ
leftとrightの場合は書いてあるとおりでうまくいくのですが
centerの場合はどう記述すればよいのでしょうか？
if($(this).parents().hasClass(‘center’)) {
$(this).parent(‘.magnify_cover’).css({
margin: ’0 0 10px 10px’,
float:’center’
});
上記のようにright部分をcenterに変えてみたのですがonmouse時にずれてしまいます
教えていただければ幸いです。
＞よっしーさん
コメントありがとうございます。
この画像ビューアースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
申し訳ありませんが、
当スクリプトは中央寄せには対応しておりません。
またその様なスクリプトが出来ましたら
ここで紹介させていただきます。
よろしくお願いします。
ずっと探していた画像の動作で
まったくwordpress じたい素人なのですが
どうしてもどうしてもその動作を適用したいです。
でもせっかく記述頂いているものも何に記述すればいいのか
プラグインなどどうすればいいのか
CSSやIMGに記述はわかりました
何卒よろしくお願い致します。
色々なプラグインでネット上から学び
数々設置できていますが、こちらの方法が知りたいです。
すいません
お世話になります。
色々jQueryの設置方法や様々なサイトからなんとなく
やってみたら動作に変化がありました。
投稿ページ、固定ページ内の画像 alt=”" の後ろに [class="magnify"]を記述
CSSにシャドウの為のものを記述
サイゴンわからなかった◆SCRIPTをheder.php のヘッダー内へコピーし画像サイズを変えました
マウスオーバーするとシャドウがつきましたが拡大してくれません
大きいサイズの画像をUPする必要があるのでしょうか？
アドバイス頂けたら幸いです
＞SHARAさん
コメントありがとうございます。
当記事の画像拡大ビューアーをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
実際の実装されている画面を確認できないとなんとも言えないのですが
当記事からダウンロードできるサンプルファイルから
構成等ご確認いただければと思います。
画像の縮小／拡大サイズはスクリプトの
「thumbSize = 150」「magnifySize = 350」で指定しており
画像ファイルが拡大サイズよりも小さい場合はブラウザ上での表示は粗くなりますが
動作自体は動くと思います。
ご確認ください。
よろしくお願いします。
初めまして、本当に素敵で有難いサイトですね。内容的にはチンプンカンプンのYoshiと申しますが
日々楽しく閲覧させて頂いております。
jQuery IMG HOVER ZOOMUPを何とか自ＨＰに組込み試験をしたところ次の問題があります。
未熟なYoshiでありますので対応等ありましたら、詳しく説明頂けたら幸いです。
問題、
他ページからスムースストロークにて、「IMG HOVER ZOOMUP」の組込みページの指定位置に
ジャンプした際（組込み画像以下の位置）、位置ズレを生じてしまいます。
他ページへのジャンプはJQueryで a href=”NamiOto.html?id=80″ とかで飛ばしています。
勝手なお願いですが、どうぞ宜しくお願い申し上げます。
＞鈴木好春さん
コメントありがとうございます。
この画像拡大ビューアースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
実際に実装されている各ファイルを拝見させていただき
どういった現象が起こっているのか見てみないと何とも言えないのですが
スクリプトを読み込むタイミングや順序で改善できる可能性もあるのではないかと
考えております。
ご確認ください。
よろしくお願いします。
ご回答をありがとうございました。
また、返事が遅くなり大変失礼しました。
いろいろと検討してみましたが、
解決には至りませんでした。
もう少し調べてみます。
今後とも宜しくお願い致します。
こんにちは、これは素晴らしいですね。ぜひ使わせて下さい。
一つ質問なのですが、この画像の大きさ、デフォルト時、マウスオーバー時をそれぞれ指定できるのでしょうか？
宜しくお願い致します。失礼致します。
＞さんたさん
コメントありがとうございます。
当記事の画像拡大ビューアーをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
記事内にも記載してある内容になりますが
スクリプト6～7行目にある変数
「thumbSize」は縮小（デフォルト）表示の画像サイズ（width）で、
もう一方の「magnifySize」は拡大表示（マウスオーバー）した際の
画像サイズ（width）を指定する項目になります。
ご確認ください。
よろしくお願いします。
BlackFlag 様
お返事いただきまして、ありがとうございました。
画像拡大ビューアー、お客様に好評です。
Jquery LIｇｈｔBoxより簡素で見やすいと思います。マウスオーバーで拡大っていうのが素晴らしいです。
使わせて下さい。
ありがとうございました。m(_ _)m