show image onclick javascript

Как загрузить исходное изображение, когда была нажата версия изображения с уменьшенным рисунком? Я использую ASP.NET в сочетании с javascript.show image onclick javascript

Оригинальные изображения большие, поэтому они были масштабированы на стороне сервера. Это ускоряет загрузку сайта. Но каким-то образом загружаются обе версии (оригинал и обрезка) изображений.

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

Как я могу это сделать?

источник

2010-09-17 Yustme

Retagged with fancybox, так как это не упоминается нигде в вопросе, только в комментариях ниже. – TimS

Html, например, как показано ниже для каждого изображения эскиза следует сделать трюк

<a href="[url to original image]" target="_blank" id="thumbnail_link"> 
    <img src="[url to thumbnail image]" alt="Click to see the full image" /> 
</a>

Edit: Модифицированное, чтобы проиллюстрировать использование FancyBox.

Использование выше разметки вместе с ниже Java-скрипта:

$(document).ready(function() { 
    $("a#thumbnail_link").fancybox(); 
})'

Не забудьте включить JQuery и FancyBox JS файлы.

источник

2010-09-17 09:42:30 VinayC

Я не уверен, что ссылка на полноразмерное изображение - это то, что он после ... – TimS

@TimS, выше код покажет полноразмерное изображение в новом окне при нажатии на миниатюру. Если он не хочет показывать полное изображение в слое внутри страницы, я бы предпочел бы над надписями, поскольку он не зависит от java-скрипта. – VinayC

Вопрос под названием «show image onclick javascript»: D – TimS

Я думаю, вам нужно сначала показать эскизы, а по щелчку вам нужно открыть исходные изображения в новом всплывающем окне. Вы можете сделать это, используя код, как указано ниже -

<SCRIPT LANGUAGE="JavaScript"> 
function openImage(imageFile){ 
windowOpen=window.open("",'Open','toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=1,width=420,height=420'); 
windowOpen.document.writeln("<head><title>Image</title></head><body>"); 
windowOpen.document.writeln('<img src=http://www.mysite.com/' + imageFile + 'border=1>'); 
windowOpen.document.writeln("</body></html>"); 
} 
</SCRIPT>

Затем вызывается метод() во время OnClick миниатюрного изображения этого openImage. Вы можете передать параметр imageFile в качестве функции.

источник

2010-09-17 09:42:52

Будет работать, но всплывающее окно не требуется, так как изображение может быть загружено в оверлейный div. – TimS

Привет, я показываю изображения в fancybox, который является javascript. www.fancybox.сеть. – Yustme

@Yustme - Не знаю, что такое чувак fancybox, но код в моем ответе - это метод javascript. Не уверен, как вы будете использовать этот метод в жестком fancybox. –

Похоже, что у вас есть оба изображения, на которые ссылается ваш HTML, хотя он скрыт от просмотра, поэтому браузер запрашивает оба. Что вам нужно сделать, так это использовать JavaScript для создания полного размера тега <img> с нуля, а затем добавить его в соответствующее место в HTML. Затем браузер загрузит полноразмерное изображение после его добавления в DOM.

источник

2010-09-17 09:44:54 TimS

Но будет ли он добавлен после события щелчка мыши? Потому что сейчас его загрузка обоих. И это не нужно. – Yustme

Точно, чтобы HTML-код большего размера отображался на клике мыши, не просто спрячьте его в HTML-загрузке страницы, а затем используйте JS, чтобы показать его позже, так как браузер все равно его загрузит. – TimS

Кроме того, просто мысль, вы пробовали использовать jQuery? Он идеально подходит для того, что вы делаете, и вы найдете целую загрузку плагинов, которые отображают изображение полного размера в красивой коробке с помощью кнопки close/next/previous. Просто Google jQuery Image Gallery. – TimS

Для фантазии поле, все, что вам нужно сделать, это

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

С уважением, Энди.

источник

2010-09-17 10:24:16 cherhan

HTML код:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title> - jsFiddle demo</title> 
    <script type='text/javascript' src='http://identify.site88.net/showimage.js'></script> 
    <style type='text/css'> 
     #test{ 
     display:none 
     } 
     #blackout { 
     width:50%; 
     position:absolute; 
     background-color: rgba(0, 0, 0, .5); 
     display: none; 
     z-index: 20; 
     } 
     .modal { 
     margin: auto; 
     } 
     #close { 
     color: white; 
     font-weight: bold; 
     cursor: pointer; 
     } 
    </style> 
    <script type='text/javascript'> 
    $(window).load(function(){ 
    $('img').click(function() { 
     var img = $(this).clone().addClass('modal').appendTo($('#blackout')); 
     $('#blackout > #close').click(function() { 
      $('#blackout').fadeOut(function() { 
       img.remove(); 
      }); 
     }); 
     $('#blackout').fadeIn(); 
    }); 
    }); 

    $(window).load(function(){ 
    $('#close2').hide(); 
    $('span').click(function() { 
     $('#test').show(); 
     $('#close2').show(); 
     $('#txtsp').hide(); 
     $('#blackout2 > #close2').click(function() { 
      $('#blackout2').fadeOut(function() { 
       $('#test').hide(); 
       $('#txtsp').show(); 
       $(this).css({ 
        "text-decoration": '' 
       }); 
      }); 
     }); 
     $('#blackout2').fadeIn(); 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="blackout2"><div id="close2" >Close</div></div><img id="test" src="http://data.vietinfo.eu/News//2012/10/16/179281/1350402084.7404.jpg"/> <span id="txtsp">Click here to show image</span> 
    <br /><br /> 
    <div id="blackout"><div id="close">Close</div></div><div style="width: 50px; height: 50px;"><img width="100%" src="http://dantri.vcmedia.vn/Uploaded/2009/06/02/hh02066.jpg" /></div> 
</body> 
</html>

Вы можете заменить пролет тегов вашего изображения пересчитаны на стороне сервера.

источник

2013-12-02 19:18:34 woondark

ответ

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