WordPress: Photoswipe-lightbox integration med html-mockup i WP (uden at installere plugin)

Her vil jeg kort vise hvordan du kan indarbejde en lightbox funktion i dit galleri ved hjælp af PhotoSwipe v5.3.3.

Photoswipe er et open-source JavaScript-baseret galleri med billedzoomning og består af tre dele:

1. Core (photoswipe.esm.js).
2. Lightbox (photoswipe-lightbox.esm.js) – indlæser Core og vælger, hvornår PhotoSwipe skal åbnes. Dens filstørrelse er betydeligt mindre. Den indlæser også det første billede (parallelt med Core).
3. CSS (photoswipe.css) – en enkelt fil, der styrer al styling. Der er ingen eksterne aktiver til ikoner – de er alle dynamisk genereret via JS og meget små

JS-filerne er adskilt, så du kan dynamisk indlæse Core kun når brugeren har brug for det, hvilket reducerer størrelsen.

Den anbefalede måde at bruge PhotoSwipe på er at bruge et enkelt <script type=”module”></script>. Jeg inkluderer kodestykket i html (fx single-product.php) og som vist henter jeg js og css filer fra et CDN netværk, så disse behøver ikke uploades på serveren. Et script-tag med attributten type=”module” angiver, at det skal betragtes som et Javascript-modul.

  import PhotoSwipeLightbox from 'https://unpkg.com/photoswipe/dist/photoswipe-lightbox.esm.js';
    const lightbox = new PhotoSwipeLightbox({
        gallery: '.gallery',
        children: 'a',
        bgOpacity: 0.5,
        showHideAnimationType: 'zoom',
        pswpModule: () => import('https://unpkg.com/photoswipe'),
    });
    lightbox.init();

CSS filen henter jeg via wp_enqueue_scripts (og kun på post type “product” i dette eksempel).

add_action( 'wp_enqueue_scripts', 'register_styles', 10);
function register_styles() {
	if (is_singular('product')) {
		wp_enqueue_style('ps_css', 'https://unpkg.com/photoswipe@5.2.2/dist/photoswipe.css',[], 1, 'all' );	
    }
}

Html mark-up ser sådan cirka sådan her ud

$images = []; //billedarray med alle dine billeder
$gallery = '<div class="gallery">';
foreach ($images as $img){ 
    $image = getImgWithSizes($img, squareimg()); // my custom image function, som outputter forskellige billedstørrelser af billedet i en array
$gallery .= '<a href="'.$image['org']['0'].'" target="_blank" rel="noopener" data-pswp-width="'.$image['org']['1'].'" data-pswp-height="'.$image['org']['2'].'" data-index="0">
<img src="'.$image['img']['url'].'" alt="'.$image['alt'].'" width="'.$image['img']['width'].'" height="'.$image['img']['height'].'" /> </a>'; 
}
$gallery .= '</div>';
echo $gallery;