Dockery/Pinry
1
0
Fork 0
mirror of https://github.com/pinry/pinry.git synced 2025-11-14 09:05:41 +01:00
Code Issues Packages Projects Releases Activity

Have a working custom lightbox plugin now

Browse Source
This commit is contained in:
Isaac Bythewood
2013-02-23 04:42:22 +00:00
parent 5a74253bf8
commit 2264d96528
6 changed files with 61 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pinry/static/css/lightbox.css
View File

@@ -0,0 +1,12 @@
.lightbox-background {
background: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
right: 0;
position: absolute;
}
.lightbox-wrapper {
position: absolute;
left: 50%;
}

0
pinry/static/js/lightbox.css
View File

38
pinry/static/js/lightbox.js Normal file
View File

@@ -0,0 +1,38 @@
$(window).load(function() {
window.lightbox = function(pins) {
var links = pins.find('.lightbox');
function createBox(imageUrl) {
var template = Handlebars.compile($('#lightbox-template').html());
var html = template({image: imageUrl});
$('body').append(html);
$('.lightbox-wrapper img').load(function() {
$('.lightbox-background').css('height', String($(document).height())+'px');
$(this).css({
'max-width': String($(window).width()-200)+'px',
'max-height': String($(window).height()-200)+'px',
'margin-top': String($(window).scrollTop()+100)+'px'
});
var width = $(this).width();
$('.lightbox-wrapper').css({
'margin-left': '-'+String(width/2)+'px'
});
});
return $('.lightbox-background');
}
for (var i=0; i < links.length; i++) {
link = links.eq(i);
link.off('click');
link.click(function(e) {
var box = createBox($(this).attr('href'));
box.click(function() {
box.remove()
});
e.preventDefault();
});
}
}
});

2
pinry/static/js/pinry.js
View File

@@ -45,6 +45,7 @@ $(window).load(function() {
colHeights[sCol] += block.height()+(blockMargin);
}
lightbox(blocks);
$('.spinner').css('display', 'none');
blockContainer.css('height', colHeights.sort().slice(-1)[0]);
}
@@ -63,7 +64,6 @@ $(window).load(function() {
// Set which items are editable by the current user
for (var i=0; i < pins.objects.length; i++)
pins.objects[i].editable = (pins.objects[i].submitter.username == currentUser);
console.log(pins.objects);
// Use the fetched pins as our context for our pins template
var template = Handlebars.compile($('#pins-template').html());

4
pinry/templates/core/base.html
View File

@@ -9,9 +9,9 @@
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Monoton">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap.min.css">
{% compress css %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/pinry.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/messages.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/lightbox.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/pinry.css">
{% endcompress %}
</head>
<body>
@@ -58,9 +58,9 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>
{% compress js %}
<script src="{{ STATIC_URL }}js/pinry.js"></script>
<script src="{{ STATIC_URL }}js/messages.js"></script>
<script src="{{ STATIC_URL }}js/lightbox.js"></script>
<script src="{{ STATIC_URL }}js/pinry.js"></script>
{% endcompress %}
</body>
</html>

8
pinry/templates/pins/recent_pins.html
View File

@@ -15,6 +15,14 @@
{% block templates %}
{% verbatim %}
<script id="lightbox-template" type="text/x-handlebars-template">
<div class="lightbox-background">
<div class="lightbox-wrapper">
<img src="{{image}}" />
</div>
</div>
</script>
<script id="pins-template" type="text/x-handlebars-template">
{{#each pins}}
<div class="pin">