jQuery Wookmarkの使い方について

  • 9-taro

    (@9-taro)


    11年、 10ヶ月前

    超初心者の者です。
    Wookmarkというpinterest風の動きをするjQueryを自分の固定ページに貼付けたいのですが、方法がわかりません。jsファイルやcssファイル、必要なファイルをアップしリンクをしましたが、htmlコードをそのままペースとしても当然動かないのですが、どの部分を貼付けていいのかわかりません。jQuery自体の使い方がわららず、全くの土素人の質問で恐縮ですが、教えていただければ幸いです。

    【Wookmark-jQuery】
    https://github.com/GBKS/Wookmark-jQuery

    ちなみにhtmlコードの内容は以下のようなものです。

    <!doctype html>
    <!–[if lt IE 7]> <html class=”no-js ie6 oldie” lang=”en”> <![endif]–>
    <!–[if IE 7]> <html class=”no-js ie7 oldie” lang=”en”> <![endif]–>
    <!–[if IE 8]> <html class=”no-js ie8 oldie” lang=”en”> <![endif]–>
    <!–[if gt IE 8]><!–> <html class=”no-js” lang=”en”> <!–<![endif]–>
    <head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>

    <title>jQuery Wookmark Plug-in Example</title>
    <meta name=”description” content=”An very basic example of how to use the Wookmark jQuery plug-in.”>
    <meta name=”author” content=”Christoph Ono, Sebastian Helzle”>

    <meta name=”viewport” content=”width=device-width,initial-scale=1″>

    <!– CSS Reset –>
    <link rel=”stylesheet” href=”../css/reset.css”>

    <!– Global CSS for the page and tiles –>
    <link rel=”stylesheet” href=”../css/main.css”>

    <!– Specific CSS for the tiles –>
    <link rel=”stylesheet” href=”css/style.css”>

    </head>

    <body>

    <div id=”container”>
    <header>
    <h1>jQuery Wookmark Plug-in Example</h1>
    <p>Click the words below to filter the grid. Grid items that match at the selected filter will remain visible.</p>
    </header>

    <!–
    These are our filter options. The “data-filter” classes are used to identify which
    grid items to show.
    –>

    <ol id=”filters”>
    <li data-filter=”amsterdam”>Amsterdam
    <li data-filter=”tokyo”>Tokyo
    <li data-filter=”london”>London
    <li data-filter=”paris”>Paris
    <li data-filter=”berlin”>Berlin
    <li data-filter=”sport”>Sport
    <li data-filter=”fashion”>Fashion
    <li data-filter=”video”>Video
    <li data-filter=”art”>Art

    <div id=”main” role=”main”>

    <ul id=”tiles”>
    <!–
    These are our grid items. Notice how each one has classes assigned that
    are used for filtering. The classes match the “data-filter” properties above.
    –>
    <li data-filter-class='[“london”, “art”]’>
    <img src=”../sample-images/image_1.jpg” height=”283″ width=”200″>
    <p>London Art</p>

    <li data-filter-class='[“berlin”, “art”]’>
    <img src=”../sample-images/image_2.jpg” height=”300″ width=”200″>
    <p>Berlin Art</p>

    <li data-filter-class='[“berlin”, “video”]’>
    <img src=”../sample-images/image_3.jpg” height=”252″ width=”200″>
    <p>Berlin Video</p>

    <li data-filter-class='[“tokyo”, “fashion”]’>
    <img src=”../sample-images/image_4.jpg” height=”158″ width=”200″>
    <p>Tokyo Fashion</p>

    <li data-filter-class='[“berlin”, “art”]’>
    <img src=”../sample-images/image_5.jpg” height=”300″ width=”200″>
    <p>Berlin Art</p>

    <li data-filter-class='[“tokyo”, “fashion”]’>
    <img src=”../sample-images/image_6.jpg” height=”297″ width=”200″>
    <p>Tokyo Fashion</p>

    <li data-filter-class='[“london”, “art”]’>
    <img src=”../sample-images/image_7.jpg” height=”200″ width=”200″>
    <p>London Art</p>

    <li data-filter-class='[“tokyo”, “video”]’>
    <img src=”../sample-images/image_8.jpg” height=”200″ width=”200″>
    <p>Tokyo Video</p>

    <li data-filter-class='[“tokyo”, “art”]’>
    <img src=”../sample-images/image_9.jpg” height=”398″ width=”200″>
    <p>Tokyo Art</p>

    <li data-filter-class='[“berlin”, “fashion”]’>
    <img src=”../sample-images/image_10.jpg” height=”267″ width=”200″>
    <p>Berlin Fashion</p>

    <li data-filter-class='[“amsterdam”, “art”]’>
    <img src=”../sample-images/image_1.jpg” height=”283″ width=”200″>
    <p>Amsterdam Art</p>

    <li data-filter-class='[“paris”, “video”]’>
    <img src=”../sample-images/image_2.jpg” height=”300″ width=”200″>
    <p>Paris Video</p>

    <li data-filter-class='[“london”, “video”]’>
    <img src=”../sample-images/image_3.jpg” height=”252″ width=”200″>
    <p>London Video</p>

    <li data-filter-class='[“london”, “video”]’>
    <img src=”../sample-images/image_4.jpg” height=”158″ width=”200″>
    <p>London Video</p>

    <li data-filter-class='[“amsterdam”,” video”]’>
    <img src=”../sample-images/image_5.jpg” height=”300″ width=”200″>
    <p>Amsterdam Video</p>

    <li data-filter-class='[“tokyo”, “fashion”]’>
    <img src=”../sample-images/image_6.jpg” height=”297″ width=”200″>
    <p>Tokyo Fashion</p>

    <li data-filter-class='[“tokyo”, “sport”]’>
    <img src=”../sample-images/image_7.jpg” height=”200″ width=”200″>
    <p>Tokyo Sport</p>

    <li data-filter-class='[“berlin”, “video”]’>
    <img src=”../sample-images/image_8.jpg” height=”200″ width=”200″>
    <p>Berlin Video</p>

    <li data-filter-class='[“amsterdam”, “fashion”]’>
    <img src=”../sample-images/image_9.jpg” height=”398″ width=”200″>
    <p>Amsterdam Fashion</p>

    <li data-filter-class='[“berlin”, “sport”]’>
    <img src=”../sample-images/image_10.jpg” height=”267″ width=”200″>
    <p>Berlin Sport</p>

    <li data-filter-class='[“paris”, “video”]’>
    <img src=”../sample-images/image_1.jpg” height=”283″ width=”200″>
    <p>Paris Video</p>

    <li data-filter-class='[“tokyo”, “sport”]’>
    <img src=”../sample-images/image_2.jpg” height=”300″ width=”200″>
    <p>Tokyo Sport</p>

    <li data-filter-class='[“amsterdam”, “art”]’>
    <img src=”../sample-images/image_3.jpg” height=”252″ width=”200″>
    <p>Amsterdam Art</p>

    <li data-filter-class='[“berlin”, “sport”]’>
    <img src=”../sample-images/image_4.jpg” height=”158″ width=”200″>
    <p>Berlin Sport</p>

    <li data-filter-class='[“paris”, “art”]’>
    <img src=”../sample-images/image_5.jpg” height=”300″ width=”200″>
    <p>Paris Art</p>

    <li data-filter-class='[“berlin”, “art”]’>
    <img src=”../sample-images/image_6.jpg” height=”297″ width=”200″>
    <p>Berlin Art</p>

    <li data-filter-class='[“london”, “art”]’>
    <img src=”../sample-images/image_7.jpg” height=”200″ width=”200″>
    <p>London Art</p>

    <li data-filter-class='[“london”, “video”]’>
    <img src=”../sample-images/image_8.jpg” height=”200″ width=”200″>
    <p>London Video</p>

    <li data-filter-class='[“london”, “video”]’>
    <img src=”../sample-images/image_9.jpg” height=”398″ width=”200″>
    <p>London Video</p>

    <li data-filter-class='[“paris”, “video”]’>
    <img src=”../sample-images/image_10.jpg” height=”267″ width=”200″>
    <p>Paris Video</p>

    <!– End of grid blocks –>

    </div>
    </div>

    <!– include jQuery –>
    <script src=”../libs/jquery.min.js”></script>

    <!– Include the imagesLoaded plug-in –>
    <script src=”../libs/jquery.imagesloaded.js”></script>

    <!– Include the plug-in –>
    <script src=”../jquery.wookmark.js”></script>

    <!– Once the page is loaded, initalize the plug-in. –>
    <script type=”text/javascript”>
    (function ($){
    $(‘#tiles’).imagesLoaded(function() {
    // Prepare layout options.
    var options = {
    autoResize: true, // This will auto-update the layout when the browser window is resized.
    container: $(‘#main’), // Optional, used for some extra CSS styling
    offset: 2, // Optional, the distance between grid items
    itemWidth: 210, // Optional, the width of a grid item
    fillEmptySpace: true // Optional, fill the bottom of each column with widths of flexible height
    };

    // Get a reference to your grid items.
    var handler = $(‘#tiles li’),
    filters = $(‘#filters li’);

    // Call the layout function.
    handler.wookmark(options);

    /**
    * When a filter is clicked, toggle it’s active state and refresh.
    */
    var onClickFilter = function(event) {
    var item = $(event.currentTarget),
    activeFilters = [];

    if (!item.hasClass(‘active’)) {
    filters.removeClass(‘active’);
    }
    item.toggleClass(‘active’);

    // Filter by the currently selected filter
    if (item.hasClass(‘active’)) {
    activeFilters.push(item.data(‘filter’));
    }

    handler.wookmarkInstance.filter(activeFilters);
    }

    // Capture filter click events.
    filters.click(onClickFilter);
    });
    })(jQuery);
    </script>

    </body>
    </html>

トピック「jQuery Wookmarkの使い方について」には新たに返信することはできません。