Как сделать эскиз <img> показать полноразмерное изображение при нажатии?

Как правило, у вас есть изображение tage с src в качестве источника изображения и alt в качестве альтернативного текста:

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

У вас есть что-то вроде?:

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

Итак, это означает, что src имеет источник изображения, а alt также имеет источник изображения.

Что я хочу сделать, это вытащить 2 изображения из flickr, используя flickr api (изображение большого пальца и изображение с нормальным размером), и когда пользователь нажимает на большой палец, отображается изображение нормального размера.

Я пробовал что-то вроде этого:

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

... но я получаю изображение не найдено в качестве большого пальца (хотя изображение действительно существует).

Я использую JQuery/Javascript.

Любая помощь, предложения или даже альтернативы приветствуются и оцениваются.

Спасибо

Спасибо за ответ Сэм,

Мне не нравится лайтбокс, потому что я считаю это слишком медленным и фантастическим.

но мне нравится geowa4 идея.

но, пожалуйста, продолжайте отвечать...

спасибо

Ответ 1

alt - это текст, который отображается, когда изображение не может быть загружено, или пользовательский браузер не поддерживает изображения (например, читатели для слепых).

Попробуйте использовать что-то вроде лайтбокса:

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

обновление: Эта библиотека может быть лучше, поскольку она основана на jQuery, о которой вы сказали, что используете http://leandrovieira.com/projects/jquery/lightbox/

Ответ 2

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

Техника

всегда работала для меня. Я использовал его для хорошего эффекта в дневнике Super Bowl, но вижу, что скрипты, которые я использовал, сломаны. Как только я их исправлю, я буду редактировать URL.

Ответ 3

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

Конечно, вы можете изменить событие onclick для загрузки изображения, где хотите.

Ответ 4

Это не будет делать то, что вы ожидаете:

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

Атрибут ALT предназначен только для текста - он не будет делать ничего особенного, если вы укажете ему URL-адрес изображения.

Если вы хотите сначала отобразить изображение с низким разрешением, а затем заменить его на изображение с высоким разрешением, вы можете сделать некоторые javascript-коды для замены изображений. Или, возможно, загрузите изображение в div, который имеет фоновый рисунок, заполненный низким разрешением изображения. Затем, когда загружается изображение с высоким разрешением, он загружает надпись на задний план.

К сожалению, нет прямого способа сделать это.

Вторая попытка создаст ссылку на image2, но на самом деле отобразит изображение1.

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

Если вы хотите просмотреть более высокую версию res, предложение @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 равным высоте изображения. Он будет фактически загружать оба изображения одновременно, но, полагая, что с низким разрешением один загружается быстро, вы можете увидеть его первым, пока загружается изображение с высоким разрешением.

Ответ 5

Я бы этого не делал - тег alt существует специально, когда ваше изображение не отображается. Однако, и это относится ко многим материалам jQuery, атрибут "rel" очень полезен.

Ответ 6

В такой функции потребуется некоторый Javascript, но, вероятно, возможно просто использовать CSS (в браузерах, отличных от IE6 и 7).

Ответ 7

Экспериментальный подход, основанный на сценарии без CSS, с предварительным загрузкой изображений ^BONUS! и который работает только в 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 + relative position он может работать и в других браузерах.

Ответ 8

Вот версия LightBox Angular. Просто потрясающе:)

Примечание. Я поставил этот ответ, поэтому в тегах упоминается библиотека No 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>