Skip to content

Instantly share code, notes, and snippets.

@jspaper

jspaper/example.html

Last active January 12, 2016 06:43
Show Gist options
  • Save jspaper/7ee7dcd04002ab57f243 to your computer and use it in GitHub Desktop.
Save jspaper/7ee7dcd04002ab57f243 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Picowork app
Raw
example.html
<html>
<head>
<style type="text/css">
ul li {
margin-bottom: 10px;
cursor: move;
}
</style>
</head>
<body>
<ul>
<li data-src="https://www.flickr.com/photos/heterotopia/23799554559/in/dateposted/">
<img src="https://c2.staticflickr.com/2/1564/23799554559_95df22a7bc_n.jpg" />
<button class="autoCreate">Save to</button>
</li>
<li data-src="https://www.flickr.com/photos/heterotopia/24066649615/in/dateposted/">
<img src="https://c2.staticflickr.com/6/5683/24066649615_8b1f752ea4_n.jpg" />
<button class="autoCreate">Save to</button>
</li>
<li data-src="https://www.flickr.com/photos/heterotopia/23941444175/in/dateposted/">
<img src="https://c2.staticflickr.com/2/1508/23941444175_6d249ce50e_n.jpg" />
<button class="autoCreate">Save to</button>
</li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://developer.picowork.com/picowork_sdk.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('li').each(function() {
var $el = $(this);
var url = $el.data('src');
var image_url = $el.find('img').attr('src');
// Initialize
var picoCard = new picowork.PicoCard({
elem: $el[0],
data: {
title: "New Matter",
url: url,
preview: image_url
}
});
// Save to Picowork
$el.find('.autoCreate').click(function() {
window.parent.postMessage({
sourcefrom: 'matters_picowork',
title: "New Matter",
url: url,
preview: image_url,
autoCreate: true
}, '*');
});
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment