Vor kurzem habe ich für einen Kunde ein altes Script von mir etwas modifiziert und aufgepeppelt.
-- Das Script veröffentlicht bei jedem Klick auf einer Flagge einen neuen Spruch,
-- und zwar in unterschiedlichen Sprachen (Deutsch, Niederländisch, Englisch, Französisch).
-- Client-side wird etwas HTML, CSS und javascript kombiniert.
-- Server-side wird mittels PHP über eine QUERY eine MYSQL Database involviert.
-- Bei jedem klick auf einer Flagge gibt es auch noch einen "Fade-In" Effekt.
-- Einen neuen Spruch mit Fade-In Effekt gibt es auch wenn die Seite komplett neu geladen/refreshed wird.
-- Das Script holt sich die Sprüche aus einer Database mit pro Sprache mehr als 400 Sprüche.
-- Diese Database wird von mir ständig gepflegt und war, ist und bleibt online zu Verfügung stehen,
-- genau so wie die 4 PHP-Scripte die sich die Sprüche aus der Database holen.
Das Script ist funktionierend zu sehen:
-- auf dieser Homepage ...
-- auf dieser Codepen Seite ...
Wer möchte, darf dieses Script für eigene Zwecke nutzen.
<style>
.manquo {
text-align: center;
margin-bottom: 10px !important;
font-size: 115%;
font-weight: bold;
font-family: Verdana;
color: #BC401E;
}
iframe {
width: 230px;
// margin: 0 auto;
display: block;
margin-left: -10px;
}
.stretch {
display: flex;
width: 190px;
margin: 0 auto;
}
.stretch {
flex:1;
margin-left: 0px;
}
.flag {
width: 44px;
height: 26px;
margin-bottom: 6px;
margin-right: 7px;
cursor: pointer;
border: 3px solid #5A5A5A;
border-radius: 5px;
}
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
@keyframes fadeIn {
0% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes fadeIn {
0% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes fadeIn {
0% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes fadeIn {
0% { opacity:0; }
100% { opacity:1; }
}
@-ms-keyframes fadeIn {
0% { opacity:0; }
100% { opacity:1; }
</style>
<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>
<script type="text/javascript">
// this function decides which quote is shown on page load //
$(function() {
setTimeout(function() {
$("#img3").trigger('click');
},5);
});
$(function quote(){
$('#img1').click(function(){
if(!$('#iframe1').length) {
$('#iframeHolder').html('<iframe id="iframe1" class="fade-in" src="./viewquotes_NL 2020-09-26.php" frameborder="0" scrolling="no" ></iframe>');
} else { $('#iframeHolder').html('<iframe id="iframe1" class="fade-in" src="./viewquotes_NL 2020-09-26.php" frameborder="0" scrolling="no" ></iframe>');
}
});
});
$(function quote(){
$('#img2').click(function(){
if(!$('#iframe2').length) {
$('#iframeHolder').html('<iframe id="iframe2" class="fade-in" src="./viewquotes_EN 2020-09-26.php" frameborder="0" scrolling="no" ></iframe>');
} else { $('#iframeHolder').html('<iframe id="iframe1" class="fade-in" src="./viewquotes_EN 2020-09-26.php" frameborder="0" scrolling="no" ></iframe>');
}
});
});
$(function quote(){
$('#img3').click(function(){
if(!$('#iframe3').length) {
$('#iframeHolder').html('<iframe id="iframe3" class="fade-in" src="./viewquotes_DE 2020-09-26.php" frameborder="0" scrolling="no" ></iframe>');
} else { $('#iframeHolder').html('<iframe id="iframe1" class="fade-in" src="./viewquotes_DE 2020-09-26.php" frameborder="0" scrolling="no" ></iframe>');
}
});
});
$(function quote(){
$('#img4').click(function(){
if(!$('#iframe4').length) {
$('#iframeHolder').html('<iframe id="iframe4" class="fade-in" src="./viewquotes_FR 2020-09-26.php" frameborder="0" scrolling="no" ></iframe>');
} else { $('#iframeHolder').html('<iframe id="iframe1" class="fade-in" src="./viewquotes_FR 2020-09-26.php" frameborder="0" scrolling="no" ></iframe>');
}
});
});
</script>
<div class="manquo">Management Quotes</div>
<div class="stretch">
<img id="img3" class="flag" src="./MDE.jpg" />
<img id="img2" class="flag" src="./MUK.jpg" />
<img id="img1" class="flag" src="./MNL.jpg" />
<img id="img4" class="flag" src="./MFR.jpg" />
</div>
<div id="iframeHolder"></div>