diff --git a/website/photos/migrations/0003_auto_20160809_1856.py b/website/photos/migrations/0003_auto_20160809_1856.py
new file mode 100644
index 0000000000000000000000000000000000000000..7db93b337b99e521deec1b5df654ff59b0dc8cca
--- /dev/null
+++ b/website/photos/migrations/0003_auto_20160809_1856.py
@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10 on 2016-08-09 16:56
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('photos', '0002_auto_20160809_1755'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='photo',
+            name='rotation',
+            field=models.IntegerField(choices=[(0, 0), (90, 90), (180, 180), (270, 270)], default=0, help_text='This does not modify the original image file.'),
+        ),
+    ]
diff --git a/website/photos/models.py b/website/photos/models.py
index 5a2196ce7274b8055a8f40431e7474283f24c0f6..505072d63578cdd15ae2735baefce3941a18f226 100644
--- a/website/photos/models.py
+++ b/website/photos/models.py
@@ -16,7 +16,11 @@ def photo_uploadto(instance, filename):
 class Photo(models.Model):
     album = models.ForeignKey('Album', on_delete=models.CASCADE)
     file = models.ImageField(upload_to=photo_uploadto)
-    rotation = models.IntegerField(default=0)
+    rotation = models.IntegerField(
+        default=0,
+        choices=((x, x) for x in (0, 90, 180, 270)),
+        help_text="This does not modify the original image file.",
+    )
 
     def __str__(self):
         return self.file.name
diff --git a/website/photos/static/photos/css/style.css b/website/photos/static/photos/css/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..a7b023c56adeb81afbb18a4a401488a90a1add79
--- /dev/null
+++ b/website/photos/static/photos/css/style.css
@@ -0,0 +1,13 @@
+
+/* Solving this with dynamic a data attribute (i.e. attr(data-rotation)) does not work, as that's a string. */
+img.rotate90 {
+  transform: rotate(90deg);
+}
+
+img.rotate180 {
+  transform: rotate(180deg);
+}
+
+img.rotate270 {
+  transform: rotate(270deg);
+}
diff --git a/website/photos/templates/photos/album.html b/website/photos/templates/photos/album.html
index 9d500be98754dd9e61a84c44445274b4ec2a3f27..992ee9f2c8cf7791a59a2e78fdc9cd1744e0347e 100644
--- a/website/photos/templates/photos/album.html
+++ b/website/photos/templates/photos/album.html
@@ -3,6 +3,11 @@
 
 {% block page_title %}{% trans "Photos" %}{% endblock %}
 
+{% block css_head %}
+{{ block.super }}
+<link href="{% static "photos/css/style.css" %}" rel="stylesheet" type="text/css">
+{% endblock %}
+
 {% block body %}
 <h1>{{ album.title }}</h1>
 <h2>{{ album.date|date:"d-m-Y" }}</h2>
@@ -10,10 +15,10 @@
     <ul class="gallery-photos row">
         {% for photo in album.photo_set.all %}
         <li class="post gallery-photo span3 has-overlay {% if forloop.counter0|divisibleby:4 %}first-child{% endif %}">
-            <a class="gallery-box" rel="gallery" data-download="{% url 'photos:download' photo.file %}" href="{% thumbnail photo.file '1024x768' fit=False %}">
+            <a data-fancybox-rotation="{{ photo.rotation }}" class="gallery-box" rel="gallery" data-download="{% url 'photos:download' photo.file %}" href="{% thumbnail photo.file '1024x768' fit=False %}">
                 <span class="post-inner">
                     <span class="inner-img">
-                        <img src="{% thumbnail photo.file '220x220' %}" alt="" />
+                        <img class="rotate{{ photo.rotation }}" src="{% thumbnail photo.file '220x220' %}" alt="" />
                     </span>
                     <span class="post-overlay">
                     </span>
diff --git a/website/photos/templates/photos/index.html b/website/photos/templates/photos/index.html
index 7f782494626306cf494fed41c2d6f11e4fe75ed4..3247e0915aa2ee1a2059f32db368593c85333e65 100644
--- a/website/photos/templates/photos/index.html
+++ b/website/photos/templates/photos/index.html
@@ -1,8 +1,13 @@
 {% extends 'base.html' %}
-{% load i18n thumbnail %}
+{% load i18n thumbnail staticfiles %}
 
 {% block page_title %}{% trans "Photos" %}{% endblock %}
 
+{% block css_head %}
+{{ block.super }}
+<link href="{% static "photos/css/style.css" %}" rel="stylesheet" type="text/css">
+{% endblock %}
+
 {% block body %}
 <h1>{% trans "Photos" %}</h1>
 
