Skip to content

Commit

Permalink
add photos
Browse files Browse the repository at this point in the history
  • Loading branch information
David Radcliffe committed Dec 8, 2011
1 parent bdcc193 commit e2d50cb
Show file tree
Hide file tree
Showing 12 changed files with 739 additions and 9 deletions.
2 changes: 1 addition & 1 deletion _src/_map.haml
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
#map{:style => "width: 100%; height: 300px"}
#map{:style => "width: 570px; height: 300px; margin-left: 55px"}
21 changes: 21 additions & 0 deletions _src/_photos.haml
View file
Original file line number Diff line number Diff line change
@@ -1 +1,22 @@
#photos
#slides
.slides_container
%a{:href => "http://www.flickr.com/photos/jliba/4665625073/", :target => "_blank", :title => "145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!"}
%img{:alt => "Slide 1", :height => "270", :src => "http://slidesjs.com/examples/standard/img/slide-1.jpg", :width => "570"}/
%a{:href => "http://www.flickr.com/photos/stephangeyer/3020487807/", :target => "_blank", :title => "Taxi | Flickr - Photo Sharing!"}
%img{:alt => "Slide 2", :height => "270", :src => "http://slidesjs.com/examples/standard/img/slide-2.jpg", :width => "570"}/
%a{:href => "http://www.flickr.com/photos/childofwar/2984345060/", :target => "_blank", :title => "Happy Bokeh raining Day | Flickr - Photo Sharing!"}
%img{:alt => "Slide 3", :height => "270", :src => "http://slidesjs.com/examples/standard/img/slide-3.jpg", :width => "570"}/
%a{:href => "http://www.flickr.com/photos/b-tal/117037943/", :target => "_blank", :title => "We Eat Light | Flickr - Photo Sharing!"}
%img{:alt => "Slide 4", :height => "270", :src => "http://slidesjs.com/examples/standard/img/slide-4.jpg", :width => "570"}/
%a{:href => "http://www.flickr.com/photos/bu7amd/3447416780/", :target => "_blank", :title => "“I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.” | Flickr - Photo Sharing!"}
%img{:alt => "Slide 5", :height => "270", :src => "http://slidesjs.com/examples/standard/img/slide-5.jpg", :width => "570"}/
%a{:href => "http://www.flickr.com/photos/streetpreacher/2078765853/", :target => "_blank", :title => "twelve.inch | Flickr - Photo Sharing!"}
%img{:alt => "Slide 6", :height => "270", :src => "http://slidesjs.com/examples/standard/img/slide-6.jpg", :width => "570"}/
%a{:href => "http://www.flickr.com/photos/aftab/3152515428/", :target => "_blank", :title => "Save my love for loneliness | Flickr - Photo Sharing!"}
%img{:alt => "Slide 7", :height => "270", :src => "http://slidesjs.com/examples/standard/img/slide-7.jpg", :width => "570"}/
%a.prev{:href => "#"}
%img{:alt => "Arrow Prev", :height => "43", :src => "images/arrow-prev.png", :width => "24"}/
%a.next{:href => "#"}
%img{:alt => "Arrow Next", :height => "43", :src => "images/arrow-next.png", :width => "24"}/
%img#frame{:alt => "Example Frame", :height => "341", :src => "images/example-frame.png", :width => "739"}
4 changes: 3 additions & 1 deletion _src/index.haml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
Superbowl House
%small Indianapolis, IN
.row
.span10
.span12
= partial :photos
= partial :map
= partial :description
Expand All @@ -36,7 +36,9 @@

%script{:src => "//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"}
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
%script{:src => "js/libs/slides.jquery.js"}
%script{:src => "js/plugins.js"}

%script{:src => "http://maps.googleapis.com/maps/api/js?sensor=false"}
%script{:src => "js/script.js"}
= partial :ga
114 changes: 111 additions & 3 deletions public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,116 @@ input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }

/* =============================================================================
slides
========================================================================== */

#photos {
width:700px;
height:350px;
position:relative;
margin-left: 50px;
}

#frame {
position:absolute;
z-index:0;
width:739px;
height:341px;
top:-3px;
left:-80px;
}

/*
Slideshow
*/

#slides {
position:absolute;
top:15px;
left:4px;
z-index:100;
}

