Difference between revisions of "Template:Freiburg/wiki content start"

Line 23: Line 23:
 
</style>
 
</style>
  
 +
<!-- 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>
  
 
<script>
 
<script>

Revision as of 17:08, 7 September 2015