/** * 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); }
/** * 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); }