Skip to content

Commit

Permalink
swipe
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidhellsing
davidhellsing committed Feb 13, 2013
1 parent e0c1619 commit b0cc356
Show file tree
Hide file tree
Showing 8 changed files with 7,163 additions and 0 deletions.
Binary file added demos/swipe/.DS_Store
View file
Binary file not shown.
124 changes: 124 additions & 0 deletions demos/swipe/classic/classic-demo.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Galleria Classic Theme</title>
<style>

/* Demo styles */
html,body{background:#222;margin:0;}
body{border-top:4px solid #000;}
.content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;width:620px;margin:20px auto;}
h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;}
p{margin:0 0 20px}
a {color:#22BCB9;text-decoration:none;}
.cred{margin-top:20px;font-size:11px;}

/* This rule is read by Galleria to define the gallery height: */
#galleria{height:320px}

</style>

<!-- load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<!-- load Galleria -->
<script src="../../galleria.js"></script>

</head>
<body>
<div class="content">
<h1>Galleria Classic Theme</h1>
<p>Demonstrating a basic gallery example.</p>

<!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary -->

<div id="galleria">
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Biandintz_eta_zaldiak_-_modified2.jpg/800px-Biandintz_eta_zaldiak_-_modified2.jpg">
<img
src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Biandintz_eta_zaldiak_-_modified2.jpg/100px-Biandintz_eta_zaldiak_-_modified2.jpg",
data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Biandintz_eta_zaldiak_-_modified2.jpg/1280px-Biandintz_eta_zaldiak_-_modified2.jpg"
data-title="Biandintz eta zaldiak"
data-description="Horses on Bianditz mountain, in Navarre, Spain."
>
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Athabasca_Rail_at_Brule_Lake.jpg/800px-Athabasca_Rail_at_Brule_Lake.jpg">
<img
src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Athabasca_Rail_at_Brule_Lake.jpg/100px-Athabasca_Rail_at_Brule_Lake.jpg",
data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Athabasca_Rail_at_Brule_Lake.jpg/1280px-Athabasca_Rail_at_Brule_Lake.jpg"
data-title="Athabasca Rail"
data-description="The Athabasca River railroad track at the mouth of Brulé Lake in Alberta, Canada."
>
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Back-scattering_crepuscular_rays_panorama_1.jpg/1280px-Back-scattering_crepuscular_rays_panorama_1.jpg">
<img
src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Back-scattering_crepuscular_rays_panorama_1.jpg/100px-Back-scattering_crepuscular_rays_panorama_1.jpg",
data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Back-scattering_crepuscular_rays_panorama_1.jpg/1400px-Back-scattering_crepuscular_rays_panorama_1.jpg"
data-title="Back-scattering crepuscular rays"
data-description="Picture of the day on Wikimedia Commons 26 September 2010."
>
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Interior_convento_3.jpg/800px-Interior_convento_3.jpg">
<img
src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Interior_convento_3.jpg/120px-Interior_convento_3.jpg",
data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Interior_convento_3.jpg/1400px-Interior_convento_3.jpg"
data-title="Interior convento"
data-description="Interior view of Yuriria Convent, founded in 1550."
>
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Oxbow_Bend_outlook_in_the_Grand_Teton_National_Park.jpg/800px-Oxbow_Bend_outlook_in_the_Grand_Teton_National_Park.jpg">
<img
src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Oxbow_Bend_outlook_in_the_Grand_Teton_National_Park.jpg/100px-Oxbow_Bend_outlook_in_the_Grand_Teton_National_Park.jpg",
data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Oxbow_Bend_outlook_in_the_Grand_Teton_National_Park.jpg/1280px-Oxbow_Bend_outlook_in_the_Grand_Teton_National_Park.jpg"
data-title="Oxbow Bend outlook"
data-description="View over the Snake River to the Mount Moran with the Skillet Glacier."
>
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Hazy_blue_hour_in_Grand_Canyon.JPG/800px-Hazy_blue_hour_in_Grand_Canyon.JPG">
<img
src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Hazy_blue_hour_in_Grand_Canyon.JPG/100px-Hazy_blue_hour_in_Grand_Canyon.JPG",
data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Hazy_blue_hour_in_Grand_Canyon.JPG/1280px-Hazy_blue_hour_in_Grand_Canyon.JPG"
data-title="Hazy blue hour"
data-description="Hazy blue hour in Grand Canyon. View from the South Rim."
>
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/2909_vallon_moy_res.jpg/800px-2909_vallon_moy_res.jpg">
<img
src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/2909_vallon_moy_res.jpg/100px-2909_vallon_moy_res.jpg",
data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/2909_vallon_moy_res.jpg/1280px-2909_vallon_moy_res.jpg"
data-title="Haute Severaisse valley"
data-description="View of Haute Severaisse valley and surrounding summits from the slopes of Les Vernets."
>
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bohinjsko_jezero_2.jpg/800px-Bohinjsko_jezero_2.jpg">
<img
src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bohinjsko_jezero_2.jpg/100px-Bohinjsko_jezero_2.jpg",
data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bohinjsko_jezero_2.jpg/1280px-Bohinjsko_jezero_2.jpg"
data-title="Bohinj lake"
data-description="Bohinj lake (Triglav National Park, Slovenia) in the morning."
>
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Bowling_Balls_Beach_2_edit.jpg/800px-Bowling_Balls_Beach_2_edit.jpg">
<img
src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Bowling_Balls_Beach_2_edit.jpg/100px-Bowling_Balls_Beach_2_edit.jpg",
data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Bowling_Balls_Beach_2_edit.jpg/1280px-Bowling_Balls_Beach_2_edit.jpg"
data-title="Bowling Balls"
data-description="Mendocino county, California, USA."
>
</a>
</div>

<p class="cred">Made by <a href="http://galleria.aino.se">Galleria</a>.</p>
</div>

<script>

// Load the classic theme
Galleria.loadTheme('galleria.classic.js');

// Initialize Galleria
Galleria.run('#galleria');

</script>
</body>
</html>
Binary file added demos/swipe/classic/classic-loader.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 demos/swipe/classic/classic-map.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.
217 changes: 217 additions & 0 deletions demos/swipe/classic/galleria.classic.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,217 @@
/* Galleria Classic Theme 2012-08-07 | https://raw.github.com/aino/galleria/master/LICENSE | (c) Aino */

#galleria-loader{height:1px!important}

.galleria-container {
position: relative;
overflow: hidden;
background: #000;
}
.galleria-container img {
-moz-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.galleria-stage {
position: absolute;
top: 10px;
bottom: 60px;
left: 10px;
right: 10px;
overflow:hidden;
}
.galleria-thumbnails-container {
height: 50px;
bottom: 0;
position: absolute;
left: 10px;
right: 10px;
z-index: 2;
}
.galleria-carousel .galleria-thumbnails-list {
margin-left: 30px;
margin-right: 30px;
}
.galleria-thumbnails .galleria-image {
height: 40px;
width: 60px;
background: #000;
margin: 0 5px 0 0;
border: 1px solid #000;
float: left;
cursor: pointer;
}
.galleria-counter {
position: absolute;
bottom: 10px;
left: 10px;
text-align: right;
color: #fff;
font: normal 11px/1 arial,sans-serif;
z-index: 1;
}
.galleria-loader {
background: #000;
width: 20px;
height: 20px;
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
display: none;
background: url(classic-loader.gif) no-repeat 2px 2px;
}
.galleria-info {
width: 50%;
top: 15px;
left: 15px;
z-index: 2;
position: absolute;
}
.galleria-info-text {
background-color: #000;
padding: 12px;
display: none;
/* IE7 */ zoom:1;
}
.galleria-info-title {
font: bold 12px/1.1 arial,sans-serif;
margin: 0;
color: #fff;
margin-bottom: 7px;
}
.galleria-info-description {
font: italic 12px/1.4 georgia,serif;
margin: 0;
color: #bbb;
}
.galleria-info-close {
width: 9px;
height: 9px;
position: absolute;
top: 5px;
right: 5px;
background-position: -753px -11px;
opacity: .5;
filter: alpha(opacity=50);
cursor: pointer;
display: none;
}
.notouch .galleria-info-close:hover{
opacity:1;
filter: alpha(opacity=100);
}
.touch .galleria-info-close:active{
opacity:1;
filter: alpha(opacity=100);
}
.galleria-info-link {
background-position: -669px -5px;
opacity: .7;
filter: alpha(opacity=70);
position: absolute;
width: 20px;
height: 20px;
cursor: pointer;
background-color: #000;
}
.notouch .galleria-info-link:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.touch .galleria-info-link:active {
opacity: 1;
filter: alpha(opacity=100);
}
.galleria-image-nav {
position: absolute;
top: 50%;
margin-top: -62px;
width: 100%;
height: 62px;
left: 0;
}
.galleria-image-nav-left,
.galleria-image-nav-right {
opacity: .3;
filter: alpha(opacity=30);
cursor: pointer;
width: 62px;
height: 124px;
position: absolute;
left: 10px;
z-index: 2;
background-position: 0 46px;
}
.galleria-image-nav-right {
left: auto;
right: 10px;
background-position: -254px 46px;
z-index: 2;
}
.notouch .galleria-image-nav-left:hover,
.notouch .galleria-image-nav-right:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.touch .galleria-image-nav-left:active,
.touch .galleria-image-nav-right:active {
opacity: 1;
filter: alpha(opacity=100);
}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right {
cursor: pointer;
display: none;
background-position: -495px 5px;
position: absolute;
left: 0;
top: 0;
height: 40px;
width: 23px;
z-index: 3;
opacity: .8;
filter: alpha(opacity=80);
}
.galleria-thumb-nav-right {
background-position: -578px 5px;
border-right: none;
right: 0;
left: auto;
}
.galleria-thumbnails-container .disabled {
opacity: .2;
filter: alpha(opacity=20);
cursor: default;
}
.notouch .galleria-thumb-nav-left:hover,
.notouch .galleria-thumb-nav-right:hover {
opacity: 1;
filter: alpha(opacity=100);
background-color: #111;
}
.touch .galleria-thumb-nav-left:active,
.touch .galleria-thumb-nav-right:active {
opacity: 1;
filter: alpha(opacity=100);
background-color: #111;
}
.notouch .galleria-thumbnails-container .disabled:hover {
opacity: .2;
filter: alpha(opacity=20);
background-color: transparent;
}

.galleria-carousel .galleria-thumb-nav-left,
.galleria-carousel .galleria-thumb-nav-right {
display: block;
}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right,
.galleria-info-link,
.galleria-info-close,
.galleria-image-nav-left,
.galleria-image-nav-right {
background-image: url(classic-map.png);
background-repeat: no-repeat;
}
Loading

0 comments on commit b0cc356

Please sign in to comment.