Прикрутим lightbox к магазину?

24 октября 2008 г.

Многие наверно замечали на сайтах - кликаешь по маленькой картинке, страничка затуманивается, и с красивым анимированным эффектом выводится большая картинка. Причем без перегрузки страницы и в том же окне.
Вот здесь уже задавались вопросом на эту тему.
Однако, lightbox можно прикрутить и к магазину. Действия произвести один раз, а работать будет безотказно и без вашего участия. Если добавили картинку - она с должным эффектом и выведется.
шаг первый качаем http://www.lokeshdhakar.com/projects/lightbox2/#download и заливаем к себе в папочку с пользовательским стилями (у меня sait прошу учесть при реализации у себя), затем - второй шаг - в макете до тега body вставляем строчки

Желательно после hostcms-вских скриптов, ибо они важнее
Тоже со стилями

А теперь самое интересное прикручиваем к магазину
Идем в XSL-шаблоны → Интернет-магазин и редактируем МагазинТовар (предварительно сделав его копию). Ищем:

<xsl:if test="small_image != ''">
            <div style="float: left; width: {small_image/@width}px; margin: 0px 10px 10px 0px; color: #aaaaaa;">
               <a href="{image}" target="blank_" onclick="ShowImgWindow('{name}','{image}', {image/@width}, {image/@height}); return false;">
                  <img src="{small_image}" style="border: 1px solid #DADADA; margin: 0px 5px 5px 0px"/>
               </a>
               <br/>
               <a href="{image}" target="blank_" onclick="ShowImgWindow('{name}','{image}', {image/@width}, {image/@height}); return false;">
               <img src="/hostcmsfiles/images/zoom.gif" alt="Увеличить" />
               </a>
               </div>
         </xsl:if>

И заменяем на

<xsl:if test="small_image != ''">
<div style="float: left; width: {small_image/@width}px; margin: 0px 10px 10px 0px; color: #aaaaaa;">
<a href="{image}" rel="lightbox" title="{name}">
<img src="{small_image}" title="{name}" width="{small_image/@width}" height="{small_image/@height}"/>
</a>
<br/>
<a href="{image}" rel="lightbox" title="{name}">
<img src="/hostcmsfiles/images/zoom.gif" alt="Увеличить" />
</a>
</div>
</xsl:if>

Думаете это все? Ну, да почти все. Если вы не используете модификации. А потому ищем далее:

<xsl:if test="small_image != ''">
<a href="{/shop/path}{fullpath}{path}/">
<img src="{small_image}" align="left" style="border: 1px solid #000000; margin: 0px 5px 5px 0px"/>
</a>
</xsl:if>

И заменяем на

<xsl:if test="small_image != ''">
<a href="{/shop/path}{fullpath}{path}/" rel="lightbox" title="{name}">
<img src="{small_image}" align="left" style="border: 1px solid #000000; margin: 0px 5px 5px 0px"/>
</a>
</xsl:if>

Сохраняем (Применяем) идем в магазин и инжоемся!
P.S.Прошу прощения за нудность и много бувов.