# Примеры

# Lightgallery



# Fancybox

Демо сайт [https://demog3x.ivan345.com/](https://demog3x.ivan345.com/), примеры с Fancybox

# pdoResources

Пример использования pdoResources, выводит ресурсы MODX, а в качестве изображения используется 1 изображения из галереи.

```
[[!pdoResources?
    
    
    &tpl=`ListRowTpl`
    &includeContent=`1`
    &leftJoin=`{
        "Image": {
            "class": "Gallery3x\\Model\\Gallery3xFile",
            "on": "modResource.id = Image.resource_id AND Image.position = 0 AND Image.active = 1"
        }
    }`
    &select=`{
        "modResource": "*",
        "Image": "Image.id as image_id, Image.alt as image_alt"
    }`
]]
```

#### Чанк ListRowTpl  


```
{* Вызываем сниппет g3xGetImage, передавая ему ID картинки *}<br></br>{set $image_url = $_pls['image_id'] | g3xGetImage : 'small'}<br></br>{set $uri = $_modx->makeUrl($_pls.id)}<br></br><br></br><div class="catalog-item"><br></br>    {$image_url}<br></br>    {if $image_url}<br></br>        <a href="{$uri = $_modx->makeUrl($_pls.id)}"><br></br>            <img src="{$image_url}" alt="{$_pls['image_alt'] ?: $_pls['pagetitle']}"><br></br>        </a><br></br>    {else}<br></br>        <a href="{$_pls.uri}"><br></br>            <img src="/assets/images/no-image.png" alt="{$_pls.pagetitle}"><br></br>        </a><br></br>    {/if}<br></br><br></br>    <h3><a href="{$uri}">{$_pls.pagetitle}</a></h3><br></br>    <p>{$_pls.introtext}</p><br></br></div>
```

# Интеграция с компонентом Collections

Вот как выводить превью первого изображения из галереи `Gallery3x` прямо в таблице дочерних ресурсов компонента **Collections**.

Это значительно упрощает навигацию и управление контентом, так как менеджер сразу видит, какая картинка относится к какому ресурсу.

#### Подключение JS-рендера в системных настройках

[![Screenshot_1.jpg](https://docs.ivan345.com/uploads/images/gallery/2025-09/scaled-1680-/ae8KVcEPj73BC9fA-screenshot-1.jpg)](https://docs.ivan345.com/uploads/images/gallery/2025-09/ae8KVcEPj73BC9fA-screenshot-1.jpg)

Теперь нужно "сказать" компоненту Collections, чтобы он загружал JS-файл.

1. Перейдите в **Настройки (⚙️) → Системные настройки**.
2. В фильтре выберите пространство имен **collections**.
3. Найдите ключ **`collections.user_js`** (Пользовательский JS-файл).
4. Впишите в него путь к файлу: `/assets/components/gallery3x/js/mgr/misc/renderers.js`

#### Настройка колонки в Collections

Это финальный шаг, где мы связываем всё вместе.

1. Перейдите на ресурс-контейнер и откройте настройки вида Collections (вкладка "Дочерние ресурсы" → ⚙️).
2. Откройте на редактирование или создайте новую колонку со следующими параметрами:
    
    
    - **Заголовок:** `Превью`
    - **Название:** `g3xCollectionsThumbnail`
    - **Рендерер:** `Gallery3x.renderer.image`
    - **Сниппет-рендер:** `g3xCollectionsThumbnail`
    - #### `<a href="https://docs.ivan345.com/uploads/images/gallery/2025-09/RXODGq3eZw1gYZ7K-screenshot-2.jpg" rel="noopener" target="_blank"><img alt="Screenshot_2.jpg" src="https://docs.ivan345.com/uploads/images/gallery/2025-09/scaled-1680-/RXODGq3eZw1gYZ7K-screenshot-2.jpg"></img></a>`  
          
          
        Результат:  
          
        [![Screenshot_3.jpg](https://docs.ivan345.com/uploads/images/gallery/2025-09/scaled-1680-/X02TCQqiUpjGEYPC-screenshot-3.jpg)](https://docs.ivan345.com/uploads/images/gallery/2025-09/X02TCQqiUpjGEYPC-screenshot-3.jpg)