Показать сообщение отдельно
  #8 (permalink)  
Старый 20.09.2016, 10:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Dolphin,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <script>
$(function() {
    $("#big img").on("load", function() {
        $(this).fadeIn(1000)
    });
    $("#small a").on("click", function(event) {
        event.preventDefault()
        $("#big img").hide().prop("src", $(this).attr("href"));

    })
});
  </script>
</head>

<body>  <div id="big"><img src="" alt=""></div>
<div id="small">
<a href="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"><img src="images/gal/1_mini.jpg" alt="Миниатюра 1" /></a>
<a href="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"><img src="images/gal/2_mini.jpg" alt="Миниатюра 2" /></a>
<a href="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"><img src="images/gal/3_mini.jpg" alt="Миниатюра 3" /></a>
<a href="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"><img src="images/gal/4_mini.jpg" alt="Миниатюра 4" /></a>
</div>


</body>
</html>
Ответить с цитированием