find-templates

Medienbox

zurück zur Übersicht

Mediabox für Bilder, Videos oder Seiten:



Ohne Javascript. Die Überschriften im Menü können entfernt werden.
Foto-Größe hier 440 x 300 Pixel. Es können auch Youtube-Videos eingefügt werden.
Vorteil: Seiteninhalt wird kurz gehalten und langes scrollen somit vermieden.





Schritt 1: HTML-Code der Box

Die Buttons bieten keinen Platz für lange Titel. Infotexte zum Bild platzieren wir im Tooltip-Fenster.
Die gewünschte Info zum Bild wird bei Mauskontakt sichtbar (Fahre mit der Maus über die Buttons).
Einfügen im Seiteninhalt: Dazu im Editor (Werkzeugleiste) oben Links auf "Quellcode" klicken

<div class="mediabox">
<div class="box_menu">
<ul>
<li>Titel Sylt</li>
<li> <a class="button tooltip" href="Grafik_1.jpg" target="inline">Bild 01<span>Tooltip 1</span></a></li>
<li> <a class="button tooltip" href="Grafik_2.jpg" target="inline">Bild 02<span>Tooltip 2</span></a></li>
<li> <a class="button tooltip" href="Grafik_3.jpg" target="inline">Bild 03<span>Tooltip 3</span></a></li>
<li> <a class="button tooltip" href="Grafik_4.jpg" target="inline">Bild 04<span>Tooltip 4</span></a></li>
<li> <a class="button tooltip" href="Grafik_5.jpg" target="inline">Bild 05<span>Tooltip 5</span></a></li>
<li> <a class="button tooltip" href="Grafik_6.jpg" target="inline">Bild 06<span>Tooltip 6</span></a></li>
<li> <a class="button tooltip" href="Grafik_7.jpg" target="inline">Bild 07<span>Tooltip 7</span></a></li>
<li> <a class="button tooltip" href="Grafik_8.jpg" target="inline">Bild 08<span>Tooltip 8</span></a></li>
</ul>
</div>

<div class="bild">
<iframe width="440" height="300" name="inline" src="Grafik_1.jpg" frameborder="0" scrolling="no" 
marginheight="0" marginwidth="0">
</iframe>
</div>
</div>

Die Grafik_X.jpg ersetze durch die https://img.webme.com/pic/....../name.jpg Grafikadresse
Ersetze Tooltip X durch gewünschten Info-Text zum Bild.

Schritt 2: Der CSS Code für das Aussehen

Den CSS-Code kannst Du ebenfalls im Seiteninhalt einfügen, am besten über dem 1. Code

<style type="text/css">
<!--

.mediabox {
  width: 540px;
  padding: 15px 20px 15px 15px;
  overflow: hidden;
  background: linear-gradient(to bottom, #FFFFFF, #e6E6E1); 
  border: 1px solid #c9c9c9;
  border-radius: 10px; }

/* Feld mit Menü */
.box_menu {
  color: #000;
  float: left;
  width: 80px;
  text-align: left; }

.box_menu ul {margin-left: 0px!important; list-style-type: none!important; }

/* Button Abstände */
.box_menu ul li{ padding: 2px 0px 3px 0px;}

/* Feld mit Bild */
.bild {
  width: 440px!important;
  height: 300px;
  margin-top: 5px;
  float: right;
  border: 1px solid #c9c9c9;
  background-color: #FFF; }

/* User mit Design Clean benötigen diese Codezeile dazu */
#main iframe {width: 440px !important; }

/* Tooltip Fenster */
.tooltip { font-size: 14px;color: white;text-decoration: none;}
.tooltip span {
  width: 170px; 
  position: absolute;
  text-align: left;
  color: #FFFFFF;
  padding: 10px 10px 10px 15px;
  margin-top: -30px;
  background-color: #343434;
  border-radius: 15px 15px 15px 0px;
  box-shadow: 1px 1px 10px #aaaaaa;
  visibility: hidden; }

.tooltip:hover span { visibility: visible; z-index:102;}

/* User mit Design Clean benötigen die folgenden Codes NICHT */
.button{
  width: 50px;
  height:15px!important;
  line-height: 15px;
  color:#343434!important;
  background: #F5F5F5;
  background: -moz-linear-gradient(#FFFFFF, #D6D6D6);
  background: -o-linear-gradient(#FFFFFF, #D6D6D6);
  background: -webkit-linear-gradient(#FFFFFF, #D6D6D6);
  background: linear-gradient(to bottom, #FFFFFF, #D6D6D6);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #c9c9c9;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
  display: inline-block;
  font-size: 14px;
  margin-bottom: 0;
  padding: 4px 12px;
  text-align: center; }

.button:hover{
  background-color: #d6d6d6;
  background: -moz-linear-gradient(#D6D6D6, #FFFFFF);
  background: -o-linear-gradient(#D6D6D6, #FFFFFF);
  background: -webkit-linear-gradient(#D6D6D6, #FFFFFF);
  background: linear-gradient(to bottom, #D6D6D6, #FFFFFF);
  color: #333333;
  text-decoration: none;}

-->
</style>


Youtube-Videos einfügen:

Füge statt einer Grafikadresse einfach die Video-Adresse ein.

- auf www.youtube.de
- suche gewünschtes Video aus
- unter dem Video auf "Teilen"
- dann auf "Einbetten"
- es wird ein <iframe - Code angezeigt
- kopiere aus dem <iframe - Code nur die http://..... heraus !

Die Video-Adresse oben aus dem Browser-Fenster funktioniert nicht.
Es muss der Video-Link aus dem <iframe-Code sein




Heute: 12 Besucher