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类应用于图片。

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

<强>解决方案

我没有意识到您需要将类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插件？

1 个答案: