1

Wordpress で Photoswipe を使用しようとしています (プラグインではありません)。私は過去12時間それに取り組んできましたが、それを機能させることができませんでした. 詳細に入ることができますが、現時点では、根本的な解決策が必要だと思います. 私の質問をもう一度言いますと、Wordpress で Photoswipe をどのように使用しますか?

誰かがこれを行った経験がある場合、またはチュートリアルを知っている場合は、お知らせください。

ありがとう

4

1 に答える 1

0

次のように単純なはずです...

これを<head>あなたのテーマのheader.phpに入れます

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/klass.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/code.photoswipe-3.0.4.min.js"></script>

<head>...これも上記の下に追加します

<script type="text/javascript">
    $(document).ready(function(){
        var myPhotoSwipe = $("#gallery a").photoSwipe({
            enableMouseWheel: false,
            enableKeyboard: false

            // add configuration options here

        });
    });
</script>

これらの JavaScript ファイルをテーマ フォルダに置くことを忘れないでください。ご覧のとおり、テーマに「js」というサブフォルダーを配置しました

投稿の画像とリンクを使用して、HTML モードで投稿にギャラリーを作成し、以下のように順序付けされていないリストにラップするだけです。

順序なしリストの ID がスクリプトの varmyPhotoSwipe = $("#gallery a").photoSwipe({部分と一致していることを確認してください。

<ul id="gallery">
    <li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
    <li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
    <li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
    <li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
    <li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
    <li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
</ul>


スクリプトは頭の中に入れる必要はありませんが、終了</body>タグの前に入れることができます。

理論的には、これで何とかなるはずです。次に、他の場所でスタイルを設定または構築できます。

于 2012-04-17T18:49:15.750 に答える