показать изображение на клике javascript - PullRequest
Новая
       14

показать изображение на клике javascript

1 голос
/ 17 сентября 2010

Как я могу загрузить исходное изображение, когда нажата версия эскиза изображения? Я использую ASP.NET в сочетании с JavaScript.

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

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

Как мне это сделать?

Ответы [ 5 ]

3 голосов
/ 17 сентября 2010

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>

Редактировать: модифицировано для иллюстрации использования FancyBox.

Используйте указанную выше разметку вместе с нижеследующим java-скриптом: 

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

Не забудьте включить jsquery и fancybox js файлы.

0 голосов
/ 02 декабря 2013

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>

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

0 голосов
/ 17 сентября 2010

Для подарочной коробки все, что вам нужно сделать, это 

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

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

0 голосов
/ 17 сентября 2010

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

0 голосов
/ 17 сентября 2010

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

<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>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...