web-dev-qa-db-ja.com

サムネイル<image>をクリックしたときにフルサイズの画像が表示されるようにするにはどうすればよいですか？

通常、あなたは src 画像のソースとして、 代替 代替テキストとして：

<img src="image1.gif" alt="Image 1" />

次のようなものはありますか？：

<img src="image1.gif" alt="image2.gif" />

つまり、 src 画像ソースと 代替 画像ソースもあります。

私がやりたいことは、flickr apiを使用してflickrから2つの画像（サム画像と通常サイズの画像）をプルし、ユーザーがサムをクリックすると、通常サイズの画像が表示されることです。

私はこのようなものを試しました：

<a href="image2.gif" ><img src="image1.gif"/></a>

...しかし、デフォルトの ' not found '画像が親指として表示されます（画像が実際に存在する場合でも）。

私はJQuery/Javascriptを使用しています。

どんな助け、提案、あるいは代替案もすべて歓迎され、高く評価されています。

ありがとう

返信ありがとうサム、

ライトボックスが遅すぎて空想的すぎるため、ライトボックスは好きではありません。

しかし、私は geowa4 のアイデアが好きです。

しかし、どうか、あなたの答えを続けてください...

ありがとう

htmlimagetags
12
A Hassan

の

<a href="image2.gif" ><img src="image1.gif"/></a>

技術は常に私のために働いてきました。スーパーボウルの日記で効果的に使用しましたが、使用したスクリプトが壊れています。修正したら、URLを編集します。

16
Norman Ramsey

altは、画像を読み込めない場合、またはユーザーのブラウザーが画像をサポートしていない場合に表示されるテキストです（例：視覚障害者向けのリーダー）。

ライトボックスのようなものを使ってみてください：

http://www.lokeshdhakar.com/projects/lightbox2/

更新：このライブラリは、あなたが使用していると言ってきたjQueryベースのライブラリよりも優れていると思います http://leandrovieira.com/projects/jquery/lightbox/

10
Sam
<img src='thumb.gif' onclick='this.src="full_size.gif"' />

もちろん、onclickイベントを変更して、画像を好きな場所に読み込むことができます。

8
geowa4

これはあなたが期待していることをしません：

<img src="image1.gif" alt="image2.gif" />

ALT属性はテキストのみです。画像のURLを指定しても、特別なことは何も行われません。

最初に低解像度の画像を表示し、次に高解像度の画像に置き換える場合は、JavaScriptコーディングを行って画像を入れ替えることができます。または、低解像度の画像で塗りつぶされた背景パターンを持つdivに画像を読み込むこともできます。次に、高解像度の画像が読み込まれると、背景の上に読み込まれます。

残念ながら、これを行う直接的な方法はありません。

2回目の試行では、image2へのリンクが作成されますが、実際にはimage1が表示されます。

<a href="image2.gif" ><img src="image1.gif"/></a>

より高い解像度のバージョンをポップアップ表示したい場合は、@ Samの提案がお勧めです。

このCSSはあなたのために働くかもしれません（Firefox 3では私のために働きます）：

<html>
<head>
    <style>
        .lowres { background-image: url('low-res.png');}
    </style>
</head>
<body>
    <div class="lowres" style="height:500px; width:500px">
        <img src="hi-res.png" />
    </div>
</body>
</html>

その例では、divの高さと幅を画像の高さと幅に設定する必要があります。実際には両方の画像が同時に読み込まれますが、低解像度の画像がすぐに読み込まれると想定すると、高解像度の画像のダウンロード中に最初に表示される場合があります。

1
Michael Haren

画像をプリロードするスクリプトレスでCSSのみの実験的アプローチボーナス！ そしてそれはFirefoxでのみ機能します：

<style>
a.zoom .full { display: none; }
a.zoom:active .thumb { display: none; }
a.zoom:active .full { display: inline; }
</style>

<a class="zoom" href="#">
<img class="thumb" src="thumbnail.png"/>
<img class="full" src="fullsize.png"/>
</a>

デフォルトでサムネイルを表示します。マウスボタンをクリックして押したままにすると、フルサイズの画像が表示されます。ボタンを離すとすぐにサムネイルに戻ります。この方法を使用することを提案することは決してありません。問題を部分的に解決するのは、CSSのみのアプローチのデモにすぎません。一部のz-index +相対位置の調整により、他のブラウザーでも機能する可能性があります。

0
Ates Goral

これを例として使用します

https://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div id="pageone" data-role="main" class="ui-content">
    <p>Click on the image to enlarge it.</p>
    <p>Notice that we have added a "back button" in the top right corner.</p>
    <a href="#myPopup" data-rel="popup" data-position-to="window">
    <img src="https://lh3.googleusercontent.com/8XQPMmZImaDsSyEPbAptXOHQYZKP_rggu_tr9EPl3jpPnuXOd5gGP5kQKqFT0ZLXQ36-=s136" alt="Skaret View" style="width:200px;"></a>

    <div data-role="popup" id="myPopup">
      <p>This is my picture!</p> 
      <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="https://lh3.googleusercontent.com/8XQPMmZImaDsSyEPbAptXOHQYZKP_rggu_tr9EPl3jpPnuXOd5gGP5kQKqFT0ZLXQ36-=s136" style="width:800px;height:400px;" alt="Skaret View">
    </div>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 

</body>
</html>
0
Carlo Guevarra

これがAngular LightBoxのバージョンです。素晴らしいです:)

注：私はこの答えを出したので、タグの下でJsライブラリは言及されていません。

angular-bootstrap-lightbox

<ul ng-controller="GalleryCtrl">
  <li ng-repeat="image in images">
    <a ng-click="openLightboxModal($index)">
      <img ng-src="{{image.thumbUrl}}" class="img-thumbnail">
    </a>
  </li>
</ul>
0
Sampath

私はそれをしません-あなたの画像が表示されないときのために特別にaltタグがあります。ただし、これは多くのjQueryに当てはまり、「rel」属性は非常に便利です。

0
Mike Robinson

この種の機能にはJavascriptが必要ですが、CSSを使用するだけでおそらく可能です（IE6＆7以外のブラウザーで）。

0
dylanfm