coderkun/questlab
1
0
Fork 0
Code Issues 15 Pull requests Projects Releases Wiki Activity

1) move JavaScript-code to scripts.js

Browse source 
2) add image sources for Questtext images
This commit is contained in:
oliver 2015-08-21 10:25:47 +02:00
parent 443ddc343a
commit 21444a6047
4 changed files with 109 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
views/html/html.tpl
View file

@ -18,26 +18,7 @@
<script type="text/javascript" src="<?=$linker->link(array('js','jquery-ui.min.js'))?>"></script>
<script type="text/javascript" src="<?=$linker->link(array('js','jquery.nicescroll.min.js'))?>"></script>
<script type="text/javascript" src="<?=$linker->link(array('js','ol.js'))?>"></script>
<script type="text/javascript">
$(document).ready(
function() {
$(".qtextbox").niceScroll({autohidemode:false,cursorcolor:"#c2beb9"});
}
);
</script>
<script src="/js/imagelightbox.min.js"></script>
<script type="text/javascript">
$( function()
{
$( 'a' ).imageLightbox();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() { $(".notify").fadeOut(1500); }, 5000);
$('body').click(function() { $(".notify").fadeOut(200); });
});
</script>
<script type="text/javascript" src="<?=$linker->link(array('js','imagelightbox.min.js'))?>"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>

22
views/html/quests/quest.tpl
View file

@ -19,7 +19,16 @@
<?php foreach($questtexts['Prolog'] as &$questtext) : ?>
<p class="qtext cf">
<?php if(array_key_exists('media', $questtext)) : ?>
<a href="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url']))?>"><img src="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url'], 'quest'))?>" /></a>
<a href="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url']))?>">
<img src="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url'], 'quest'))?>" />
</a>
<?php if(!empty($questtext['media']['sourceurl'])) : ?>
<span class="source">
<a href="<?=$questtext['media']['sourceurl']?>" target="_blank" title="<?=_('Image source')?>" rel="nofollow">
<i class="fa fa-external-link"></i>
</a>
</span>
<?php endif ?>
<?php elseif(!is_null($media) && !$mediaShown) : ?>
<?php $mediaShown = true; ?>
<a href="<?=$linker->link(array('media','seminary',$seminary['url'],$media['url']))?>"><img src="<?=$linker->link(array('media','seminary',$seminary['url'],$media['url'],'quest'))?>" /></a>
@ -85,7 +94,16 @@
<?php foreach($questtexts['Epilog'] as &$questtext) : ?>
<p class="qtext cf">
<?php if(array_key_exists('media', $questtext)) : ?>
<a href="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url']))?>"><img src="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url'],'quest'))?>" /></a>
<a href="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url']))?>">
<img src="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url'],'quest'))?>" />
</a>
<?php if(!empty($questtext['media']['sourceurl'])) : ?>
<span class="source">
<a href="<?=$questtext['media']['sourceurl']?>" target="_blank" title="<?=_('Image source')?>" rel="nofollow">
<i class="fa fa-external-link"></i>
</a>
</span>
<?php endif ?>
<?php endif ?>
<?=str_replace('<p>', '', str_replace('</p>', '', $t->t($questtext['text'])))?>
</p>

2
www/css/desktop.css
View file

@ -129,8 +129,10 @@ aside{display:none}
.qtextbox{font-size:.875em;border-radius:5px;background:#fff;border:15px solid #fff;max-height:200px;overflow:hidden}
.qtext{padding-right:15px}
.qtext img,.grpqimg{float:right;margin-left:15px;max-width:30%;max-height:200px;border-radius:3px}
.qtext .source{display:none}
#imagelightbox{cursor:pointer;position:fixed;z-index:10000;-ms-touch-action:none;touch-action:none;-webkit-box-shadow:0 0 3.125em rgba( 0, 0, 0, .75 ); -moz-box-shadow:0 0 3.125em rgba( 0, 0, 0, .75 );box-shadow:0 0 3.125em rgba( 0, 0, 0, .75 )}
#imagelightbox-caption{position:fixed;z-index:10001}
.xpinfo{display:none}
.xpbar{width:60%;float:left;height:10px;position:relative;background:#eee;border-radius:25px;margin:8px 0 16px}

87
www/js/scripts.js
View file

@ -130,7 +130,92 @@ function notify()
/**
* Image lightbox functions
*/
/**
* Show caption for image.
*/
function captionOn()
{
var description = $('a[href="' + $('#imagelightbox').attr('src') + '"] ~ span.source');
var div = $('<div id="imagelightbox-caption"></div>');
if(description.size() > 0)
{
description.first().clone().appendTo(div);
div.appendTo('body');
//$('<div id="imagelightbox-caption">' + description + '</div>' ).appendTo('body');
}
captionResize();
setTimeout(captionResize, 255);
}
/**
* Position caption.
*/
function captionResize()
{
var lightbox = $('#imagelightbox');
var caption = $('#imagelightbox-caption');
if(lightbox.size() > 0 && caption.size() > 0)
{
var right = $(window).width() - lightbox.position().left - lightbox.width();
var bottom = $(window).height() - lightbox.position().top - lightbox.height();
caption.css('right', right+'px');
caption.css('bottom', bottom+'px');
}
}
/**
* Remove caption.
*/
function captionOff()
{
$('#imagelightbox-caption').remove();
}
/**
* Start up
*/
$(function() {
// Play notification
// Add image lightbox
$('a').imageLightbox({
animationSpeed: 250,
onLoadStart: function() {
captionOff();
},
onLoadEnd: function() {
captionOn();
},
onEnd: function() {
captionOff();
}
});
// Position caption
$(window).on('resize', function() {
setTimeout(captionResize, 10);
});
// Add scroll
$(".qtextbox").niceScroll({
autohidemode:false,
cursorcolor:"#c2beb9"
});
// Notification
notify();
setTimeout(
function() {
$(".notify").fadeOut(1500);
},
5000
);
$('body').click(function() {
$(".notify").fadeOut(200);
});
});