Permalink
Browse files

Adding fancybox, triggered by the 'about' button.

  • Loading branch information...
dragoonis committed Nov 22, 2012
1 parent 869b4cc commit f70ca4f005b83f6a9419edca9983da2dfa85cb9a
Showing with 332 additions and 2 deletions.
  1. +1 −0 .gitignore
  2. +249 −0 css/jquery.fancybox.css
  3. +3 −1 css/main.css
  4. +21 −1 index.html
  5. +45 −0 js/jquery.fancybox.pack.js
  6. +13 −0 js/jquery.mousewheel-3.0.6.pack.js
View
@@ -1,2 +1,3 @@
.DS_Store
_site
+.idea
View
@@ -0,0 +1,249 @@
+/*! fancyBox v2.1.3 fancyapps.com | fancyapps.com/fancybox/#license */
+.fancybox-wrap,
+.fancybox-skin,
+.fancybox-outer,
+.fancybox-inner,
+.fancybox-image,
+.fancybox-wrap iframe,
+.fancybox-wrap object,
+.fancybox-nav,
+.fancybox-nav span,
+.fancybox-tmp
+{
+ padding: 0;
+ margin: 0;
+ border: 0;
+ outline: none;
+ vertical-align: top;
+}
+
+.fancybox-wrap {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 8020;
+}
+
+.fancybox-skin {
+ position: relative;
+ background: #f9f9f9;
+ color: #444;
+ text-shadow: none;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+
+.fancybox-opened {
+ z-index: 8030;
+}
+
+.fancybox-opened .fancybox-skin {
+ -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+}
+
+.fancybox-outer, .fancybox-inner {
+ position: relative;
+}
+
+.fancybox-inner {
+ overflow: hidden;
+}
+
+.fancybox-type-iframe .fancybox-inner {
+ -webkit-overflow-scrolling: touch;
+}
+
+.fancybox-error {
+ color: #444;
+ font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
+ margin: 0;
+ padding: 15px;
+ white-space: nowrap;
+}
+
+.fancybox-image, .fancybox-iframe {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.fancybox-image {
+ max-width: 100%;
+ max-height: 100%;
+}
+
+#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
+ background-image: url('../img/fancybox_sprite.png');
+}
+
+#fancybox-loading {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ margin-top: -22px;
+ margin-left: -22px;
+ background-position: 0 -108px;
+ opacity: 0.8;
+ cursor: pointer;
+ z-index: 8060;
+}
+
+#fancybox-loading div {
+ width: 44px;
+ height: 44px;
+ background: url('../img/fancybox_loading.gif') center center no-repeat;
+}
+
+.fancybox-close {
+ position: absolute;
+ top: -18px;
+ right: -18px;
+ width: 36px;
+ height: 36px;
+ cursor: pointer;
+ z-index: 8040;
+}
+
+.fancybox-nav {
+ position: absolute;
+ top: 0;
+ width: 40%;
+ height: 100%;
+ cursor: pointer;
+ text-decoration: none;
+ background: transparent url('../img/blank.gif'); /* helps IE */
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ z-index: 8040;
+}
+
+.fancybox-prev {
+ left: 0;
+}
+
+.fancybox-next {
+ right: 0;
+}
+
+.fancybox-nav span {
+ position: absolute;
+ top: 50%;
+ width: 36px;
+ height: 34px;
+ margin-top: -18px;
+ cursor: pointer;
+ z-index: 8040;
+ visibility: hidden;
+}
+
+.fancybox-prev span {
+ left: 10px;
+ background-position: 0 -36px;
+}
+
+.fancybox-next span {
+ right: 10px;
+ background-position: 0 -72px;
+}
+
+.fancybox-nav:hover span {
+ visibility: visible;
+}
+
+.fancybox-tmp {
+ position: absolute;
+ top: -99999px;
+ left: -99999px;
+ visibility: hidden;
+ max-width: 99999px;
+ max-height: 99999px;
+ overflow: visible !important;
+}
+
+/* Overlay helper */
+
+.fancybox-lock {
+ overflow: hidden;
+}
+
+.fancybox-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ display: none;
+ z-index: 8010;
+ background: url('../img/fancybox_overlay.png');
+}
+
+.fancybox-overlay-fixed {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+}
+
+.fancybox-lock .fancybox-overlay {
+ overflow: auto;
+ overflow-y: scroll;
+}
+
+/* Title helper */
+
+.fancybox-title {
+ visibility: hidden;
+ font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
+ position: relative;
+ text-shadow: none;
+ z-index: 8050;
+}
+
+.fancybox-opened .fancybox-title {
+ visibility: visible;
+}
+
+.fancybox-title-float-wrap {
+ position: absolute;
+ bottom: 0;
+ right: 50%;
+ margin-bottom: -35px;
+ z-index: 8050;
+ text-align: center;
+}
+
+.fancybox-title-float-wrap .child {
+ display: inline-block;
+ margin-right: -100%;
+ padding: 2px 20px;
+ background: transparent; /* Fallback for web browsers that doesn't support RGBa */
+ background: rgba(0, 0, 0, 0.8);
+ -webkit-border-radius: 15px;
+ -moz-border-radius: 15px;
+ border-radius: 15px;
+ text-shadow: 0 1px 2px #222;
+ color: #FFF;
+ font-weight: bold;
+ line-height: 24px;
+ white-space: nowrap;
+}
+
+.fancybox-title-outside-wrap {
+ position: relative;
+ margin-top: 10px;
+ color: #fff;
+}
+
+.fancybox-title-inside-wrap {
+ padding-top: 10px;
+}
+
+.fancybox-title-over-wrap {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ color: #fff;
+ padding: 10px;
+ background: #000;
+ background: rgba(0, 0, 0, .8);
+}
View
@@ -114,4 +114,6 @@ body {
margin-top: -127px;
}
-/*div { border: 1px solid red; }*/
+#dialog-content {
+ display: none;
+}
View
@@ -15,6 +15,10 @@
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/h5bp.css">
<link rel="stylesheet" href="css/main.css">
+
+ <link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
+
+
</head>
<body>
<!--[if lt IE 7]>
@@ -33,7 +37,7 @@
<img src="img/ww2012.png" alt="Whisky Web 2012">
<span>Whisky Web 2012</span>
</a>
- <a href="#" title="">
+ <a href="#" title="" id="about-dialog-trigger">
<img src="img/about.png" alt="About The Event">
<span>About The Event</span>
</a>
@@ -42,14 +46,30 @@
<img class="twitter-image" src="img/twitter.png" alt="View WhiskWeb on Twitter">
</a>
</div>
+
+ <div id="dialog-content">
+ <h2>About Whisky Web II</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+ <script type="text/javascript" src="js/jquery.mousewheel-3.0.6.pack.js"></script>
+ <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
+
<script src="js/backstretch.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
+
$.backstretch("img/background.jpg");
+ $("#about-dialog-trigger").fancybox({
+ maxWidth: 700,
+ afterLoad: function() {
+ this.content = $('#dialog-content').html();
+ }
+ });
});
</script>
Oops, something went wrong.

0 comments on commit f70ca4f

Please sign in to comment.