Как правило, у вас есть изображение 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 идея.
но, пожалуйста, продолжайте отвечать...
спасибо
alt - это текст, который отображается, когда изображение не может быть загружено, или пользовательский браузер не поддерживает изображения (например, читатели для слепых).
Попробуйте использовать что-то вроде лайтбокса:
http://www.lokeshdhakar.com/projects/lightbox2/
обновление: Эта библиотека может быть лучше, поскольку она основана на jQuery, о которой вы сказали, что используете http://leandrovieira.com/projects/jquery/lightbox/
<a href="image2.gif" ><img src="image1.gif"/></a>
всегда работала для меня. Я использовал его для хорошего эффекта в дневнике Super Bowl, но вижу, что скрипты, которые я использовал, сломаны. Как только я их исправлю, я буду редактировать URL.
<img src='thumb.gif' onclick='this.src="full_size.gif"' />
Конечно, вы можете изменить событие onclick для загрузки изображения, где хотите.
Это не будет делать то, что вы ожидаете:
<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 равным высоте изображения. Он будет фактически загружать оба изображения одновременно, но, полагая, что с низким разрешением один загружается быстро, вы можете увидеть его первым, пока загружается изображение с высоким разрешением.
Я бы этого не делал - тег alt существует специально, когда ваше изображение не отображается. Однако, и это относится ко многим материалам jQuery, атрибут "rel" очень полезен.
В такой функции потребуется некоторый Javascript, но, вероятно, возможно просто использовать CSS (в браузерах, отличных от IE6 и 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 он может работать и в других браузерах.
Вот версия LightBox Angular. Просто потрясающе:)
Примечание. Я поставил этот ответ, поэтому в тегах упоминается библиотека No Js.
<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>