@@ -13,7 +18,7 @@
             <a href="{% url 'photos:album' album.slug %}">
                 <span class="post-inner">
                     <span class="inner-img">
-                        <img src="{% thumbnail album.cover.file '220x220' %}" alt="" />
+                        <img class="rotate{{ album.cover.rotation }}" src="{% thumbnail album.cover.file '220x220' %}" alt="" />
                     </span>
                     <span class="post-overlay">
                         <span class="post-overlay-meta">
diff --git a/website/thaliawebsite/static/js/jquery.fancybox.js b/website/thaliawebsite/static/js/jquery.fancybox.js
index bda8cbe558f523ef1a459c706c6b35163d86b681..eb32f957b3d765deb800aca886d854f928ffd5a0 100644
--- a/website/thaliawebsite/static/js/jquery.fancybox.js
+++ b/website/thaliawebsite/static/js/jquery.fancybox.js
@@ -132,13 +132,14 @@
             index   : 0,
             type    : null,
             href    : null,
+            rotation : 0,
             content : null,
             title   : null,
 
             // HTML templates
             tpl: {
                 wrap     : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
-                image    : '<img class="fancybox-image" src="{href}" alt="" />',
+                image    : '<img class="fancybox-image" src="{href}" data-rotation="{rotation}" alt="" />',
                 iframe   : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + (IE ? ' allowtransparency="true"' : '') + '></iframe>',
                 error    : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
                 closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
@@ -262,6 +263,7 @@
                         obj = {
                             href    : element.data('fancybox-href') || element.attr('href'),
                             title   : element.data('fancybox-title') || element.attr('title'),
+                            rotation   : element.data('fancybox-rotation') || element.attr('rotation'),
                             isDom   : true,
                             element : element
                         };
@@ -777,6 +779,7 @@
                 obj,
                 href,
                 type,
+                rotation,
                 margin,
                 padding;
 
@@ -942,9 +945,14 @@
             img.onload = function () {
                 this.onload = this.onerror = null;
 
-                F.coming.width  = this.width / F.opts.pixelRatio;
-                F.coming.height = this.height / F.opts.pixelRatio;
-
+                if (F.coming.rotation == '90' || F.coming.rotation == '270') {
+                    F.coming.width  = this.height / F.opts.pixelRatio;
+                    F.coming.height = this.width / F.opts.pixelRatio;
+                }
+                else {
+                    F.coming.width  = this.width / F.opts.pixelRatio;
+                    F.coming.height = this.height / F.opts.pixelRatio;
+                }
                 F._afterLoad();
             };
 
@@ -1052,6 +1060,7 @@
                 type,
                 scrolling,
                 href,
+                rotation,
                 embed;
 
             F.hideLoading();
@@ -1093,6 +1102,7 @@
             });
 
             href = current.href;
+            rotation = current.rotation;
 
             switch (type) {
                 case 'inline':
@@ -1117,7 +1127,7 @@
                 break;
 
                 case 'image':
-                    content = current.tpl.image.replace('{href}', href);
+                    content = current.tpl.image.replace('{href}', href).replace('{rotation}', rotation);
                 break;
 
                 case 'swf':
@@ -1363,6 +1373,16 @@
 
             inner.width( width ).height( height );
 
+            if (current.type == 'image') {
+                var img = inner.find('img')
+                var transform = 'rotate(' + img.data('rotation') + 'deg)';
+                if (img.data('rotation') == '90' || img.data('rotation') == '270') {
+                    var ratio = height / width;
+                    transform += ' scale(' + ratio + ', ' + (1/ratio) + ')';
+                }
+                img.css('transform', transform);
+            }
+
             wrap.width( width + wPadding );
 
             width_  = wrap.width();
diff --git a/website/thaliawebsite/templates/base.html b/website/thaliawebsite/templates/base.html
index 6c36842f24f6adf4d2f0f119a2bf20508f2890e5..0a174dd9f5e41223a679c3b45435a26bbb2122f9 100644
--- a/website/thaliawebsite/templates/base.html
+++ b/website/thaliawebsite/templates/base.html
@@ -32,7 +32,7 @@
 {% block js_head %}
 <script type="text/javascript" src="{% static "plugins/jquery-1.8.3.min.js" %}"></script>
 <script type="text/javascript" src="{% static "js/jquery.jscroll.min.js" %}"></script>
-<script type="text/javascript" src="{% static "js/jquery.fancybox.pack.js" %}"></script>
+<script type="text/javascript" src="{% static "js/jquery.fancybox.js" %}"></script>
 <script type="text/javascript" src="{% static "js/thimbus.js" %}"></script>
 <script type="text/javascript" src="{% static "js/scripts.js" %}"></script>
 {% endblock %}