mirror of
https://github.com/skoelle/moonweb-site.git
synced 2026-09-17 17:00:25 +00:00
Add PHOBIA and TranceMission archives as standalone sites with passthrough copy
This commit is contained in:
@@ -48,6 +48,10 @@ module.exports = function (eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy("retro/mega-st-high/*.jpg");
|
||||
eleventyConfig.addPassthroughCopy("retro/mistery-core/*.jpg");
|
||||
|
||||
// Standalone demo group archives (static HTML)
|
||||
eleventyConfig.addPassthroughCopy("phobia/**");
|
||||
eleventyConfig.addPassthroughCopy("tcm/**");
|
||||
|
||||
// Root-level shared assets
|
||||
eleventyConfig.addPassthroughCopy({ "shared/base.css": "shared-base.css" });
|
||||
eleventyConfig.addPassthroughCopy({ "shared/favicon/hub.svg": "favicon.svg" });
|
||||
|
||||
Executable
+268
@@ -0,0 +1,268 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PHOBIA DemoGroup Archive - Nostalgic PC Intros from 1994</title>
|
||||
<meta name="description" content="Explore the PHOBIA DemoGroup Archive, showcasing the 1994 PC intros, including the notable Phobia Welcome Intro. Relive the early days of PC intros with source code and more.">
|
||||
<link rel="canonical" href="https://www.moonweb.org/phobia/" />
|
||||
<style>
|
||||
body {
|
||||
background-color: #1a1a1a;
|
||||
margin: 0;
|
||||
color: #f0f0f0;
|
||||
font-family: 'Arial', sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #000071;
|
||||
padding-top:5px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.header img {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.header a {
|
||||
margin: 0 15px;
|
||||
color: #518DAF;
|
||||
text-decoration: none;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.header a:hover {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 40px;
|
||||
}
|
||||
.program {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.program-image {
|
||||
flex: 1 1 150px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.program-image img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.program-description {
|
||||
margin-top: 10px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.program-info {
|
||||
flex: 2 1 300px;
|
||||
}
|
||||
.program-info h2 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.footer {
|
||||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: #333;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
.program-info h2 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.header img {
|
||||
width: 100%;
|
||||
}
|
||||
.content {
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
}
|
||||
.program {
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
}
|
||||
.program-image {
|
||||
margin-right: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.program-info {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
th {
|
||||
text-align:left;
|
||||
}
|
||||
a {
|
||||
color:#00A6FF;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.lightbox-content {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
}
|
||||
.lightbox-content iframe {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function openLightbox() {
|
||||
document.getElementById('lightbox').style.display = 'flex';
|
||||
document.getElementById('video').src = 'https://www.youtube.com/embed/Cj3RgjVs5dk?autoplay=1';
|
||||
}
|
||||
|
||||
function closeLightbox(event) {
|
||||
if (event.target.id === 'lightbox' || event.target.className === 'close') {
|
||||
document.getElementById('lightbox').style.display = 'none';
|
||||
document.getElementById('video').src = '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a href="index.html">
|
||||
<img src="phobialogo.png" alt="PHOBIA">
|
||||
</a>
|
||||
</div>
|
||||
<div class="content">
|
||||
|
||||
<div class="welcome">
|
||||
<h1>Welcome to the PHOBIA DemoGroup Archive</h1>
|
||||
|
||||
<p>This site showcases the releases from my DemoGroup, PHOBIA. Although PHOBIA existed only briefly on the PC in 1994, it made a notable impact with its focus on PC intros. The highlight of our work was the major release, the Phobia Welcome Intro.</p>
|
||||
<p>Feel free to explore and enjoy the nostalgia of the early days of PC intros.</p>
|
||||
<p>Best regards, Stefan Koelle</p>
|
||||
</div>
|
||||
|
||||
<div class="program">
|
||||
<div class="program-image">
|
||||
<img src="welcomeintro.png" alt="Program 1 Image" onclick="openLightbox()">
|
||||
<div class="program-description">
|
||||
<p><b>Phobia Welcome Intro</b></p>
|
||||
<p><a href="#" onclick="openLightbox()">YouTube Video of the Intro</a></p>
|
||||
<p><a href="https://github.com/skoelle/dos-phobia-welcome-intro" target="_blank">Github Sourcecode</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="program-info">
|
||||
<h2>Phobia Welcome Intro</h2>
|
||||
<p>The Phobia Welcome Intro was programmed in 1994 using Turbo Pascal, with inline assembler for the graphics routines. The idea for this intro was inspired by an Amiga demo, though the specific name of the demo has been forgotten. All graphics and programming were done by Stefan Koelle on a 486 DX50 DOS PC.</p>
|
||||
<p>This intro utilized an early version of the X-LIB unit, specifically the TextGraf.pas, which was also developed by Stefan Koelle. The source code for the intro is available on GitHub. The primary technique used in this intro to create the illusion of movement was through color palette changes, rather than altering the pixels on the screen.</p>
|
||||
<p>The music for the intro was borrowed from an old Amiga demo and played using a public Mod-Player. The font used in the intro was custom-created and compiled into the executable as an object, along with the music and graphics.</p>
|
||||
|
||||
<h2>Key Details:</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Feature</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Programming Language</td>
|
||||
<td>Turbo Pascal with inline assembler</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Year</td>
|
||||
<td>1994</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Developer</td>
|
||||
<td>Stefan Koelle</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Development Machine</td>
|
||||
<td>486 DX50 DOS PC</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Graphics Technique</td>
|
||||
<td>Color palette changes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Music Source</td>
|
||||
<td>Old Amiga demo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Music Player</td>
|
||||
<td>Public Mod-Player</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Custom Font</td>
|
||||
<td>Compiled into the executable as an object</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Graphics Library</td>
|
||||
<td>Early version of X-LIB unit (TextGraf.pas)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Source Code</td>
|
||||
<td>Available on GitHub <a href="https://github.com/skoelle/dos-phobia-welcome-intro" target="_blank">https://github.com/skoelle/dos-phobia-welcome-intro</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="program">
|
||||
<div class="program-image">
|
||||
<img src="program2.jpg" alt="Program 2 Image">
|
||||
<div class="program-description">
|
||||
<p><b>Program 2</b></p>
|
||||
<p>Kurze Beschreibung des zweiten Programms.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="program-info">
|
||||
<h2>Program 2 Information</h2>
|
||||
<p>Hier steht der Infotext zum zweiten Programm. Dieser Text enthält detaillierte Informationen über das Programm, seine Funktionen und andere relevante Details.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="program">
|
||||
<div class="program-image">
|
||||
<img src="program3.jpg" alt="Program 3 Image">
|
||||
<div class="program-description">
|
||||
<p><b>Program 3</b></p>
|
||||
<p>Kurze Beschreibung des dritten Programms.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="program-info">
|
||||
<h2>Program 3 Information</h2>
|
||||
<p>Hier steht der Infotext zum dritten Programm. Dieser Text enthält detaillierte Informationen über das Programm, seine Funktionen und andere relevante Details.</p>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="footer">
|
||||
PHOBIA website - initially created November 1999 - code from 1994 - Stefan Koelle
|
||||
</div>
|
||||
<div id="lightbox" class="lightbox" onclick="closeLightbox(event)">
|
||||
<div class="lightbox-content">
|
||||
<span class="close" onclick="closeLightbox()">×</span>
|
||||
<iframe id="video" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -106,6 +106,12 @@ sections:
|
||||
- title: "💻 The 486 DX2-66"
|
||||
summary: "Rebuilding a DOS era from memory on MiSTer FPGA, recreating the environment the way it felt back then."
|
||||
href: "/retro/dos-486-tower/"
|
||||
- title: "👾 PHOBIA DemoGroup Archive"
|
||||
summary: "The PHOBIA DemoGroup Archive, showcasing 1994 PC intros including the Phobia Welcome Intro, written in Turbo Pascal."
|
||||
href: "/phobia/"
|
||||
- title: "🎵 TranceMission Archive"
|
||||
summary: "TranceMission demos and intros from 1992-1995, programmed in Turbo Pascal with assembler on DOS PCs."
|
||||
href: "/tcm/"
|
||||
- heading: "Overview"
|
||||
cards:
|
||||
- title: "🏠 The Retro Corner Today"
|
||||
|
||||
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 691 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 681 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 732 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 711 B |
Executable
+279
@@ -0,0 +1,279 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TranceMission Archive - Pascal PC Intros from 1992-1995 - Graphics, Animation, and Sound</title>
|
||||
<meta name="description" content="Explore three Pascal demo programs showcasing graphics, animation, and sound capabilities using Turbo Pascal and assembler. Learn about text and graphics animation, sound integration, and user interaction in Pascal programming.">
|
||||
<link rel="canonical" href="https://www.moonweb.org/tcm/" />
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
color: #FFF741;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 18px; /* Schriftgröße des Textes */
|
||||
}
|
||||
.container {
|
||||
text-align: center;
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
.logo {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.intro {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.program {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.screenshots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.screenshots a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.screenshots img {
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
}
|
||||
.youtube-logo {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
a {
|
||||
color: #E76D00;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
a:hover {
|
||||
color: #CB4D00;
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* Lightbox CSS */
|
||||
.lightbox {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
padding-top: 60px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.9);
|
||||
}
|
||||
.lightbox-content {
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
height: 450px;
|
||||
}
|
||||
.lightbox-close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 35px;
|
||||
color: #f1f1f1;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.lightbox-close:hover,
|
||||
.lightbox-close:focus {
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
table {
|
||||
border:0px;
|
||||
border-color:#000000;
|
||||
}
|
||||
th {
|
||||
text-align:left;
|
||||
}
|
||||
td {
|
||||
text-align:left;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#logo {
|
||||
width:100%
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img id="logo" src="logo.png" alt="TranceMission Logo">
|
||||
</div>
|
||||
<div class="intro">
|
||||
<p>TranceMission is a group known for creating demos and intros, primarily in the early 1990s. These demos often showcased advanced graphics, sound, and programming techniques using Turbo Pascal and assembler. The group was led by Stefan Koelle, who was responsible for coding, graphics, and music. TranceMission's work was characterized by creative animations, sound effects, and interactive elements, making them a notable name in the demo scene of that era. Their productions were designed to run on DOS-based PCs, often pushing the hardware capabilities of the time.</p>
|
||||
<p>Sourcecode can be found on GitHub <a href="https://github.com/skoelle/dos-tcm-intros" target="_blank">https://github.com/skoelle/dos-tcm-intros</a>.</p>
|
||||
</div>
|
||||
<div class="program">
|
||||
<img src="headline-star-intro.png" alt="Star Intro">
|
||||
<div class="screenshots">
|
||||
<a href="star-intro.png" onclick="openLightbox('star-intro.png'); return false;"><img src="star-intro.png" alt="Screenshot 1"></a>
|
||||
<a href="https://www.youtube.com/embed/qdtqDdSPuG8?autoplay=1" onclick="openLightboxVideo(this.href); return false;">
|
||||
<img src="https://img.youtube.com/vi/qdtqDdSPuG8/hqdefault.jpg" alt="Video Thumbnail">
|
||||
<img src="play.png" alt="YouTube Logo" class="youtube-logo">
|
||||
</a>
|
||||
</div>
|
||||
<p>This Pascal program is a demo that displays animated stars and text on the screen, along with playing sound effects.
|
||||
<table>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Initialization</td>
|
||||
<td>Sets up graphics mode and clears the screen.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Text Display</td>
|
||||
<td>Uses <code>writeline</code> procedure to display text.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Animation</td>
|
||||
<td>Animates stars moving across the screen.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sound</td>
|
||||
<td>Plays sound if a SoundBlaster card is detected.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>User Interaction</td>
|
||||
<td>Waits for a key press to exit the demo.</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="program">
|
||||
<img src="headline-logo-intro.png" alt="Logo Intro">
|
||||
<div class="screenshots">
|
||||
<a href="logo-intro2.png" onclick="openLightbox('logo-intro2.png'); return false;"><img src="logo-intro2.png" alt="Screenshot 1"></a>
|
||||
<a href="logo-intro.png" onclick="openLightbox('logo-intro.png'); return false;"><img src="logo-intro.png" alt="Screenshot 2"></a>
|
||||
<a href="https://www.youtube.com/embed/i4UOuAOxkn4?autoplay=1" onclick="openLightboxVideo(this.href); return false;">
|
||||
<img src="https://img.youtube.com/vi/i4UOuAOxkn4/hqdefault.jpg" alt="Video Thumbnail">
|
||||
<img src="play.png" alt="YouTube Logo" class="youtube-logo">
|
||||
</a>
|
||||
</div>
|
||||
<p>This Pascal program is a demo that displays animated text and graphics with sound effects.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Initialization</td>
|
||||
<td>Sets up graphics mode and clears the screen.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Text Display</td>
|
||||
<td>Uses <code>writeline</code> and <code>writeline2</code> procedures to display text.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Animation</td>
|
||||
<td>Animates text using a sine wave effect. Speed is controlled by 'S' and 'A' keys.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sound</td>
|
||||
<td>Plays sound if a SoundBlaster card is detected. Volume is controlled by '+' and '-' keys.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>User Interaction</td>
|
||||
<td>Responds to key presses and exits on ESC, Enter, or Space key.</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="program">
|
||||
<img src="headline-menu-intro.png" alt="Menu Intro">
|
||||
<div class="screenshots">
|
||||
<a href="menu-intro1.png" onclick="openLightbox('menu-intro1.png'); return false;"><img src="menu-intro1.png" alt="Screenshot 1"></a>
|
||||
<!--<a href="menu-intro2.png" onclick="openLightbox('menu-intro2.png'); return false;"><img src="menu-intro2.png" alt="Screenshot 2"></a>-->
|
||||
<a href="menu-intro3.png" onclick="openLightbox('menu-intro3.png'); return false;"><img src="menu-intro3.png" alt="Screenshot 3"></a>
|
||||
<a href="https://www.youtube.com/embed/BvKIsfDLH48?autoplay=1" onclick="openLightboxVideo(this.href); return false;">
|
||||
<img src="https://img.youtube.com/vi/BvKIsfDLH48/hqdefault.jpg" alt="Video Thumbnail">
|
||||
<img src="play.png" alt="YouTube Logo" class="youtube-logo">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<p>This Pascal program is a demo that displays a menu with animated text and graphics, along with playing sound effects.
|
||||
<table>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Initialization</td>
|
||||
<td>Sets up graphics mode and clears the screen.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Text Display</td>
|
||||
<td>Uses <code>writeline</code> procedure to display text.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Animation</td>
|
||||
<td>Animates a logo and text with a wobble effect.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sound</td>
|
||||
<td>Plays sound if a SoundBlaster card is detected.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>User Interaction</td>
|
||||
<td>Allows navigation through a menu using the keyboard and exits the demo on specific key presses.</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<p>Stefan Koelle 1992 - 1995</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lightbox HTML -->
|
||||
<div id="lightbox" class="lightbox" onclick="closeLightbox(event)">
|
||||
<span class="lightbox-close" onclick="closeLightbox()">×</span>
|
||||
<img class="lightbox-content" id="lightbox-img" src="">
|
||||
<iframe class="lightbox-content" id="lightbox-video" width="560" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openLightbox(src) {
|
||||
document.getElementById('lightbox-img').src = src;
|
||||
document.getElementById('lightbox-img').style.display = 'block';
|
||||
document.getElementById('lightbox-video').style.display = 'none';
|
||||
document.getElementById('lightbox').style.display = 'block';
|
||||
}
|
||||
|
||||
function openLightboxVideo(src) {
|
||||
document.getElementById('lightbox-video').src = src;
|
||||
document.getElementById('lightbox-video').style.display = 'block';
|
||||
document.getElementById('lightbox-img').style.display = 'none';
|
||||
document.getElementById('lightbox').style.display = 'block';
|
||||
}
|
||||
|
||||
function closeLightbox(event) {
|
||||
if (event.target.id === 'lightbox' || event.target.className === 'lightbox-close') {
|
||||
document.getElementById('lightbox').style.display = 'none';
|
||||
document.getElementById('lightbox-video').src = '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 661 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Reference in New Issue
Block a user