Использование jQuery и Lightbox 2 в HostCMS

Модератор 17 мая 2010 г.

В дистрибутивах с версии 5.9.7 поставляется jQuery и Lightbox 2, размещены в /hostcmsfiles/jquery/
Эта же информация войдет в обновление 5.9.8, сейчас получить содержимое этой директории можно из редакции "Халява".

В макете подключение выполняется следующим образом:

<script type="text/javascript" src="/hostcmsfiles/jquery/jquery.js"></script>

   
   <script type="text/javascript" src="/hostcmsfiles/jquery/lightbox/js/jquery.lightbox.js"></script>
    <link rel="stylesheet" type="text/css" href="/hostcmsfiles/jquery/lightbox/css/jquery.lightbox.css" media="screen" />

   <script type="text/javascript">
   $(function() {
      $('#gallery a:has(img)').lightBox();
   });
   </script>

В CSS макета вносится следующий фрагмент:

/* jQuery lightbox */
#gallery { clear: both; }
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img { /*border: 5px solid #3e3e3e; border-width: 5px 5px 20px;*/ }
#gallery ul a:hover img { /*border: 5px solid #fff; border-width: 5px 5px 20px; color: #fff;*/ }
#gallery ul a:hover { color: #fff; }
/* /jQuery lightbox */

Для использования в системе нужно в XSL-шаблоне картинки со ссылками вложить в

и убрать свойство onclick у <a>, например:

<xsl:if test="item_image!=''">
                  <div id="gallery">
                     <a href="{item_image}" target="_blank">
                        <img align="left" src="{item_small_image}" class="news_img"/>
                     </a>
                  </div>
               </xsl:if>

Аналогично поступают с товарами:

<xsl:if test="small_image != ''">
                     <div id="gallery" style="float: left; width: {small_image/@width}px; margin: 0px 10px 10px 0px; color: #aaaaaa;">
                        <a href="{image}" target="_blank">
                           <img src="{small_image}" style="border: 1px solid #DADADA; margin: 0px 5px 5px 0px"/>
                        </a>
                     </div>
                  </xsl:if>

На демо-сайте есть обновленные XSL-шаблоны. http://www.hostcms.ru/hostcms/demo/