Sys-Admin Forum

SharePoint - добавить модальные окна или привязываем fancyBox

Загружаем fancybox с офф. сайта:
http://fancyapps.com/fancybox/#license

Распаковываем, скаладываем в Layout папку:
c:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\fancybox

Добавляем в мастер страницу в раздел head:


<!-- FancyBox -->
    <link type="text/css" rel="stylesheet" href="/_layouts/15/fancybox/source/jquery.fancybox.css" />

<script src="/_layouts/15/fancybox/source/jquery.fancybox.pack.js" type="text/javascript">//<![CDATA[
        
    //]]></script>

    <script src="/_layouts/15/fancybox/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript">//<![CDATA[
        
    //]]></script>

    <script src="/_layouts/15/fancybox/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript">//<![CDATA[
        
    //]]></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".fancybox").fancybox();
        });
</script>
    <!-- FancyBox /End -->

Используем для картинок, примерно так:

<a class="fancybox" href="/PublishingImages/SitePages/Home/image.jpg"> 
  <img class="ms-rteImage-0 ms-rtePosition-1 ms-rteFontFace-3" alt="image.jpg" src="/PublishingImages/SitePages/Home/image.jpg" style="margin: 5px; width: 324px; height: 186px;"/>
</a>

где в теге a большое изображение, в теге img его эскиз…

Для галерей в тег а, добавляем rel, например:

<a class="fancybox" rel="gallery1" href="/PublishingImages/SitePages/Home/image.jpg">