QT Tool

QuellText Tool & HTML Testbox

 
*
*
 

bbCodes CSS3 Premium Spoiler und Youtube Deluxe

__ " " Spielereien mit Custom bbCodes
Hausordnung
Auch Gäste können hier gerne Beiträge verfassen.
Unpassende Beiträge werden kommentarlos entfernt.

bbCodes CSS3 Premium Spoiler und Youtube Deluxe

Beitragvon Gürteltier » So 16. Mär 2014, 14:18

Hi,

für Web-Technik-Verwöhnte heute mal etwas Verspieltes.
Verblüffend für Eure User kommen ein Spoiler bbCode und ein YouTube bbCode daher.

So, nun zum Einbau.

Vorbereitende Änderungen am CSS werden hierzu benötigt.

Öffnen bei prosilver-basierten Styles: styles/*/theme/colours.css

Öffnen bei subsilver-basierten Styles: styles/*/theme/stylesheet.css

Am Ende einfügen Folgendes in neuer leerer Zeile am Ende des Dokumentes einfügen
Code: Alles auswählen
/* FlowBox 1.0 by Guerteltietr */
.flowbox {
position:absolute;
    width: 40%;
    background-color:white;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    height: auto;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 10px 10px 2em black, 7px 7px 10em gray;
    opacity: 0;
    filter:alpha(opacity=0);
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -khtml-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -0-transition: all 1s linear;
    transition: all 1s linear;
}

.
flowbox:hover {
    position:absolute;
    width: 70%;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:-4em;
    z-index:44;
    opacity: 1;
    filter:alpha(opacity=100);
    height: auto;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -khtml-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -0-transition: all 1s linear;
    transition: all 1s linear;
}

.
flowspoil {
    transition-property: width,background;
    transition-duration: 2s,1s;
    -moz-transition-property: width,background;
    -moz-transition-duration: 2s,1s;
    -o-transition-property: width,background;
    -o-transition-duration: 2s,1s;
    -webkit-transition-property: width,background;
    -webkit-transition-duration: 2s,1s;
    -khtml-transition-property: width,background;
    -khtml-transition-duration: 2s,1s;
    width: 11em;
    padding: 0.4em;
    background: linear-gradient(top, orange, red);
    background: -khtml-linear-gradient(top, orange, red);
    background: -webkit-gradient(linear, left top, left bottom, from(orange), to(red));
    background: -moz-linear-gradient(top,  orange,  red);
    background: -o-linear-gradient (top, orange, red);
    background: linear-gradient(to bottom, orange, red);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='orange', endColorstr='red');
    color: white;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 2px 2px 2px gray;
}

.
flowspoil a {
    text-decoration: none;
    color: white;
}

.
flowspoil:hover {
    width: 13em;
}

.
flowspoil:hover a {
    text-decoration: underline;
    color: white;


Danach noch zwei Icons per FTP in folgenden Ordner laden: */images/ (der Ordner ist standardmäßig im Forumroot vorhanden)

Bild und Bild

So, jetzt ist es soweit, dass Ihr nur noch bbCodes im ACP anlegen müsst:

1) Für den Spoiler:

Nutzung:
Code: Alles auswählen
[spoiler]{TEXT}[/spoiler]
(Benennung wie immer freie Auswahl)

HTML-Ersetzung:
Code: Alles auswählen
<dl>
<
dt class="flowspoil"> 
<a href="javascript:void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = 'Spoiler deaktivieren'; } else { spoiler.style.display = 'none'; this.innerHTML = 'Spoiler aktivieren'; };">Spoiler aktivieren</a>
</
dt>
<
dd style="display:none">
<
div style="position:absolute;margin-top:-2em;margin-left:30%;">
<
img src="images/icon_down.png" alt="*" title="Zeige mit der Maus in den Bereich unterhalb dieses Pfeils" />
</
div>
<
div class="flowbox">{TEXT}</div>
</
dd>
</
dl>

Hilfetext:
Code: Alles auswählen
Beliebige Beitragsteile erst nach Aktivierung animiert anzeigbar machen - Nutzung [spoiler] beliebige Beitragsinhalte [/spoiler]

Anzeigen: Ja

Demo:

Spoiler aktivieren
*
1) Für den Spoiler:

Nutzung:
Code: Alles auswählen
[spoiler]{TEXT}[/spoiler]
(Benennung wie immer freie Auswahl)

