How to implement a 360 degree rotate image with spritespin

1

Hi,

I’d really like to implement the spritespin jquery Plugin to my kirby site. But I’ve got some difficulties.
(http://spritespin.ginie.eu/)

The installation guide tells me to make the reference to jquery and spitespin scripts:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" type='text/javascript'></script>
<script src='https://unpkg.com/spritespin@x.x.x/release/spritespin.js' type='text/javascript'></script>

So I added this to “site/Snippets/footer.php” just above the body tag

<script src="https://unpkg.com/spritespin@4.0.11/release/spritespin.js" type="text/javascript">

I guess I don’t need the jquery script, because it’s already on the kirby site (am I right?)

Next step is to create the container for spritespin:

<div id='mySpriteSpin'></div>

So I did.

I put that in my panel as a “text section” in the position, where I want the rotating image to appear.

<div id="mySpriteSpin" class="spritespin-instance with-canvas" unselectable="on" 
style="user-select: none; position: relative; overflow: hidden; width: 371px; height: 252px;">
<div class="spritespin-stage" style="width: 100%; height: 100%; inset: 0px; position: absolute; overflow: hidden;"></div>
<canvas class="spritespin-canvas" width="371" height="252" style="width: 100%; height: 100%; inset: 0px; position: absolute; overflow: hidden;"></canvas>
</div>

Can I just put a div tag to a text section on the panel-Backend?

Next Step is to “initalize the plugin”

<script type='text/javascript'>
$("#mySpriteSpin").spritespin({
  // path to the source images.
  source: [
  "path/to/frame_001.jpg",
  "path/to/frame_002.jpg",
  "path/to/frame_003.jpg",
  "path/to/frame_004.jpg",
  "path/to/frame_005.jpg",
  "path/to/frame_006.jpg",
  "path/to/frame_007.jpg",
  "path/to/frame_008.jpg",
  "path/to/frame_009.jpg",
  "path/to/frame_010.jpg",
  ],
  width   : 480,  // width in pixels of the window/frame
  height  : 327,  // height in pixels of the window/frame
});
</script>

Here I struggle even more. I uploaded the images on my panel and put in the text section below my

tag this:

<script type='text/javascript'>
$("#mySpriteSpin").spritespin({
  // path to the source images.
  source: [
  "bett-1_0000.png",
  "bett-1_0001.png",
  "bett-1_0002.png",
  "bett-1_0003.png",
  "bett-1_0004.png",
  "bett-1_0005.png",
  "bett-1_0006.png",
  "bett-1_0007.png",
  "bett-1_0008.png",
  "bett-1_0009.png",
  ],
  width   : 371,  // width in pixels of the window/frame
  height  : 252,  // height in pixels of the window/frame
});
</script>

Nothing appears on the front-end.

Can anyone please help? Or is there someone to help me commercially?

Best, Thomas

2

If you are talking about the Kirby Kits (Starterkit, Plainkit, Demokit), then no, jQuery is not included in any of those.

A jQuery plugin depends on jQuery though, so you would have to load that first.

3

I use the very good theme “Zero” of Branko Matic, there’s in the footer.php already the link to a javascript file.

assets/js/jquery.min.js

Is that enough?

4

Sorry, different project. I use another theme in this project, but still, there’s already the link to a jquery script.

5

If you want to use HTML in a textarea field, you would have to wrap it in a div with an attribute `markdown=“1”, otherwise the HTML just gets printed on the frontend.

I think it would be much cleaner to use a custom Kirbytag or a placeholder that is then replaced with the snippet in a Kirbytext hook at render time.

Where did you put the initializing script tag? After jQuery and the library are loaded or before? What errors can you see in the browser console?

6

Unbenannt
Unbenannt1534×930 81.5 KB

I can just use the code button </>

And that’s where i put the initializing script tag, too.

I’m very sorry if that’s a Rookie mistake. I’m doing this the first time.

In the browser, I just see an empty div container

7

Ok, so you are using this script somewhere in the middle of your document, but you load jQuery in the footer, which will not work. You should see an error like $ is not defined in your browser console.

Another issue with this approach is that it is very likely that you will get unwanted characters in your script if you are not careful.

Also, if you pass the images like this, the script will not find them.

As I said above, the only useful way I see to make this work properly is a Kirbytag, where you pass the images as arguments.

But if you are not familiar with PHP and JS, you will probably have a hard time implementing this.

8

Thank you very much for your insights.

It’s not simple to find an agency with capacity.

Best,
Thomas

9

Art Directed pages could be a quick and dirty hack, to get around writing a kirby tag.

or

put the script tag in the footer, beneath Jquery

<script type='text/javascript'>
if (typeof sprites !== 'undefined'){

$("#mySpriteSpin").spritespin({
  // path to the source images.
  source: sprites,
  width   : 371,  // width in pixels of the window/frame
  height  : 252,  // height in pixels of the window/frame
});

}
</script>

and in the page content define the sprites variable:

<script type='text/javascript'>
var sprites = [
  "bett-1_0000.png",
  "bett-1_0001.png",
  "bett-1_0002.png",
  "bett-1_0003.png",
  "bett-1_0004.png",
  "bett-1_0005.png",
  "bett-1_0006.png",
  "bett-1_0007.png",
  "bett-1_0008.png",
  "bett-1_0009.png",
  ];
</script>