Swiper.jsでフォトギャラリーを作る

[myphp file=’gallery_swipe’]

今度は、Swiper.jsを使って、立体的なキューブが回転するような効果のあるフォトギャラリーを作成してみます。「effect: ‘cube’,」をscriptに追加するだけでOKです。

Swiper.jsの導入については以下の記事を参考にしてください。

FacebookのFeedとSwiper.jsを使ってタイムライン表示をアレンジ

ギャラリーに表示させる写真は、WordPressのメディアライブラリの中から、タイトルが部分一致するものを選んでくるようにしてみました。

上記のギャラリーは、インドに旅行した時の写真なのですが、画像をメディアライブラリにアップロードする際にタイトルに「indo」という言葉を入れておき、「preg_match」関数でそれを拾ってくるようにしています。

<?php
$args = array(
        'post_type'      => 'attachment',
        'numberposts'    => -1,
        'post_status'    => null,
        'post_mime_type' => 'image'
        );

$attachments = get_posts( $args );

if ( $attachments ) {
    foreach ( $attachments as $attachment ) :
        if ( 1 === preg_match( "/【一致させたいワード】/u" , $attachment->post_title ) ) {
            echo '<div class="swiper-slide">';
            echo '<a href="' . wp_get_attachment_url( $attachment->ID ) . '" target="_blank">';
            echo '<div style="height:300px; background:url(' . wp_get_attachment_url( $attachment->ID ) . ') no-repeat center / cover;"></div>';
            echo '</a>';
            echo '</div>';
        }
    endforeach;
}
wp_reset_postdata();
?>