Для размещения фотогалереи на странице необходимо:

1. Подготовить фотографии больших размеров в едином стиле и одного размера на персональном компьютере. В имени файла можно использовать только цифры и латинские буквы без пробелов и спецсимволов.
2. Разместить файлы в «Документы» (см. «Использование загруженных файлов»). Для каждой фотогалереи желательно создавать отдельную папку. Получение ссылки на изображение описано в разделе «Использование загруженных файлов».
3. Разместить на странице код:

   
   <section class="related jqoverlay">
   
   <div class="lightBox">
   <article>
   <figure>
   <a class="vlightbox3" href="ссылка на изображение1"><img src="ссылка на изображение1" alt="Открыть фотогалерею" width="400"><div class="vlb_zoom" style="position: absolute; display: none;"></div></a>
   </figure>
   </article>
   </div>
   
   <div class="lightBox" style="display:none;">
   <article>
   <figure>
   <a class="vlightbox3" href="ссылка на изображение2"><div class="vlb_zoom" style="position: absolute; display: none;"></div></a>
   </figure>
   </article>
   </div>
   
   <div class="lightBox" style="display:none;">
   <article>
   <figure>
   <a class="vlightbox3" href="ссылка на изображение3"><div class="vlb_zoom" style="position: absolute; display: none;"></div></a>
   </figure>
   </article>
   </div>
   
   </section>
   

   
   

   Пример и внешний вид:

   <section class="related jqoverlay">
   
   <div class="lightBox">
   <article>
   <figure>
   <a class="vlightbox3" href="http://web.tpu.ru/webcenter/content/conn/WebCenterSpaces-ucm/path/WebCenterSpaces-Root/webportal/img/photogallery/01.jpg"><img src="http://web.tpu.ru/webcenter/content/conn/WebCenterSpaces-ucm/path/WebCenterSpaces-Root/webportal/img/photogallery/01.jpg" alt="Открыть фотогалерею" width="400"><div class="vlb_zoom" style="position: absolute; display: none;"></div></a>
   </figure>
   </article>
   </div>
   
   <div class="lightBox" style="display:none;">
   <article>
   <figure>
   <a class="vlightbox3" href="http://web.tpu.ru/webcenter/content/conn/WebCenterSpaces-ucm/path/WebCenterSpaces-Root/webportal/img/photogallery/02.jpg"><div class="vlb_zoom" style="position: absolute; display: none;"></div></a>
   </figure>
   </article>
   </div>
   
   <div class="lightBox" style="display:none;">
   <article>
   <figure>
   <a class="vlightbox3" href="http://web.tpu.ru/webcenter/content/conn/WebCenterSpaces-ucm/path/WebCenterSpaces-Root/webportal/img/photogallery/03.jpg"><div class="vlb_zoom" style="position: absolute; display: none;"></div></a>
   </figure>
   </article>
   </div>
   
   </section>