|
|
| (20 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| | <html> | | <html> |
| − |
| |
| − | <!-- UPWARDS BLOB JQUERY -->
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − | // The upwards-blob div is defined in Freiburg/CSS as its absolute position should be initialized on the top of the page
| |
| − |
| |
| − | $(document).ready(function(){
| |
| − | var $blob = $("#upwards_blob"),
| |
| − | $window = $(window),
| |
| − | $pageheight = $(document).height() - $window.height();
| |
| − |
| |
| − | console.log('pageheight:'+$pageheight);
| |
| − | console.log('windowwidth:'+$window.width());
| |
| − | console.log('windowheight:'+$window.height());
| |
| − |
| |
| − | $(window).scroll(function(event) {
| |
| − | console.log($(this).scrollTop()+' pageheight:'+$pageheight);
| |
| − |
| |
| − | // y is scroll progress (distance from top)
| |
| − | // top is abbout bottomline of window
| |
| − | var y = $(this).scrollTop(),
| |
| − | top = $(this).scrollTop() + $window.height() -100;
| |
| − |
| |
| − | // use CSS transform to move button into view when user scrolls down
| |
| − | if (y > 60 ) {
| |
| − | //console.log('right out');
| |
| − | $blob.css({"transform": "translateX(-130px)"}); // = 30 px inside right
| |
| − | }
| |
| − |
| |
| − | // move blob out of view when page is scrolled up again
| |
| − | if (y < 60) {
| |
| − | //console.log('right in');
| |
| − | $blob.css({"transform": "translateX(0)"}); // = 100 px outside
| |
| − | }
| |
| − |
| |
| − | // offset of the button on the bottom of the page depends on the background image and thus the page-width
| |
| − | // for pages smaller than 1143 px the button disappears by media queries (found in Freiburg/CSS)
| |
| − | if ($window.width() < 1320) {
| |
| − | if (y > ($pageheight - 100)) {
| |
| − | // blob stays 100px above bottom
| |
| − | //console.log("y 100 up");
| |
| − | } else {
| |
| − | //console.log('y in window');
| |
| − | $blob.css({"top": top });
| |
| − | }
| |
| − | } else if ($window.width() > 1320) {
| |
| − | if (y > ($pageheight - 500)) {
| |
| − | //console.log("y 500 up");
| |
| − | } else {
| |
| − | //console.log('y in window');
| |
| − | $blob.css({"top": top });
| |
| − | }
| |
| − | }
| |
| − | });
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − | <!-- LIGHTBOX EFFECT -->
| |
| − | <!-- from http://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528 -->
| |
| − | <style>
| |
| − |
| |
| − | #lightbox {
| |
| − | position:fixed; /* keeps the lightbox window in the current viewport */
| |
| − | top:0;
| |
| − | left:0;
| |
| − | width:100%;
| |
| − | height:100%;
| |
| − | background: rgba(0,0,0,.7);
| |
| − | text-align:center;
| |
| − | z-index: 9999;
| |
| − | }
| |
| − |
| |
| − | #lightbox p {
| |
| − | text-align:right;
| |
| − | color:#fff;
| |
| − | margin-right:20px;
| |
| − | font-size:12px;
| |
| − | }
| |
| − |
| |
| − | #lightbox img {
| |
| − | box-shadow:0 0 25px #111;
| |
| − | -webkit-box-shadow:0 0 25px #111;
| |
| − | -moz-box-shadow:0 0 25px #111;
| |
| − | max-width:940px;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − | $(document).ready(function(){
| |
| − | $('.lightbox_trigger').click(function(event) {
| |
| − |
| |
| − | //prevent default action (hyperlink)
| |
| − | event.preventDefault();
| |
| − |
| |
| − | //Get clicked link href
| |
| − | var image_href = $(this).attr("href");
| |
| − | console.log(image_href)
| |
| − |
| |
| − | /*
| |
| − | If the lightbox window HTML already exists in document,
| |
| − | change the img src to to match the href of whatever link was clicked
| |
| − |
| |
| − | If the lightbox window HTML doesn't exists, create it and insert it.
| |
| − | (This will only happen the first time around)
| |
| − | */
| |
| − |
| |
| − | if ($('#lightbox').length > 0) { // #lightbox exists
| |
| − |
| |
| − | //place href as img src value
| |
| − | $('#lightboxcontent').html('<img src="' + image_href + '" />');
| |
| − |
| |
| − | //show lightbox window - you could use .show('fast') for a transition
| |
| − | $('#lightbox').show('fast');
| |
| − | }
| |
| − |
| |
| − | else { //#lightbox does not exist - create and insert (runs 1st time only)
| |
| − |
| |
| − | //create HTML markup for lightbox window
| |
| − | var lightbox =
| |
| − | '<div id="lightbox">' +
| |
| − | '<p>Click to close</p>' +
| |
| − | '<div id="lightboxcontent">' + //insert clicked link's href into img src
| |
| − | '<img src="' + image_href +'" />' +
| |
| − | '</div>' +
| |
| − | '</div>';
| |
| − |
| |
| − | //insert lightbox HTML into page
| |
| − | $('body').append(lightbox);
| |
| − | }
| |
| − |
| |
| − | });
| |
| − |
| |
| − | //Click anywhere on the page to get rid of lightbox window
| |
| − | $('body').on('click', '#lightbox', function() { //must use live, as the lightbox element is inserted into the DOM
| |
| − | // as live is deprecated, use on
| |
| − | $('#lightbox').hide();
| |
| − | });
| |
| − |
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − |
| |
| | | | |
| | <div class="content_background_wrapper"> | | <div class="content_background_wrapper"> |