HTML-Ersetzung:
Code: Alles auswählen
<dl>
<
dt class="flowspoil"> 
<a href="javascript:void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = 'Spoiler deaktivieren'; } else { spoiler.style.display = 'none'; this.innerHTML = 'Spoiler aktivieren'; };">Spoiler aktivieren</a>
</
dt>
<
dd style="display:none">
<
div style="position:absolute;margin-top:-2em;margin-left:30%;">
<
img src="images/icon_down.png" alt="*" title="Zeige mit der Maus in den Bereich unterhalb dieses Pfeils" />
</
div>
<
div class="flowbox">{TEXT}</div>
</
dd>
</
dl>

Hilfetext:
Code: Alles auswählen
Beliebige Beitragsteile erst nach Aktivierung animiert anzeigbar machen - Nutzung [spoiler] beliebige Beitragsinhalte [/spoiler]

Anzeigen: Ja



2) bbCode YouTube im Premium Viewer mit API-Thumbnailvorschau:

Nutzung: [tubeviewer]{INTTEXT}[/tubeviewer] (Auch hier Benennung nach Belieben)

HTML-Ersetzung:
Code: Alles auswählen
<dl>
<
dt class="flowspoil" style="margin-bottom:4px;"> 
<a href="javascript:void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = 'YouTube deaktivieren'; } else { spoiler.style.display = 'none'; this.innerHTML = 'YouTube aktivieren'; };">YouTube aktivieren</a>
</
dt>
<
dt>
<
img src="http://i1.ytimg.com/vi/{INTTEXT}/default.jpg" alt="*" title="YouTube Video in FlowBox" style="box-shadow:2px 2px 2px gray;border-radius:4px;float:left;margin-right:4px;margin-bottom:4px;" />
<
img src="images/youtube_icon.gif" alt="*" title="YouTube Video in FlowBox" style="margin-top:2px;" />
</
dt>
<
dd style="display:none;"><div style="position:absolute;margin-top:-2em;margin-left:30%;"><img src="images/icon_down.png" alt="*" title="Zeige mit der Maus in den Bereich unterhalb dieses Pfeils" /></div>
<
div class="flowbox" style="text-align:center;">    
<object type="application/x-shockwave-flash" height="480" width="814" data="https://www.youtube-nocookie.com/v/{INTTEXT}?hl=en_US&amp;autoplay=1&amp;fs=1&amp;iv_load_policy=3&amp;rel=0" style="border-radius:8px;box-shadow:2px 2px 3em gray;">
<
param name="movie" value="https://www.youtube-nocookie.com/v/{INTTEXT}?hl=en_US&amp;autoplay=1&amp;fs=1&amp;iv_load_policy=3&amp;rel=0" />
<
param name="wmode" value="opaque" />
</
object>
</
div>
</
dd>
</
dl

Hilfetext:
Code: Alles auswählen
YouTube Premium Viewer - Nutzung [tubeviewer] Video-ID [/tubeviewer] - Beispiel: [tubeviewer]a7IePrNbZbI[/tubeviewer]

Anzeigen: Ja

Besonderheit: Im Beitrag wird aus der YouTube-API zunächst nur ein dem Video entsprechendes Vorschau-Thumb geladen.
Das Video selbst wird erst nach Aktivierung und Hover geladen, was bei mehreren Videos auf einer Seite die Forum-Performance wesentlich verbessert.


Demo :

YouTube aktivieren
* *
*




Theme(s) im ACP refreshen - fertig - nun können Eure User ein beeindruckendes Multimediaspektakel entfachen :ugeek:

Hier noch die genutzten Grafiken:
Dateianhänge

Nicht umbenennen ,-)
youtube_icon.gif (1.82 KiB) 1009-mal angesehen

*

Nicht umbenennen ,-)
icon_down.png (850 Bytes) 1009-mal angesehen

*
<"}))}~
__"_"___________________________________________do not feed___________________________________________/*
  • BenutzeravatarBenutzeravatar

Gürteltier

Administrator
 
Beiträge: 149
Registriert: Fr 3. Mai 2013, 19:29
Wohnort: An der Ostsee

> bbCodes CSS3 Premium Spoiler und Youtube Deluxe

Beitragvon Gürteltier » So 16. Mär 2014, 14:20

Hier noch ein paar Tests mit verschiedenen Inhalten und in Kombination mit weiteren bbCodes:

viewtopic.php?-meine-flowbox-als-spoiler-livetest-f=2&t=23



Verwendung auf "normaler" HomePage: http://bild4.bplaced.net/flowbox/
<"}))}~
__"_"___________________________________________do not feed___________________________________________/*
  • BenutzeravatarBenutzeravatar

Gürteltier

Administrator
 
Beiträge: 149
Registriert: Fr 3. Mai 2013, 19:29
Wohnort: An der Ostsee


Zurück zu <"}))}~ Custom bbCodes

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste

cron