/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/

.slides_container {
width:570px;
overflow:hidden;
position:relative;
display:none;
}

/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/

.slides_container a {
width:570px;
height:270px;
display:block;
}

.slides_container a img {
display:block;
}

/*
Next/prev buttons
*/

#slides .next,#slides .prev {
position:absolute;
top:107px;
left:-39px;
width:24px;
height:43px;
display:block;
z-index:101;
}

#slides .next {
left:585px;
}

/*
Pagination
*/

.pagination {
margin:26px auto 0;
width:100px;
}

.pagination li {
float:left;
margin:0 1px;
list-style:none;
}

.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url(../images/pagination.png);
background-position:0 0;
float:left;
overflow:hidden;
}

.pagination li.current a {
background-position:0 -12px;
}

/* =============================================================================
Primary styles
Expand All @@ -208,9 +318,7 @@ body {
.container > footer p {
text-align: center; /* center align it with the container */
}
.container {
width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
}


.content {
background-color: #fff;
Expand Down
Binary file added public/images/arrow-next.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/arrow-prev.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/example-frame.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/loading.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/pagination.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 37 additions & 3 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,42 @@ <h1>
</h1>
</div>
<div class='row'>
<div class='span10'>
<div id='photos'></div>
<div id='map' style='width: 100%; height: 300px'></div>
<div class='span12'>
<div id='photos'>
<div id='slides'>
<div class='slides_container'>
<a href='http://www.flickr.com/photos/jliba/4665625073/' target='_blank' title='145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!'>
<img alt='Slide 1' height='270' src='http://slidesjs.com/examples/standard/img/slide-1.jpg' width='570' />
</a>
<a href='http://www.flickr.com/photos/stephangeyer/3020487807/' target='_blank' title='Taxi | Flickr - Photo Sharing!'>
<img alt='Slide 2' height='270' src='http://slidesjs.com/examples/standard/img/slide-2.jpg' width='570' />
</a>
<a href='http://www.flickr.com/photos/childofwar/2984345060/' target='_blank' title='Happy Bokeh raining Day | Flickr - Photo Sharing!'>
<img alt='Slide 3' height='270' src='http://slidesjs.com/examples/standard/img/slide-3.jpg' width='570' />
</a>
<a href='http://www.flickr.com/photos/b-tal/117037943/' target='_blank' title='We Eat Light | Flickr - Photo Sharing!'>
<img alt='Slide 4' height='270' src='http://slidesjs.com/examples/standard/img/slide-4.jpg' width='570' />
</a>
<a href='http://www.flickr.com/photos/bu7amd/3447416780/' target='_blank' title='“I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.” | Flickr - Photo Sharing!'>
<img alt='Slide 5' height='270' src='http://slidesjs.com/examples/standard/img/slide-5.jpg' width='570' />
</a>
<a href='http://www.flickr.com/photos/streetpreacher/2078765853/' target='_blank' title='twelve.inch | Flickr - Photo Sharing!'>
<img alt='Slide 6' height='270' src='http://slidesjs.com/examples/standard/img/slide-6.jpg' width='570' />
</a>
<a href='http://www.flickr.com/photos/aftab/3152515428/' target='_blank' title='Save my love for loneliness | Flickr - Photo Sharing!'>
<img alt='Slide 7' height='270' src='http://slidesjs.com/examples/standard/img/slide-7.jpg' width='570' />
</a>
</div>
<a class='prev' href='#'>
<img alt='Arrow Prev' height='43' src='images/arrow-prev.png' width='24' />
</a>
<a class='next' href='#'>
<img alt='Arrow Next' height='43' src='images/arrow-next.png' width='24' />
</a>
</div>
<img alt='Example Frame' height='341' id='frame' src='images/example-frame.png' width='739' />
</div>
<div id='map' style='width: 570px; height: 300px; margin-left: 55px'></div>
<div id='description'></div>
<div id='features'>
<ul>
Expand Down Expand Up @@ -69,6 +102,7 @@ <h1>
<!-- /container -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script src='js/libs/slides.jquery.js'></script>
<script src='js/plugins.js'></script>
<script src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src='js/script.js'></script>
Expand Down
Loading

0 comments on commit e2d50cb

Please sign in to comment.