1. Trang chủ
  2. Câu hỏi và trả lời
  3. Làm cách nào để tạo hình thu nhỏ <img> hiển thị hình ảnh có kích thước đầy đủ khi được nhấp?

Làm cách nào để tạo hình thu nhỏ <img> hiển thị hình ảnh có kích thước đầy đủ khi được nhấp?

2009-01-22 23 views
10

Thông thường bạn có một Tage hình ảnh với src như nguồn gốc của hình ảnh và alt như văn bản thay thế:Làm cách nào để tạo hình thu nhỏ <img> hiển thị hình ảnh có kích thước đầy đủ khi được nhấp?

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

Bạn có thể có một cái gì đó như là ?:

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

Vì vậy, điều đó có nghĩa là src có nguồn hình ảnh và alt cũng có nguồn hình ảnh.

Điều tôi muốn làm là kéo 2 hình ảnh từ flickr bằng cách sử dụng flickr api (hình ảnh ngón tay cái và hình ảnh có kích thước bình thường) và khi người dùng nhấp vào ngón tay cái, hình ảnh có kích thước bình thường được hiển thị.

Tôi đã thử một cái gì đó như thế này:

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

... nhưng tôi nhận được mặc định 'not found' hình ảnh như ngón tay cái (mặc dù hình ảnh không thực sự tồn tại).

Tôi đang sử dụng JQuery/Javascript.

Mọi trợ giúp, đề xuất hoặc thậm chí là các lựa chọn thay thế đều được hoan nghênh và đánh giá cao.

Cảm ơn

Cảm ơn bạn đã trả lời Sam,

tôi không thích hộp đèn vì tôi thấy nó quá chậm và lạ mắt.

nhưng tôi thích ý tưởng của geowa4.

nhưng xin vui lòng, tiếp tục câu trả lời của bạn đến ...

nhờ

Nguồn

2009-01-22 A Hassan

Trả lời

0

tôi sẽ không làm điều đó - thẻ alt là có đặc biệt cho khi hình ảnh của bạn không được hiển thị. Tuy nhiên, và điều này áp dụng cho rất nhiều công cụ jQuery, thuộc tính "rel" rất hữu ích.

Nguồn

2009-01-22 03:17:17

0

Loại chức năng đó sẽ yêu cầu một số Javascript, nhưng có thể chỉ sử dụng CSS (trong các trình duyệt khác ngoài IE6 & 7).

Nguồn

2009-01-22 03:17:25 dylanfm

1

này sẽ không làm những gì bạn đang mong đợi:

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

Thuộc tính ALT là văn bản duy nhất - nó sẽ không làm bất cứ điều gì đặc biệt nếu bạn cho nó một URL hình ảnh.

Nếu ban đầu bạn muốn hiển thị hình ảnh có độ phân giải thấp, sau đó thay thế hình ảnh có độ phân giải cao, bạn có thể làm một số mã javascript để hoán đổi hình ảnh. Hoặc, có lẽ tải hình ảnh vào một div trong đó có một mẫu nền đầy với hình ảnh res thấp. Sau đó, khi tải hình ảnh có độ phân giải cao, ảnh sẽ tải lên trên nền.

Thật không may, không có cách nào trực tiếp để thực hiện việc này.

Lần thử thứ hai của bạn sẽ tạo liên kết tới image2, nhưng thực sự hiển thị hình ảnh1.

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

Nếu bạn muốn bật lên phiên bản có độ phân giải cao hơn, đề xuất của Sam là một ý kiến ​​hay.

CSS này có thể làm việc cho bạn (nó làm việc cho tôi trong 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>

Trong ví dụ này, bạn phải thiết lập các div chiều cao/chiều rộng đó của hình ảnh. Nó sẽ thực sự tải cả hai hình ảnh cùng một lúc, nhưng giả sử một hình ảnh có độ phân giải thấp tải nhanh chóng, bạn có thể thấy nó trước khi tải xuống hình ảnh có độ phân giải cao.

Nguồn

2009-01-22 03:18:17

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

Tất nhiên bạn có thể thay đổi sự kiện onclick để tải hình ảnh ở bất cứ đâu bạn muốn.

Nguồn

2009-01-22 03:19:54 geowa4

0

Cách tiếp cận thử nghiệm chỉ CSS, không có script với hình ảnh tải trước THƯỞNG! và chỉ hoạt động trong 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>

Hiển thị hình thu nhỏ theo mặc định. Hiển thị hình ảnh có kích thước đầy đủ trong khi nút chuột được nhấp và giữ. Quay trở lại hình thu nhỏ ngay sau khi nút được phát hành. Tôi không có cách nào gợi ý rằng phương pháp này được sử dụng; nó chỉ là một bản demo của một phương pháp tiếp cận CSS duy nhất mà [rất] giải quyết một phần vấn đề. Với một số chỉnh sửa vị trí tương đối z-index +, nó cũng có thể hoạt động trong các trình duyệt khác.

Nguồn

2009-01-22 04:06:15

10

Kỹ thuật

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

đã luôn luôn làm việc cho tôi. Tôi sử dụng nó để có hiệu quả tốt trong nhật ký Super Bowl của tôi, nhưng tôi thấy rằng các kịch bản tôi sử dụng bị hỏng. Khi tôi đã sửa chúng, tôi sẽ chỉnh sửa trong URL.

Nguồn

2009-01-22 04:57:06

0

Đây là phiên bản Góc của Hộp đèn. Just Awesome :)

Lưu ý: Tôi đã đặt câu trả lời này do đó không có thư viện Js nào được đề cập trong Thẻ.

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>

Nguồn

2016-03-03 11:46:52 Sampath

Các vấn đề liên quan

 Các vấn đề liên quan