如何在 Shopify 中实现 gifplayer jQuery 插件？

Question

期望的行为

我想在 shopify 中实现 jQuery gifplayer 插件：

当前行为

Firebug 错误：

Content Security Policy: The page's settings observed the loading of a resource at data:application/javascript;base64...

而且我可以在指定图像上看到 GIF 按钮，但单击它不会导致 gif 停止和启动。

我试过的

01) 我已经将 gifplayer class 应用于图像。

02) 我已经上传 jquery.gifplayer.js 作为 asset。

03) 我已经上传 gifplayer.css 作为 asset.

04) 并且 jquery-1.9.0.min.js 已经是一项资产。

05) 在 theme.liquid 中，我在 <head> 中添加了这个。

{{ 'gifplayer.css' | asset_url | stylesheet_tag }}
<!-- jquery was already being called in -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- BEGIN custom gifplayer -->
{{ 'jquery.gifplayer.js' | asset_url | script_tag }}
<script>
$(document).ready( function(){
$('.gifplayer').gifplayer();
});
</script>
<!-- END custom gifplayer -->

Answer 1

解决方案

我没有意识到您需要将 class gifplayer 应用到同名的静态 png 文件。

HTML

{{ 'http://cdn.shopify.com/s/files/n/nnnn/nnnn/t/n/assets/my_static_img.png' | img_tag: 'hi', 'gifplayer'}}

theme.liquid

{{ 'gifplayer.css' | asset_url | stylesheet_tag }}
// jQuery call comes before gifplayer.js
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
{{ 'jquery.gifplayer.js' | asset_url | script_tag }}
<script>
$(document).ready( function(){
$('.gifplayer').gifplayer();
});
</script>

上传的资产

my_great_gif.png
my_great_gif.gif
jquery.gifplayer.js
gifplayer.css

如何在 Shopify 中实现 gifplayer jQuery 插件？

How to implement the gifplayer jQuery plugin in Shopify?

jquery

jquery-plugins

shopify