Skip to content

Commit

Permalink
implemented superslides
Browse files Browse the repository at this point in the history
  • Loading branch information
@frebro
frebro committed Dec 2, 2013
1 parent 3caa028 commit 2ec5c48
Show file tree
Hide file tree
Showing 5 changed files with 178 additions and 9 deletions.
5 changes: 5 additions & 0 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@ module.exports = function (grunt) {
files: [
'Gruntfile.js',
'<%= app.src %>/*.html',
'<%= app.src %>/**/{,*/}*.js',
'<%= app.src %>/**/{,*/}*.less',
'<%= app.lib %>/**/{,*/}*.js',
'<%= app.lib %>/**/{,*/}*.less'
],
tasks: ['build']
Expand Down Expand Up @@ -69,6 +71,8 @@ module.exports = function (grunt) {
plugins: {
src: [
'<%= app.lib %>/jquery/jquery.js',
'<%= app.lib %>/jquery.animate-enhanced/jquery.animate-enhanced.min.js',
'<%= app.lib %>/jquery.superslides/dist/jquery.superslides.js',
'<%= app.lib %>/bootstrap/js/transition.js',
// '<%= app.lib %>/bootstrap/js/alert.js',
'<%= app.lib %>/bootstrap/js/button.js',
Expand Down Expand Up @@ -103,6 +107,7 @@ module.exports = function (grunt) {
'<%= app.src %>/less',
'<%= app.lib %>/flexslider-less',
'<%= app.lib %>/font-awesome/less',
'<%= app.lib %>/jquery.superslides/dist/stylesheets',
'<%= app.lib %>/bootstrap/less'
]
},
Expand Down
4 changes: 3 additions & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,12 @@
],
"devDependencies": {
"bootstrap": "~3.0.2",
"superslides": "[email protected]:nicinabox/superslides.git",
"modernizr": "~2.6.2",
"font-awesome": "~3.0.2",
"jquery": "~1.9.1",
"raphael": "~2.1.0",
"scaleraphael": "*"
"scaleraphael": "*",
"jquery.animate-enhanced": "*"
}
}
112 changes: 111 additions & 1 deletion src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Platsbyggd bokhylla</title>
<meta name="description" content="Rita och beställ din bokhylla direkt. Vi kör hem och platsbygger den åt dig.">
<meta name="viewport" content="width=1024">
<!-- <meta name="viewport" content="width=1024"> -->

<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr.js"></script>
Expand All @@ -30,6 +30,116 @@ <h1>Platsbyggd bokhylla <small class="text-muted">av Jerker Inredning &amp; Form
</div>
</header>

<section id="gallery">
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-10 col-lg-offset-1">
<div id="slides">
<ul class="slides-container list-unstyled">
<li>
<figure>
<img class="img-responsive" src="images/p/jerker_169_2004_1.jpg" alt="Davidhall: 70&thinsp;926&thinsp;kr (~2&thinsp;991&thinsp;kr / 24 mån)">
<figcaption>
<span class="model">Davidhall</span>
<span class="price-total">70&thinsp;000&thinsp;kr</span>
<span class="price-monthly">~3&thinsp;000&thinsp;kr</span>
/
<span class="price-period">24 mån</span>
</figcaption>
</figure>
<a class="btn btn-info" data-planid="51e9078a15fbf2ba31000033" href="#planner" title="Börja bygga den här hyllan">Bygg den här hyllan</a>
</li>
<li>
<figure>
<img class="img-responsive" src="images/p/jerker_mg_3439.jpg" alt="Sofielund: 37&thinsp;500&thinsp;kr (~1&thinsp;598&thinsp;kr / 24 mån)">
<figcaption>
<span class="model">Sofielund</span>
<span class="price-total">37&thinsp;500&thinsp;kr</span>
<small>
<span class="price-monthly">~1&thinsp;600&thinsp;kr</span>
/
<span class="price-period">24 mån</span>
</small>
</figcaption>
</figure>
<a class="btn btn-info" data-planid="51ee4dc915fbf2ba31000046" href="#planner" title="Börja bygga den här hyllan">Bygg den här hyllan</a>
</li>
<li>
<figure>
<img class="img-responsive" src="images/p/jerker_169_2013.jpg" alt="Davidhall: 72&thinsp;000&thinsp;kr (~3&thinsp;000&thinsp;kr / 24 mån)">
<figcaption>
<span class="model">Davidhall</span>
<span class="price-total">72&thinsp;000&thinsp;kr</span>
<small>
<span class="price-monthly">~3&thinsp;000&thinsp;kr</span>
/
<span class="price-period">24 mån</span>
</small>
</figcaption>
</figure>
<a class="btn btn-info" data-planid="51e9078a15fbf2ba31000033" href="#planner" title="Börja bygga den här hyllan">Bygg den här hyllan</a>
</li>
<li>
<figure>
<img class="img-responsive" src="images/p/jerker_169_3592.jpg" alt="Ribersborg: 38&thinsp;000&thinsp;kr (~1&thinsp;600&thinsp;kr / 24 mån)">
<figcaption>
<span class="model">Ribersborg</span>
<span class="price-total">38&thinsp;000&thinsp;kr</span>
<small>
<span class="price-monthly">~1&thinsp;600&thinsp;kr</span>
/
<span class="price-period">24 mån</span>
</small>
</figcaption>
</figure>
<a class="btn btn-info" data-planid="51e90d8d15fbf2ba31000037" href="#planner" title="Börja bygga den här hyllan">Bygg den här hyllan</a>
</li>
<li>
<figure>
<img class="img-responsive" src="images/p/jerker_mg_3693.jpg" alt="Specialbyggd bokhylla, fråga oss om priset">
<figcaption>
<span class="model">Specialbyggd</span>
<span class="price-total">Fråga oss om pris</span>
</figcaption>
</figure>
</li>
<li>
<figure>
<img class="img-responsive" src="images/p/jerker_169_3597.jpg" alt="Ribersborg: 38&thinsp;000&thinsp;kr (~1&thinsp;600&thinsp;kr / 24 mån)">
<figcaption>
<span class="model">Ribersborg</span>
<span class="price-total">38&thinsp;000&thinsp;kr</span>
<small>
<span class="price-monthly">~1&thinsp;600&thinsp;kr</span>
/
<span class="price-period">24 mån</span>
</small>
</figcaption>
</figure>
<a class="btn btn-info" data-planid="51e90d8d15fbf2ba31000037" href="#planner" title="Börja bygga den här hyllan">Bygg den här hyllan</a>
</li>
<li>
<figure>
<img class="img-responsive" src="images/p/jerker_mg_1956.jpg" alt="Davidhall: 83&thinsp;000&thinsp;kr (~3&thinsp;500&thinsp;kr / 24 mån)">
<figcaption>
<span class="model">Davidhall</span>
<span class="price-total">83&thinsp;000&thinsp;kr</span>
<small>
<span class="price-monthly">~3&thinsp;500&thinsp;kr</span>
/
<span class="price-period">24 mån</span>
</small>
</figcaption>
</figure>
<a class="btn btn-info" data-planid="51e90b2415fbf2ba31000034" href="#planner" title="Börja bygga den här hyllan">Bygg den här hyllan</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>

<section id="about">
<div class="container">
<div class="row">
Expand Down
8 changes: 8 additions & 0 deletions src/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
$(function(){
$('#slides').superslides({
play: '5200',
animation: 'fade',
inherit_width_from: '#slides .slides-container',
inherit_height_from: '#slides .slides-container'
});
});
58 changes: 51 additions & 7 deletions src/less/main.less
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,39 @@

// Frameworks
// Imports
// -------------------------

// Bootstrap
//

@import "bootstrap";


// Variables
// -------------------------
//

@import "variables";


// Fonts
// -------------------------
//

@import "fonts";


// Components
// -------------------------
//

@import (less) "flexslider.css";
@import (less) "superslides.css";


// Partials
// -------------------------
//

@import "mixins";
@import "utils";
@import "planner";


// Main styles
// -------------------------

Expand Down Expand Up @@ -71,7 +75,7 @@ section.alternate {

body > header h1 {
font-family: @font-family-base;
font-size: @font-size-h3;
font-size: @font-size-h1;
}

// Header nav
Expand All @@ -81,6 +85,46 @@ body > header nav {
margin-top: @line-height-computed;
}

// Gallery slideshow
//

#slides {
border: 3px solid @gray-dark;
border-radius: @border-radius-large;

li,
img {
border-radius: @border-radius-base;
}

.slides-container {
height: 550px;
}

figcaption {
background-color: @near-black;
background-color: fade(@near-black, 80);
color: @near-white;
border-top-right-radius: @border-radius-base;

position: absolute;
bottom: 0;
left: 0;
padding: @padding-base-vertical @padding-base-horizontal;

.model,
small {
display: block;
}
}

.btn {
position: absolute;
bottom: @padding-base-vertical;
right: @padding-base-horizontal;
}
}

// Responsive tagline
//

Expand Down

0 comments on commit 2ec5c48

Please sign in to comment.