レス数:6 / 状態:未解決 / No:60 / ATOM
1
名前:HANAKO
日付:2010/09/15(水)11:07:29
ID:AR9CsZVlheEU
初めて質問させて頂きます。
何卒ご教授お願い致します。
http://www.deannecheuk.com/
上記サイトのサムネイルをクリックすると、LightBox風な画像をみる画面に変わります。
このとき、ブラウザを伸縮させると、表示されている画像もスムーズに伸縮します。
このようなやり方をどうすれば良いのか全く分からず困っておりました。
どなたかご教授頂ければと思います。
宜しくお願い致します。
何卒ご教授お願い致します。
http://www.deannecheuk.com/
上記サイトのサムネイルをクリックすると、LightBox風な画像をみる画面に変わります。
このとき、ブラウザを伸縮させると、表示されている画像もスムーズに伸縮します。
このようなやり方をどうすれば良いのか全く分からず困っておりました。
どなたかご教授頂ければと思います。
宜しくお願い致します。
2
日付:2010/09/15(水)13:59:36
ID:qPr0YUEfJmUW
恐らくJavaScriptではないでしょうか。
JavaScript の DOM の API を使用すると画像のエレメントを取得できます。
エレメントから位置や幅や高さを変更する事ができます。
JavaScript の DOM の API を使用すると画像のエレメントを取得できます。
エレメントから位置や幅や高さを変更する事ができます。
3
名前:HANAKO
日付:2010/09/15(水)14:47:19
ID:AR9CsZVlheEU
ご回答ありがとうございます。
こちらは制作するのはかなり難しいでしょうか？
すみません。ど素人なもので、、、サンプルか何か簡単に作って頂けると助かるのですが。
何卒宜しく御願い致します。
こちらは制作するのはかなり難しいでしょうか？
すみません。ど素人なもので、、、サンプルか何か簡単に作って頂けると助かるのですが。
何卒宜しく御願い致します。
4
名前:HANAKO
日付:2010/09/15(水)16:21:43
ID:AR9CsZVlheEU
現在非常に困っておりまして、どなたか本当に簡単でもよいので、
じっくり教えて頂くか、簡素なサンプルだけでも作成して頂けませんでしょうか。
何卒、よろしくお願い致します。
じっくり教えて頂くか、簡素なサンプルだけでも作成して頂けませんでしょうか。
何卒、よろしくお願い致します。
5
名前:k
日付:2010/09/17(金)23:17:12
ID:9kJEWPZA4knz
サンプル作ってみましたが、ここからhttp://www.deannecheuk.com/みたいにまで作るのは、
相当大変でしょう…。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>写真がウィンドウにあわせて伸縮</title>
<style type="text/css">
#img{
position : absolute;
top : 0;
left : 0;
}
</style>
<script type="text/javascript">
var imgH, imgW;
function adjustImg(){
var h, w, ih = imgH, iw = imgW;
if(navigator.userAgent.toLowerCase().indexOf("opera") == -1 && navigator.appVersion.toLowerCase().indexOf("safari") == -1){
h = document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight;
w = document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth;
} else{
h = window.innerHeight; w = window.innerWidth;
}
// サイズ
var scale = Math.min((h-20)/ih, (w-20)/iw);
if(scale < 1){
ih *= scale; iw *= scale;
}
document.getElementById("img").style.width = iw + "px";
document.getElementById("img").style.height = ih + "px";
// 位置
document.getElementById("img").style.top = (h - ih) / 2 + "px";
document.getElementById("img").style.left = (w - iw) / 2 + "px";
}
function getPhotoInfo(){
imgH = document.getElementById("img").height;
imgW = document.getElementById("img").width;
window.onresize = adjustImg;
adjustImg();
}
</script>
</head>
<body onload="getPhotoInfo();">
<img src="photo.jpg" id="img">
</body>
</html>
photo.jpgは自分で用意してください。
相当大変でしょう…。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>写真がウィンドウにあわせて伸縮</title>
<style type="text/css">
#img{
position : absolute;
top : 0;
left : 0;
}
</style>
<script type="text/javascript">
var imgH, imgW;
function adjustImg(){
var h, w, ih = imgH, iw = imgW;
if(navigator.userAgent.toLowerCase().indexOf("opera") == -1 && navigator.appVersion.toLowerCase().indexOf("safari") == -1){
h = document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight;
w = document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth;
} else{
h = window.innerHeight; w = window.innerWidth;
}
// サイズ
var scale = Math.min((h-20)/ih, (w-20)/iw);
if(scale < 1){
ih *= scale; iw *= scale;
}
document.getElementById("img").style.width = iw + "px";
document.getElementById("img").style.height = ih + "px";
// 位置
document.getElementById("img").style.top = (h - ih) / 2 + "px";
document.getElementById("img").style.left = (w - iw) / 2 + "px";
}
function getPhotoInfo(){
imgH = document.getElementById("img").height;
imgW = document.getElementById("img").width;
window.onresize = adjustImg;
adjustImg();
}
</script>
</head>
<body onload="getPhotoInfo();">
<img src="photo.jpg" id="img">
</body>
</html>
photo.jpgは自分で用意してください。
6
名前:HANAKO
日付:2010/09/21(火)17:59:42
ID:obfr.U8RuVQS
ありがとうございました！
大変なんですね。。。。
色々と考えてみます。
大変なんですね。。。。
色々と考えてみます。
このスレッドについて
| 質問の状態 : | 未解決 |
| 投稿開始日 : | 2010/09/15(水)11:07:29 |
| 投稿終了日 : | 2010/09/21(火)17:59:42 |
| 投稿者 : | HANAKO |
| レス総数 : | 6 |
| スレッド番号 : | 60 |