<script src="/scripts/nPrism.js"></script><div class="left"><h3><strong>Background</strong>.</h3><p>In general terms the WYSIWYG editor accepts most HTML; JavaScripts and CSS. This means that you can do a lot of exciting stuff if you code your pages (and headers) manually as you will not be restricted by the functionality of the editor.</p><p>Of course the process will be more time consuming and harder to maintain. But if the content is (almost) static it's a one time job...<br /><br />The internet contains a lot of resources for learning about HTML; JavaScript and Cascading Style Sheets.<br /><br />An excellent place to start is here:<br />Read more about HTML; JavaScript and CSS on <a href="https://w3schools.com" target="_blank" title="Visit w3schools.com i a new window/tab...">w3schools.com</a>.<br /><br /><br />Have fun playin' with code <img alt=":-)" height="23" src="/images/adm/smileys/regular_smile.png" title=":-)" width="23" /></p></div><div class="main"><h2>Example: How to make a slideshow in a header.</h2><p>The slideshow contains three elements:<br /> - Some <strong>HTML </strong>code.<br /> - Some <strong>JavaScript</strong>;<br /> - Some <strong>Styles</strong>;</p><p>Take a look at the below <strong>HTML </strong>and <strong>JavaScript </strong>code.<br />Switch the WYSIWYG editor to "Source Mode" and copy and paste the code into a new header.</p><p>You can see the result in the header of this page:<br />A slide show containing four images that changes every 5.000 millisecond = 5 seconds with a fade duration a 2.5 seconds.</p><div><pre><code class="language-javascript"><div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 4</div> <img src="https://casacalma.greenroad.dk/images/casacalma/headers/headerSouthVegetation.jpg" style="width:100%; max-height: 180px;" /> <div class="text">For&aring;rudsigt fra terrassen</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 4</div> <img src="https://casacalma.greenroad.dk/images/casacalma/headers/headerMaroma.jpg" style="width:100%; max-height: 180px;" /> <div class="text">Bjerget Maroma mod nord</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 4</div> <img src="https://casacalma.greenroad.dk/images/casacalma/headers/headerSouthOct.jpg" style="width:100%; max-height: 180px;" /> <div class="text">Efter&aring;rssolen mod syd</div> </div> <div class="mySlides fade"> <div class="numbertext">4 / 4</div> <img src="https://casacalma.greenroad.dk/images/casacalma/headers/headerSunsetSouth01.jpg" style="width:100%; max-height: 180px;" /> <div class="text">Solnedgang mod vest</div> </div></div><div style="text-align:center; padding-top:8px;"> <span class="dot">&nbsp;</span> <span class="dot">&nbsp;</span> <span class="dot">&nbsp;</span> <span class="dot">&nbsp;</span> </div><script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active"; ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides; 5000); }</script></code></pre></div><p> </p><p>After copying the code to your new header you need some <strong>styling</strong>:<br />Open the <u>Style Assistant</u> and add the following <strong>Custom class</strong>:</p><pre><code class="language-css">* {box-sizing: border-box;}body {font-family: Verdana; sans-serif;}.mySlides {display: none;}img {vertical-align: middle;}/* Slideshow container */.slideshow-container { max-width: 1920px; position: relative; margin: auto;}/* Caption text */.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center;}/* Number text (1/4 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}/* The dots/bullets/indicators */.dot { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 2s ease;}.active { background-color: #717171;}/* Fading animation */.fade { -webkit-animation-name: fade; -webkit-animation-duration: 2.5s; animation-name: fade; animation-duration: 2.5s;}@-webkit-keyframes fade { from {opacity: .2} to {opacity: 1}}@keyframes fade { from {opacity: .2} to {opacity: 1}}</code></pre><p>Play with the HTML; JavaScript and CSS values in the code. You can vary the number of images by inserting HTML-elements in the "slideshow-container" <div> tag. The captions; the duration/fade and the colors and sizes can also be manipulated by the code.<br /><br />As the above code is just a mix of HTML; JavaScript and CSS you can easily append it. If you for example want one of the images to be a clickable link with a ToolTip simply surround the image tag <img src="https://casacalma.greenroad.dk/images/..."> with a href tag like:<br /><span style="font-family:Courier New;Courier;monospace;"><strong><a href="https://google.com" title="Search on Google"></strong><br /> <img src="https://casacalma.greenroad.dk/images/...jpg" style="width:100%; max-height: 180px;" /><br /><strong></a></strong></span><br />and the image will now be an active link.<br /><br />The same way you can make the image corners rounded simply by adding a style attribute:<br /><span style="font-family:Courier New;Courier;monospace;"><img src="https://casacalma.greenroad.dk/images/...jpg" style="width:100%; max-height: 180px; <strong>border-radius:16px</strong>;" /></span></p></div>
Last updated 23-05-2020 18:19:00