ConLite/trunk/cms/templates/simple-gallery.html

137 Zeilen
Kein EOL
12 KiB
HTML

<script type="text/javascript">
//<![CDATA[
// Symbole fuer die Navigation (Bilder oder Zeichen)
var naviLeftSymbol{INSTANCE} = '&lt;';
var naviRightSymbol{INSTANCE} = '&gt;';
// Ab hier keine Aenderungen !!!
var numImages{INSTANCE} = {NUM_IMAGES};
var aImages{INSTANCE} = new Array({IMAGES_ARRAY});
var aThumbs{INSTANCE} = new Array();
{THUMBS_ARRAY}
var iThumbs{INSTANCE} = {THUMBS_PER_ARRAY};
var iArrays{INSTANCE} = {THUMB_ARRAYS};
var aPopups{INSTANCE} = new Array({POPUPS_ARRAY});
var aDescr{INSTANCE} = new Array({DESCR_ARRAY});
{PRELOAD_IMAGES}
function simpleGallery{INSTANCE}ShowImage(No) {
if ({USE_POPUP}) {
document.getElementById('SimpleGallery{INSTANCE}Image').innerHTML = '<' + 'a href="javascript:simpleGallery{INSTANCE}ShowImagePopup(' + No + ')"' + '>' + '<' + 'img src="' + aImages{INSTANCE}[(No - 1)] + '" alt="" /' + '>' + '<' + '/a' + '>';
document.getElementById('SimpleGallery{INSTANCE}PopupLink').setAttribute('onclick', 'simpleGallery{INSTANCE}ShowImagePopup(' + No + ')');
} else {
document.getElementById('SimpleGallery{INSTANCE}Image').innerHTML = '<' + 'img src="' + aImages{INSTANCE}[(No - 1)] + '" alt="" /' + '>';
}
document.getElementById('SimpleGallery{INSTANCE}ImageInfo').innerHTML = No + '/' + numImages{INSTANCE};
document.getElementById('SimpleGallery{INSTANCE}ImageDescription').innerHTML = aDescr{INSTANCE}[(No - 1)];
document.getElementById('SimpleGallery{INSTANCE}Navigation').innerHTML = '<' + 'a href="javascript:simpleGallery{INSTANCE}ShowImage(' + ((No == 1) ? numImages{INSTANCE} : (No - 1)) + ');"' + '>' + naviLeftSymbol{INSTANCE} + '<' + '/a' + '>' + '&nbsp;' + '<' + 'a href="javascript:simpleGallery{INSTANCE}ShowImage(' + ((No == numImages{INSTANCE}) ? 1 : (No + 1)) + ');"' + '>' + naviRightSymbol{INSTANCE} + '<' + '/a' + '>';
var ImgL = new Image(); ImgL.src = aPopups{INSTANCE}[(No - 1)];
}
var iCurrent = -1;
var iBlock = 0;
function simpleGallery{INSTANCE}ShowImagePopup(No) {
if (iCurrent == -1) {
setTimeout('simpleGallery{INSTANCE}PreloadLargeImages()', 2000);
}
if (iCurrent != No) {
iCurrent = No;
simpleGallery{INSTANCE}ShowThumbs(No);
document.getElementById('SimpleGallery{INSTANCE}ImageArea').innerHTML = '<'+'img src="' + aPopups{INSTANCE}[(No - 1)] + '" alt="" /' + '>';
document.getElementById('SimpleGallery{INSTANCE}DescriptionArea').innerHTML = aDescr{INSTANCE}[(No - 1)];
document.getElementById('SimpleGallery{INSTANCE}DarkBackground').style.display = 'block';
document.getElementById('SimpleGallery{INSTANCE}ImageWindow').style.display = 'block';
document.getElementById('SimpleGallery{INSTANCE}PopupImageNaviLeft').setAttribute('onclick', 'simpleGallery{INSTANCE}ShowImagePopup(' + ((No == 1) ? numImages{INSTANCE} : (No - 1)) + ')');
document.getElementById('SimpleGallery{INSTANCE}PopupImageNaviRight').setAttribute('onclick', 'simpleGallery{INSTANCE}ShowImagePopup(' + ((No == numImages{INSTANCE}) ? 1 : (No + 1)) + ')');
var ImgL0 = new Image(); ImgL0.src = aPopups{INSTANCE}[((No == 1) ? (numImages{INSTANCE} - 1) : (No - 2))];
var ImgL1 = new Image(); ImgL1.src = aPopups{INSTANCE}[((No == numImages{INSTANCE}) ? 1 : No)];
}
}
function simpleGallery{INSTANCE}CloseImagePopup() {
document.getElementById('SimpleGallery{INSTANCE}ImageWindow').style.display = 'none';
document.getElementById('SimpleGallery{INSTANCE}DarkBackground').style.display = 'none';
iCurrent = 0;
iBlock = 0;
}
function simpleGallery{INSTANCE}ShowThumbs(No) {
var iThumbsArrayNo = Math.ceil(No / iThumbs{INSTANCE});
var sThumbs = '';
iBlock = iThumbsArrayNo;
for (var i = 0; i < iThumbs{INSTANCE}; i ++) {
if (i < aThumbs{INSTANCE}[iThumbsArrayNo].length) {
sThumbs += '<' + 'div style="float: left; margin: 0px 1px; padding: 2px 2px 0px 2px; width: {THUMB_BLOCK_WIDTH}px; height: {THUMB_BLOCK_HEIGHT}px; text-align: center; border: 1px solid #' + (((i + ((iThumbsArrayNo - 1) * iThumbs{INSTANCE}) + 1) == No) ? '000' : 'FFF') + ';"' + '>' + '<' + 'a href="javascript:simpleGallery{INSTANCE}ShowImagePopup(' + (i + ((iThumbsArrayNo - 1) * iThumbs{INSTANCE}) + 1) + ')"' + '>' + '<' + 'img src="' + aThumbs{INSTANCE}[iThumbsArrayNo][i] + '" alt="" onmousemove="simpleGallery{INSTANCE}ShowImagePopup(' + (i + ((iThumbsArrayNo - 1) * iThumbs{INSTANCE}) + 1) + ')" style="width: 100px; height: 75px;" /' + '>' + '<' + '/a' + '>' + '<' + 'br /' + '>' + (((i + ((iThumbsArrayNo - 1) * iThumbs{INSTANCE}) + 1) == No) ? '<' + 'span style="line-height: 20px; background-color: #FFF;"' + '>' + '&nbsp;' + No + '/' + numImages{INSTANCE} : '') + '&nbsp;' + '<' + '/span' + '>' + '<' + '/div' + '>';
}
}
document.getElementById('SimpleGallery{INSTANCE}ThumbsAreaThumbs').innerHTML = sThumbs;
if (iThumbsArrayNo > 1) {
document.getElementById('SimpleGallery{INSTANCE}ThumbsAreaNaviLeft').innerHTML = '<' + 'a href="javascript:simpleGallery{INSTANCE}ShowImagePopup(' + ((iThumbs{INSTANCE} * iThumbsArrayNo) - iThumbs{INSTANCE}) + ')"' + '>' + '<' + 'img src="images/SimpleGallery/NaviLeft.png" alt="" /' + '>' + '<' + '/a' + '>';
} else {
document.getElementById('SimpleGallery{INSTANCE}ThumbsAreaNaviLeft').innerHTML = '<' + 'img src="images/SimpleGallery/NaviLeftDisabled.png" alt="" /' + '>';
}
if (iThumbsArrayNo < iArrays{INSTANCE}) {
document.getElementById('SimpleGallery{INSTANCE}ThumbsAreaNaviRight').innerHTML = '<' + 'a href="javascript:simpleGallery{INSTANCE}ShowImagePopup(' + ((iThumbs{INSTANCE} * iThumbsArrayNo) + 1) + ')"' + '>' + '<' + 'img src="images/SimpleGallery/NaviRight.png" alt="" /' + '>' + '<' + '/a' + '>';
} else {
document.getElementById('SimpleGallery{INSTANCE}ThumbsAreaNaviRight').innerHTML = '<' + 'img src="images/SimpleGallery/NaviRightDisabled.png" alt="" /' + '>';
}
}
function simpleGallery{INSTANCE}PreloadLargeImages() {
{PRELOAD_THUMB_IMAGES}
}
//]]>
</script>
<div id="SimpleGallery{INSTANCE}" class="SimpleGallery" style="width: {WIDTH}px;">
<div style="position: relative; margin: 0px 50px 10px 50px;">
<div id="SimpleGallery{INSTANCE}PopupLink" style="position: absolute;{SHOW_POPUP} width: {IMAGE_WIDTH}px; height: {IMAGE_HEIGHT}px; background: url('images/SimpleGallery/ZoomOverlay.png') center center no-repeat; opacity: 0; filter: alpha(opacity=0); transition: opacity 0.3s ease 0s; cursor: pointer;" onmouseover="this.style.opacity=1; this.style.filter='alpha(opacity=70)'; this.style.transition='opacity 0.5s ease 0s';" onmouseout="this.style.opacity=0; this.style.filter='alpha(opacity=0)'; this.style.transition='opacity 0.3s ease 0s';"></div>
<div id="SimpleGallery{INSTANCE}Image" class="SimpleGalleryImage"></div>
</div>
<div id="SimpleGallery{INSTANCE}ImageInfo" class="SimpleGalleryImageInfo" style="float: left;"></div>
<div id="SimpleGallery{INSTANCE}Navigation" class="SimpleGalleryNavigation" style="float: right;"></div>
<div id="SimpleGallery{INSTANCE}ImageDescription" class="SimpleGalleryImageDescription" style="margin: 0px 50px; padding-left: 4px; border-left: 1px solid #999;"></div>
<div style="clear: both;"></div>
</div>
<script type="text/javascript">
//<![CDATA[
simpleGallery{INSTANCE}ShowImage(1);
//]]>
</script>
<div id="SimpleGallery{INSTANCE}DarkBackground" onclick="simpleGallery{INSTANCE}CloseImagePopup();" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 200; display: none; background-color: #000; opacity: 0.6;"></div>
<div id="SimpleGallery{INSTANCE}ImageWindow" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 210; display: none; font-family: Arial, Verdana, sans-serif;">
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%; height: 100%;">
<tr><td onclick="simpleGallery{INSTANCE}CloseImagePopup();"></td></tr>
<tr valign="middle" style="height: 1%;">
<td onclick="simpleGallery{INSTANCE}CloseImagePopup();"></td>
<td align="center" style="width: 1%; background-color: transparent;">
<div style="display: inline-block; position: relative; width: {POPUP_WIDTH}px; text-align: left; color: #000; background-color: #FFF; border: 8px solid #FFF;">
<div style="position: absolute; top: -24px; right: -24px;">
<img src="images/SimpleGallery/ClosePopup.png" alt="Schlie&szlig;en" onclick="simpleGallery{INSTANCE}CloseImagePopup();" style="cursor: pointer;" />
</div>
<div style="float: left;">
<div>
<div style="position: relative; margin-bottom: 8px; width: {POPUP_IMAGE_WIDTH}px; height: {POPUP_IMAGE_HEIGHT}px; background: url('images/SimpleGallery/Loading.gif') center center no-repeat;">
<div style="position: absolute; width: {POPUP_IMAGE_WIDTH}px; height: {POPUP_IMAGE_HEIGHT}px; opacity: 0.5; filter: alpha(opacity=50); transition: opacity 0.3s ease 0s; cursor: pointer;" onmouseover="this.style.opacity=1; this.style.filter='alpha(opacity=70)'; this.style.transition='opacity 0.5s ease 0s';" onmouseout="this.style.opacity=0; this.style.filter='alpha(opacity=0)'; this.style.transition='opacity 0.3s ease 0s';">
<div id="SimpleGallery{INSTANCE}PopupImageNaviLeft" style="position: absolute; left: 0px; width: 50%; height: {POPUP_IMAGE_HEIGHT}px; background: url('images/SimpleGallery/PopupImageNaviLeft.png') center left no-repeat;"></div>
<div id="SimpleGallery{INSTANCE}PopupImageNaviRight" style="position: absolute; right: 0px; width: 50%; height: {POPUP_IMAGE_HEIGHT}px; background: url('images/SimpleGallery/PopupImageNaviRight.png') center right no-repeat;"></div>
</div>
<div id="SimpleGallery{INSTANCE}ImageArea"></div>
</div>
<div id="SimpleGallery{INSTANCE}ThumbsArea" style="width: {POPUP_IMAGE_WIDTH}px; height: 101px; overflow: hidden;">
<div id="SimpleGallery{INSTANCE}ThumbsAreaNaviLeft" style="float: left; padding: 39px 1px; width: 10px; height: 21px; border: 1px solid #CCC;"><img src="images/SimpleGallery/NaviLeftDisabled.png" alt="" /></div>
<div id="SimpleGallery{INSTANCE}ThumbsAreaNaviRight" style="float: right; padding: 39px 1px; width: 10px; height: 21px; border: 1px solid #CCC;"><img src="images/SimpleGallery/NaviRightDisabled.png" alt="" /></div>
<div id="SimpleGallery{INSTANCE}ThumbsAreaThumbs" style="padding: 2px 0px; height: 95px; font-size: 14px; border: 0px solid #CCC; border-width: 1px 0px;"></div>
<div style="clear: both;"></div>
</div>
</div>
</div>
<div style="float: right; margin-left: 8px; width: 220px;">
<div id="SimpleGallery{INSTANCE}DescriptionArea" class="SimpleGalleryDescriptionArea"></div>
</div>
<div style="clear: both;"></div>
</div>
</td>
<td onclick="simpleGallery{INSTANCE}CloseImagePopup();"></td>
</tr>
<tr><td onclick="simpleGallery{INSTANCE}CloseImagePopup();"></td></tr>
</table>
</div>