Пример #1
0
    /**
     * register asset
     */
    protected function register()
    {
        $view = $this->getView();
        PhotoswipeAsset::register($view);
        /* data */
        $items = [];
        foreach ($this->images as $image) {
            $items[] = ['src' => $image['src'], 'w' => $image['width'], 'h' => $image['height'], 'title' => !empty($image['alt']) ? $image['alt'] : null];
        }
        $items = json_encode($items);
        /* options */
        $clientOptions = json_encode($this->clientOptions);
        $selector = $this->selector;
        $js = <<<EOB
\$("{$selector}").css("cursor", "pointer");
var pswpElement = document.querySelectorAll('.pswp')[0];
\$(document).on("click", "{$selector}", function(e){
    e.preventDefault();    
    var index = \$(this).index("{$selector}");    
    var options = {
        index: index,
        bgOpacity: 0.7,
        showHideOpacity: true
    };  
    \$.merge(options, {$clientOptions});
    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, {$items}, options);
    gallery.init();    
});
EOB;
        $view->registerJs($js);
    }
Пример #2
0
    /**
     * register asset
     */
    protected function register()
    {
        $view = $this->getView();
        PhotoswipeAsset::register($view);
        /* data */
        $items = [];
        foreach ($this->items as $item) {
            list($w, $h) = explode("x", $item['size']);
            $items[] = ['src' => $item['image'], 'w' => $w, 'h' => $h, 'title' => !empty($item['caption']) ? $item['caption'] : null];
        }
        $items = json_encode($items);
        $clientOptions = json_encode($this->clientOptions);
        $js = <<<EOB
var pswpElement = document.querySelectorAll('.pswp')[0];        
\$(document).on("click", ".gallery-image", function(e){
    e.preventDefault();    
    var index = \$(this).data("index");
    var options = {
        index: index,
        bgOpacity: 0.7,
        showHideOpacity: true
    };  
    \$.merge(options, {$clientOptions});
    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, {$items}, options);
    gallery.init();    
});
EOB;
        $view->registerJs($js);
    }