jQuery

【jQuery】360度イメージアニメーター/スライダーjQueryPeanut360

February 10, 2018
jquerypeanut360

jQueryPeanut360は360度イメージアニメーター/スライダーを作成するためのjQueryプラグインです。

jquerypeanut360

Usage

Bootstrap 4クラスが使用されています。

<!-- Set all images as hidden with a class (d-none in this example)
     except the one you want to start with -->
<div id="demo360" class="col-12">
  <!-- Add the class p360slide to your images -->
  <img src="1.jpg" class="p360slide img-fluid d-none">
  <a download href="2.jpg"><!-- We don't care about other tags, they just work -->
    <img src="2.jpg" class="p360slide img-fluid d-none">
  </a>
  <img src="3.jpg" class="p360slide img-fluid d-none">
</div>

<div class="col-12 text-center">
  <input id="prev_button" type="button" class="btn btn-default" value="&laquo;">
  <input id="start_button" type="button" class="btn btn-primary" value="Start">
  <input id="start_reverse_button" type="button" class="btn btn-primary" value="Start (reverse)">
  <input id="stop_button" type="button" class="btn btn-warning" value="Stop">
  <input id="next_button" type="button" class="btn btn-default" value="&raquo;">
</div>

<script type="text/javascript" src="jquery.peanut360.js"></script>
<script type="text/javascript">
$(function() {
    // Initialize with no params if you use "d-none" as class for hiding
    $("#demo360").peanut360();

    // Initialize with params if needed
    $("#demo360").peanut360({
        hideclass : 'd-none',     // Change name of the class which hides elements
        interval  : 100           // Faster or slower animation (milliseconds)
    });

    // !! Bind buttons to actions //
    // Start animation
    $("#start_button").on("click", function() { $("#demo360").peanut360("animate") });
    // Start animation (in reverse)
    $("#start_reverse_button").on("click", function() { $("#demo360").peanut360("animate_reverse") });
    // Stop animation
    $("#stop_button").on("click", function() { $("#demo360").peanut360("animate_stop") });
    // Go to previous slide
    $("#prev_button").on("click", function() { $("#demo360").peanut360("showprevious") });
    // Go to next slide
    $("#next_button").on("click", function() { $("#demo360").peanut360("shownext") });

    // Just autostart it page loading if you wish
    // TODO: only do that when we're sure images are loaded
    $("#demo360").peanut360("animate");
})
</script>

MIT