From 35bfedd04aa60ae9af8f63a9f0b2d705b42ad37e Mon Sep 17 00:00:00 2001
From: Jan Grewe <jan@faked.org>
Date: Sat, 22 Feb 2014 02:09:36 +0100
Subject: [PATCH] make carousel responsive
---
css/mediarack.css | 44 ++++++++++++++++++--------------------------
js/mediarack.js | 18 +++++++++++++++++-
2 files changed, 35 insertions(+), 27 deletions(-)
diff --git a/css/mediarack.css b/css/mediarack.css
index 30223d1..2b2a0a0 100644
--- a/css/mediarack.css
+++ b/css/mediarack.css
@@ -85,10 +85,8 @@ div.epLabel {
}
.jcarousel-wrapper {
+ margin: 20px auto;
position: relative;
- width: 1000px;
- margin-left: auto;
- margin-right: auto;
}
/** Carousel **/
@@ -96,7 +94,7 @@ div.epLabel {
.jcarousel {
position: relative;
overflow: hidden;
- width: 1000px;
+ width: 100%;
}
.jcarousel ul {
@@ -105,13 +103,17 @@ div.epLabel {
list-style: none;
margin: 0;
padding: 0;
- text-align: center;
}
.jcarousel li {
+ width: 200px;
float: left;
- width: 200px;
- margin: 10px 0;
+}
+
+.jcarousel img {
+ margin: 0 10px;
+ max-width: 150px;
+ height: auto !important;
}
/** Carousel Controls **/
@@ -119,7 +121,8 @@ div.epLabel {
.jcarousel-control-prev,
.jcarousel-control-next {
position: absolute;
- top: 100px;
+ top: 50%;
+ margin-top: -15px;
width: 30px;
height: 30px;
text-align: center;
@@ -129,28 +132,17 @@ div.epLabel {
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
- -moz-border-radius: 30px;
- border-radius: 30px;
- -webkit-box-shadow: 0 0 2px #999;
- -moz-box-shadow: 0 0 2px #999;
- box-shadow: 0 0 2px #999;
+ -moz-border-radius: 30px;
+ border-radius: 30px;
+ -webkit-box-shadow: 0 0 4px #F0EFE7;
+ -moz-box-shadow: 0 0 4px #F0EFE7;
+ box-shadow: 0 0 4px #F0EFE7;
}
.jcarousel-control-prev {
- left: -50px;
+ left: 15px;
}
.jcarousel-control-next {
- right: -50px;
-}
-
-.jcarousel-control-prev:hover span,
-.jcarousel-control-next:hover span {
- display: block;
-}
-
-.jcarousel-control-prev.inactive,
-.jcarousel-control-next.inactive {
- opacity: .5;
- cursor: default;
+ right: 15px;
}
diff --git a/js/mediarack.js b/js/mediarack.js
index 9cb1a75..be1a6a1 100644
--- a/js/mediarack.js
+++ b/js/mediarack.js
@@ -46,7 +46,23 @@ function getLatest() {
var liLatestItem = $('<li><img src="api.php?get=poster&show='+escape(ep.show)+'" /><div class="epLabel">'+ep.show+'<br />'+ep.episode+'<br />'+ep.name+'<br />'+ep.airdate+'</div></li>');
ulLatestContainer.append(liLatestItem);
});
- $('.jcarousel').jcarousel({
+ $('.jcarousel')
+ .on('jcarousel:create jcarousel:reload', function() {
+ var element = $(this),
+ width = element.innerWidth();
+
+ if (width > 1000) {
+ width = width / 5;
+ } else if (width > 800) {
+ width = width / 4;
+ } else if (width > 590) {
+ width = width / 3;
+ } else if (width < 590) {
+ width = width / 2;
+ }
+ element.jcarousel('items').css('width', width + 'px');
+ })
+ .jcarousel({
wrap: 'both'
});
$('.jcarousel-control-prev')
--
GitLab