--- /dev/null
+$(document).ready(function() {
+ $(".lightbox").click(function() {
+ overlayLink = $(this).attr("href"); //Getting the link for the media
+ window.startOverlay(overlayLink);
+ return false;
+ });
+});
+
+function startOverlay(overlayLink) {
+
+ // Adding elements to the page
+ $("body")
+ .append('<div class="overlay"></div><div class="box"></div>')
+ .css({
+ "overflow-y": "hidden"
+ });
+
+ // To create the lightbox effect
+ $(".container").animate({
+ "opacity": "0.2"
+ }, 300, "linear");
+
+ var imgWidth = $(".box img").width();
+ var imgHeight = $(".box img").height();
+
+ //adding the image to the box
+
+ $(".box").html('<img height=100% width=100% src="' + overlayLink + '" alt="" />');
+ //Position
+ $(".box img").load(function() {
+ var imgWidth = $(".box img").width();
+ var imgHeight = $(".box img").height();
+ if (imgHeight > screen.height - 170) imgHeight = screen.height - 170;
+ if (imgWidth > screen.width - 300) imgWidth = screen.width - 300;
+ $(".box")
+ .css({
+ "position": "absolute",
+ "top": "50%",
+ "left": "50%",
+ "height": imgHeight + 10,
+ "width": imgWidth + 10,
+ "border": "5px solid white",
+ "margin-top": -(imgHeight / 2),
+ "margin-left": -(imgWidth / 2) //to position it in the middle
+ })
+ .animate({
+ "opacity": "1"
+ }, 400, "linear");
+
+ //To remove
+ window.closeOverlay();
+ });
+}
+
+function closeOverlay() {
+ // allow users to be able to close the lightbox
+ $(".overlay").click(function() {
+ $(".box, .overlay").animate({
+ "opacity": "0"
+ }, 200, "linear", function() {
+ $(".box, .overlay").remove();
+ });
+ $(".container").animate({
+ "opacity": "1"
+ }, 200, "linear");
+ $("body").css({
+ "overflow-y": "scroll"
+ });
+ });
+}
{% block mediagoblin_head %}
<!--[if lte IE 8]><link rel="stylesheet"
href="{{ request.staticdirect('/extlib/leaflet/leaflet.ie.css') }}" /><![endif]-->
+
+ <link rel="stylesheet" type="text/css" href="{{ request.staticdirect('/css/lightbox.css') }}">
<script type="text/javascript"
src="{{ request.staticdirect('/js/comment_show.js') }}"></script>
<script type="text/javascript"
src="{{ request.staticdirect('/js/keyboard_navigation.js') }}"></script>
+ <script type="text/javascript"
+ src="{{ request.staticdirect('/js/lightbox.js') }}"></script>
{% template_hook("location_head") %}
{% template_hook("media_head") %}
#}
{% if media.media_files.has_key('medium') %}
<a href="{{ request.app.public_store.file_url(
- media.media_files['original']) }}">
+ media.media_files['original']) }}" class="lightbox">
<img class="media_image"
src="{{ display_media }}"
alt="{% trans media_title=media.title -%}