1

次のコードを使用して、画像の大きなバージョンを新しいウィンドウで開くことができました。

<IMG SRC="pic_small.jpg" onClick="view();">

<script language="JavaScript">

function view() {
imgsrc = "pic_big.jpg";


viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');    
}
</script>

私が今抱えている問題は、自分の Web ページにさらに多くの画像があることです。スクリプトごとに別の関数を記述する必要はなく、すべての画像に対して 1 つの関数を使用したいと考えています。言い換えれば、上記と同じことを行うスクリプトが必要ですが、これらすべての (必要に応じて変更された) HTML 行で動作します

<IMG SRC="pic1_small.jpg" onClick="view();">
<IMG SRC="pic2_small.jpg" onClick="view();">
<IMG SRC="pic3_small.jpg" onClick="view();">
<IMG SRC="pic4_small.jpg" onClick="view();">

また、開くウィンドウを全体像と同じサイズにする方法があるかどうかも疑問に思っていました。

4

3 に答える 3

4

最初の質問について

<IMG SRC="pic_small.jpg" onClick="view(this);">

<script language="JavaScript">
   function view(img) {
      imgsrc = img.src.split("_")[0] + "_big.jpg";
      viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');    
   }
</script>

アップデート

2番目の質問に対して、それはできます。

更新 2

これは、同じ形式を維持している画像名に依存します。または、次のようにすることもできます。

<img src="pic_small.jpg" onclick="view('pic_big.jpg')" />

<script type="text/javascript">
   function view(imgsrc) {
      viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300'); 
   }
</script>
于 2012-11-27T23:22:24.290 に答える
0

ライトボックスなどの js ライブラリを使用することをお勧めします。それは多かれ少なかれあなたが求めることをします。たとえば、ライトボックス 2を参照してください。

jquery と組み合わせてライトボックスを HTML に含めることで、「lightbox」の「rel」プロパティを持つタグを使用して画像のリストを作成できます。画像を囲むリンクをクリックすると、ライトボックスが自動的にアクティブになります。ここに例があります。

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

前述のリンクの「使用方法」セクションにある他の例を参照してください。

于 2012-11-27T23:21:53.763 に答える
0

JSのほぼデファクトライブラリであるjQueryライブラリを見てください。それを使用すると、そのようなことができます

$('img').click(function(){
  view($(this).attr('src'));
})


function view(small){
  var big = small.split("_")[0] + "_big.jpg";
  viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');    
}

このようにして、すべての画像が同じ動作をします

于 2012-11-27T23:24:42.647 に答える