Показать изображение в теге div с его реальным размером с помощью jquery/css/html

Я работаю над приложением asp.net mvc3. Мои взгляды используют бритву, но я думаю, что это не имеет значения сейчас. Мне нужна была галерея изображений, где вы можете удалить и загрузить изображение и некоторые другие требования, которые я не смог найти в галереях, которые я видел в сети, поэтому я закончил свою собственную реализацию.Показать изображение в теге div с его реальным размером с помощью jquery/css/html

У меня проблема с отображением изображения в реальном размере от тумб в Галерею сделал небольшой скрипт, чтобы показать суть проблемы:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.thumb-image { cursor: pointer;} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
</head> 
<body> 
<img src="Forest.jpg" class="thumb-image" alt="Forest" height="300px" width="300px"/> 
<script> 
$('.thumb-image').click(function(){ 
    $(this).hide();// 
}); 
</script> 
</body> 
</html>

Этот небольшой скрипт я использовал только, чтобы проверить, если Я могу достичь изображения из DOM (или, точнее, как его достичь), я знал, что это возможно, это только я с очень базовыми навыками в JS/jQuery).

Итак, мой вопрос: Forest.jpg - изображение на рабочем столе, изначально это 3550x2377px. Теперь я использую изображение с рабочего стола - изначально изображения берутся с сервера, но даже тогда я не храню кеш. Стиль для тега <img> предназначен для достижения какого-либо эффекта эскизов, но изображение загружается клиенту в полном размере. Таким образом, можно показать это изображение в реальном размере примерно в <div> tag (в данном случае 3550x2377px) без дополнительного вызова на сервер или в моем случае - повторение пути к изображению, но с использованием изображения из миниатюры , который загружается в полном размере или после того, как я сделаю изменение CSS для width и height, невозможно снова получить реальные размеры?

источник

2013-06-07 Leron

Итак, вы хотите показать большое изображение, если вы нажмете на тег изображения с меньшими размерами? – migg

Да. Так же, как в стандартной галерее изображений - показывать маленькие значки/большие пальцы и позволять пользователю видеть изображение в реальном размере. Все дело в технических рисунках, поэтому я не хочу изменять размер, когда пользователь нажимает изображение реального размера, потому что я не уверен, что это не повредит их работе. Поэтому я просто хочу показать изображение с размером, который он загрузил один раз от пользователя, но избегать двойного вызова на сервер, если это возможно. Итак, короче - да, вы правы. – Leron

Вы действительно должны создать некоторые фактические миниатюры на сервере. Представьте, что ваше изображение имеет размер 1 МБ, вы вынуждаете пользователя загружать его, даже если они не нажимают на изображение. Теперь представьте 10 из них на вашей странице или 10 кликов на 10 отдельных страниц. Вы боретесь с пропускной способностью и временем загрузки, и стоите себе больше пропускной способности. – jammykam

вместо использования высоты и ширины атрибутов использовать класс и использовать JQuery, чтобы удалить/скрыть класс

.thumbimage { 
height:300px; 
width:300px; 
} 

$('.thumb-image').click(function(){ 
    $(this).toggleClass('thumbimage'); 
});

источник

2013-06-07 04:46:36

Lol, nice, jQuery - это весело. Есть ли где держать курсор: указатель при переключении? – Leron

благодарит Leron за то, что он нацелился на изображение, все время я использовал бы другой класс или css statment, например div img {cursor: pointer} - в этом случае любое изображение в div всегда будет содержать указатель курсора, но, вероятно, было бы лучше поместите идентификатор в контейнеры изображений и нацелитесь на него так: #idname img {cursor: pointer} ... надеюсь, что это поможет –

Вообще это плохая практика, чтобы использовать img, который ссылается на большой файл изображения, когда вы только нужно показать небольшую версию. Это связано с тем, что браузер все равно должен полностью загрузить большую версию изображения, что будет медленным, а затем отображает только небольшую версию, которая обычно выглядит не очень хорошо.

Лучший способ для пользователя сайта состоял в том, чтобы создать небольшую версию большого изображения, которое вы показываете в своем теге img, а затем загружать только большую версию, если пользователь нажимает на нее. Как это ваш сайт будет оказана гораздо быстрее и будет использовать меньше пропускная способность и т.д.

Это будет сделано так:

<img src="Forest_thumb.jpg" class="thumb-image" alt="Forest" /> 
<script> 
jQuery(function($) { 
    $('.thumb-image').click(function(){ 
     $(this).hide(); 
     $('<img src="Forest.jpg" class="full-image" alt="Forest" />') 
      .appendTo('.your-div'); 
    }); 
}); 
</script>

В вашем случае, используя большое изображение как большой палец, указав ширину и высоту браузера уже выбрал большое изображение, поэтому, если впоследствии вы используете большое изображение, оно не будет загружено с вашего сервера, а из кеша браузера.

Если вы хотите сохранить большое изображение большого пальца и показать большое изображение при нажатии кнопки на img -tag можно, например, просто удалить ширину и высоту от вашего IMG тега с JQuery, как это:

$('.thumb-image').click(function(){ 
    $(this).removeAttr('width').removeAttr('height'); 
});

источник

2013-06-07 04:49:20 migg

Спасибо, более полный ответ. Я действительно могу подумать о кешировании изображений на сервере, но пока мне что-то нужно. Кроме того, это не совсем сайт, это приложение, которое будет использовать много времени в автономном режиме и выходить в Интернет только для передачи данных с сервисом, где мне нужно передать исходные изображения, так что потребность в кешировании на стороне сервера сомнительна. – Leron

в функции нажмите(), если вы хотите, чтобы изменить размер изображения до оригинального размера:

$(this).removeAttr("width").removeAttr("height");

Или, если вы хотите иметь копию изображения с оригинальным размером:

var img = $("<img/>").attr("src", $(this).attr("src")).load(function() { 

    // your image dimensions: 
    pic_real_width = this.width; 
    pic_real_height = this.height; 

    // show full-size image 
    $('body').append(img); 
});

источник

2013-06-07 04:49:40 mjastrzebowski

Показать изображение в теге div с его реальным размером с помощью jquery/css/html

ответ

Смежные вопросы