Нужно создать галерею картинок, в которой при нажатии на маленькую картинку она открывалась в увеличенном виде в новом модальном окне.

• инструмент (плагин) для отображения изображений в HTML - Fancybox
• бесплатную библиотеку jQuery, которая состоит из повседневных функций JavaScript-кодов.

• Заходим на Fancybox
  или
  code.google.com/p/fancybox/
• Нажимем на download и скачиваем архив.
• Копируем на свой ПК из скаченного архива папку "fancybox"
  Официальные сайты: fancybox и jQuery

• Подключаем внешнюю библиотеку JQuery-mini с google к сайту:
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  
  
• Загружаем функции переходов и прокрутки картинок из fancybox:
  <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  <script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<script type="text/javascript"> $(document).ready(function(){ $("a.photo").fancybox(); }); </script>

• Создаем галерею из больших и маленьких картинок (в нашем примере 4 картинки.jpg).
  
• Для каждой маленькой картинки указываем ссылку на большую картинку:
  <a rel="gallery" class="photo" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

.gallery img{ /* внешние отступы картинок */ margin:5px; /* рамка картинок */ border:2px solid #ffffff; } a.photo:hover img{ /* изменение цвета рамки при наведении на картинку */ border:2px solid #7e5a25; }

Галерея

Талисманы Сочи-2014