wieerwill/wieerwill.github.io
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

added nodejs-boilerplate; modalImgShow() fully integrated

Browse Source
This commit is contained in:
WieErWill 2020-03-30 11:28:48 +02:00
parent 06493f69a1
commit a0485a3f6c
2 changed files with 120 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
index.html
View File

@ -281,7 +281,7 @@
<div class="project row"> <div class="project row">
<div class="col-12 col-md-3"> <div class="col-12 col-md-3">
<h4>Projectmanagement</h4> <h4>Project management</h4>
</div> </div>
<div class="col-12 col-md-8"> <div class="col-12 col-md-8">
<p>Working with a team you get to know that nobody has that much of a overview what tools you can use to work and participate. This bilingual sheet is a short overview of tools and programms to make your cooperations and projects easier.</p> <p>Working with a team you get to know that nobody has that much of a overview what tools you can use to work and participate. This bilingual sheet is a short overview of tools and programms to make your cooperations and projects easier.</p>
@ -305,6 +305,19 @@
</div> </div>
<hr /> <hr />
<div class="project row">
<div class="col-12 col-md-3">
<h4> NodeJS Boilerplate</h4>
</div>
<div class="col-12 col-md-8">
<p> Start your NodeJS Project today with my simple but structured boilerplate. Don't get anything confused with this organized project map and documentation.</p>
</div>
<div class="col-12 col-md-1">
<a href="https://github.com/wieerwill/nodejs-boilerplate"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
</div>
</div>
<hr />
<div class="project row"> <div class="project row">
<div class="col-12 col-md-3"> <div class="col-12 col-md-3">
<h4> Discord Bot</h4> <h4> Discord Bot</h4>
@ -320,252 +333,258 @@
</div> </div>
<div class="certifications container my-5 pb-1 rounded"> <div class="certifications container my-5 pb-1 rounded">
<script>
function modalImg() {
modal.style.display = "block";
modalImg.src = this.src;
}
</script>
<h2 class="m-2 text-center bg-info text-dark rounded">Certifications</h2> <h2 class="m-2 text-center bg-info text-dark rounded">Certifications</h2>
<div class="m-auto "> <div class="m-auto ">
<!--adv--> <!--adv-->
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/adv/Full Stack Web Development.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/adv/Full Stack Web Development.jpg" class="lazy cert-img">
<div class="overlay">Full Stack WebDev</div> <div class="overlay">Full Stack WebDev</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/adv/CodeCamp-WebDesign.png" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/adv/CodeCamp-WebDesign.png" class="lazy cert-img">
<div class="overlay">Responsive WebDesign</div> <div class="overlay">Responsive WebDesign</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/adv/html5 champion.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/adv/html5 champion.jpg" class="lazy cert-img">
<div class="overlay">HTML 5 Champion</div> <div class="overlay">HTML 5 Champion</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/adv/SQL BI Analysis Advanced.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/adv/SQL BI Analysis Advanced.jpg" class="lazy cert-img">
<div class="overlay">Advanced SQL Analytics</div> <div class="overlay">Advanced SQL Analytics</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/adv/SQL BI Analysis.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/adv/SQL BI Analysis.jpg" class="lazy cert-img">
<div class="overlay">MySQl for Data Analysis</div> <div class="overlay">MySQl for Data Analysis</div>
</div> </div>
<!--web--> <!--web-->
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/Basic HTML.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Basic HTML.jpg" class="lazy cert-img">
<div class="overlay">Basic HTML</div> <div class="overlay">Basic HTML</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/CakePhp.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/CakePhp.jpg" class="lazy cert-img">
<div class="overlay">CakePhp</div> <div class="overlay">CakePhp</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/Dynamic Web Forms with validation.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Dynamic Web Forms with validation.jpg" class="lazy cert-img">
<div class="overlay">Dynamic Web Forms with validation</div> <div class="overlay">Dynamic Web Forms with validation</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/GitHub Grundlagen.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/GitHub Grundlagen.jpg" class="lazy cert-img">
<div class="overlay">GitHub Grundlagen</div> <div class="overlay">GitHub Grundlagen</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/HTML 5.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/HTML 5.jpg" class="lazy cert-img">
<div class="overlay">HTML 5</div> <div class="overlay">HTML 5</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/html boot camp.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/html boot camp.jpg" class="lazy cert-img">
<div class="overlay">HTML Bootcamp</div> <div class="overlay">HTML Bootcamp</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/HTML Web Development Crash Course.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/HTML Web Development Crash Course.jpg" class="lazy cert-img">
<div class="overlay">Web Development Crash Course</div> <div class="overlay">Web Development Crash Course</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/html5 and css3.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/html5 and css3.jpg" class="lazy cert-img">
<div class="overlay">HTML5 and CSS3</div> <div class="overlay">HTML5 and CSS3</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/InfiniteScroll AJAX MySQL API PHP jQuery.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/InfiniteScroll AJAX MySQL API PHP jQuery.jpg" class="lazy cert-img">
<div class="overlay">InfiniteScroll AJAX</div> <div class="overlay">InfiniteScroll AJAX</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/Landing Page Hacks.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Landing Page Hacks.jpg" class="lazy cert-img">
<div class="overlay">Landing Page Hacks</div> <div class="overlay">Landing Page Hacks</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/Learn HTML5 and CSS3 By Coding Your First Website.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Learn HTML5 and CSS3 By Coding Your First Website.jpg" class="lazy cert-img">
<div class="overlay">HTML5 and CSS3 by Coding</div> <div class="overlay">HTML5 and CSS3 by Coding</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/Learn HTML5.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Learn HTML5.jpg" class="lazy cert-img">
<div class="overlay">Learn HTML5</div> <div class="overlay">Learn HTML5</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/Make Ecommerce Website Front-End.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Make Ecommerce Website Front-End.jpg" class="lazy cert-img">
<div class="overlay">Make Ecommerce Website Front-End</div> <div class="overlay">Make Ecommerce Website Front-End</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/PHP&MySQL.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/PHP&MySQL.jpg" class="lazy cert-img">
<div class="overlay">PHP&MySQL</div> <div class="overlay">PHP&MySQL</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/PSD Frontend.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/PSD Frontend.jpg" class="lazy cert-img">
<div class="overlay">PSD Frontend</div> <div class="overlay">PSD Frontend</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/Telegram Bot with Python.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Telegram Bot with Python.jpg" class="lazy cert-img">
<div class="overlay">Telegram Bot with Python</div> <div class="overlay">Telegram Bot with Python</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-01.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-01.jpg" class="lazy cert-img">
<div class="overlay">XHTML-01</div> <div class="overlay">XHTML-01</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-02.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-02.jpg" class="lazy cert-img">
<div class="overlay">XHTML-02</div> <div class="overlay">XHTML-02</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-03.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-03.jpg" class="lazy cert-img">
<div class="overlay">XHTML-03</div> <div class="overlay">XHTML-03</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-04.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-04.jpg" class="lazy cert-img">
<div class="overlay">XHTML-04</div> <div class="overlay">XHTML-04</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-05.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-05.jpg" class="lazy cert-img">
<div class="overlay">XHTML-05</div> <div class="overlay">XHTML-05</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-06.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-06.jpg" class="lazy cert-img">
<div class="overlay">XHTML-06</div> <div class="overlay">XHTML-06</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-07.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-07.jpg" class="lazy cert-img">
<div class="overlay">XHTML-07</div> <div class="overlay">XHTML-07</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/web/Yii PHP Framework.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Yii PHP Framework.jpg" class="lazy cert-img">
<div class="overlay">Yii PHP Framework</div> <div class="overlay">Yii PHP Framework</div>
</div> </div>
<!--other--> <!--other-->
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/other/Amazon FBA.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Amazon FBA.jpg" class="lazy cert-img">
<div class="overlay">Amazon FBA</div> <div class="overlay">Amazon FBA</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/other/ebay dropshipping.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/ebay dropshipping.jpg" class="lazy cert-img">
<div class="overlay">eBay Dropshipping</div> <div class="overlay">eBay Dropshipping</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/other/Exel 2010 Productivity.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Exel 2010 Productivity.jpg" class="lazy cert-img">
<div class="overlay">Exel 2010 Productivity</div> <div class="overlay">Exel 2010 Productivity</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/other/Godot Game Engine.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Godot Game Engine.jpg" class="lazy cert-img">
<div class="overlay">Godot Game Engine</div> <div class="overlay">Godot Game Engine</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/other/Google Sheets.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Google Sheets.jpg" class="lazy cert-img">
<div class="overlay">Google Sheets</div> <div class="overlay">Google Sheets</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/other/GoogleDocs.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/GoogleDocs.jpg" class="lazy cert-img">
<div class="overlay">GoogleDocs</div> <div class="overlay">GoogleDocs</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/other/Grundlagen Vermögensverwaltung - Kapitalaufbau.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Grundlagen Vermögensverwaltung - Kapitalaufbau.jpg" class="lazy cert-img">
<div class="overlay">Grundlagen Vermögensverwaltung</div> <div class="overlay">Grundlagen Vermögensverwaltung</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/other/Landschaftsfotografie.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Landschaftsfotografie.jpg" class="lazy cert-img">
<div class="overlay">Landschaftsfotografie</div> <div class="overlay">Landschaftsfotografie</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/other/Microsoft Exel Pivot.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Microsoft Exel Pivot.jpg" class="lazy cert-img">
<div class="overlay">Microsoft Exel Pivot</div> <div class="overlay">Microsoft Exel Pivot</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/other/Startup & Business.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Startup & Business.jpg" class="lazy cert-img">
<div class="overlay">Startup & Business</div> <div class="overlay">Startup & Business</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/other/VsCode Hacks.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/VsCode Hacks.jpg" class="lazy cert-img">
<div class="overlay">Visual Studio Code Hacks</div> <div class="overlay">Visual Studio Code Hacks</div>
</div> </div>
<!--robotic--> <!--robotic-->
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Robocup_2014.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Robocup_2014.jpg" class="lazy cert-img">
<div class="overlay">Robocup 2014</div> <div class="overlay">Robocup 2014</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Robocup_2015.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Robocup_2015.jpg" class="lazy cert-img">
<div class="overlay">Robocup 2015</div> <div class="overlay">Robocup 2015</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Robocup_2016.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Robocup_2016.jpg" class="lazy cert-img">
<div class="overlay">Robocup 2016</div> <div class="overlay">Robocup 2016</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Robotik.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Robotik.jpg" class="lazy cert-img">
<div class="overlay">Robotik</div> <div class="overlay">Robotik</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Seminar_Mechatronik.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Seminar_Mechatronik.jpg" class="lazy cert-img">
<div class="overlay">Mechatronik Seminar</div> <div class="overlay">Mechatronik Seminar</div>
</div> </div>
<!--newspaper--> <!--newspaper-->
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/newspaper/JPK-146-München.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/newspaper/JPK-146-München.jpg" class="lazy cert-img">
<div class="overlay">146. Jugend Presse Kongress</div> <div class="overlay">146. Jugend Presse Kongress</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/newspaper/JPK-150-Münster.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/newspaper/JPK-150-Münster.jpg" class="lazy cert-img">
<div class="overlay">150. Jugend Presse Kongress</div> <div class="overlay">150. Jugend Presse Kongress</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left" onclick="myModalShowImg(this)">
<img src="icons/placeholder.gif" data-src="Zertifikate/newspaper/MultimediaWorkshop-Weimar.jpg" class="lazy cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/newspaper/MultimediaWorkshop-Weimar.jpg" class="lazy cert-img">
<div class="overlay">Multimedia Workshop</div> <div class="overlay">Multimedia Workshop</div>
</div> </div>

8
js/cert.js
View File

@ -2,13 +2,13 @@
var modal = document.getElementById("myModal"); var modal = document.getElementById("myModal");
var modalImg = document.getElementById("modalImage1"); var modalImg = document.getElementById("modalImage1");
function modalImg() { function myModalShowImg(picture) {
modal.style.display = "block"; modal.style.display = "block";
modalImg.src = this.src; modalImg.src = picture.getElementsByClassName("cert-img")[0].src;
} }
// When the user clicks on <span> (x), close the modal // When the user clicks on <span> (x) or the picture, close the modal
var span = document.getElementsByClassName("close")[0]; var span = document.getElementsByClassName("close")[0] && document.getElementsByClassName("modal-content")[0];
span.onclick = function () { span.onclick = function () {
modal.style.display = "none"; modal.style.display = "none";
}; };