Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages » Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps » Kleine Iconbar in der Bildergalerie!
#1 Kleine Iconbar in der Bildergalerie! von Wolfgang
30.01.2017 16:18
Kleine Iconbar in der Bildergalerie!
Aktualisiert 05.09.18
Oft ist es von Vorteil, wenn die Bild-Beschreibungen in der Bildergalerie, einen wichtigen und informativen Eindruck hinterlassen.
Darum ist es um so schöner, wenn man hier und da mit Leichtigkeit einige optischen Veränderungen oder Anpassung über die Iconbar ausführen kann.
Einbauanleitung für eine kleine Iconbar in der Bild-Beschreibung:
• Die Iconbar ist nach belieben anzupassen und erweiterbar!
• Sie klappt nach oben hin auf, um nicht das Textfeld zu verdecken!
• Es lassen sich verschiedene Schriftfarbe, Schriftformatierungen, Verlinkungen und präformatierten Text erstellen!
• Die Iconbar wird in der Bildvorschau und in der Bildansicht eingeblendet!
• Kann hier in der Bildergalerie getestet werden!
• "Admin > Template Entwicklung > [edit] > Bildergalerie - Dialoge (bearbeiten, neu) " aufrufen.
• Zeile 1-12 nach folgender Befehlszeile eintragen:
<script language="javascript" src="{{link_gallery_js}}" type="text/javascript"></script>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript" >miranus_add_iconbar_textarea('editdesc');</script>
<script type="text/javascript">
function hide_tab(tab){
document.getElementById(tab).style.display = 'none';
}
function show_tab(tab){
document.getElementById(tab).style.display = 'block';
}
</script>
<style type="text/css">.iconbar_main div{float:left;}</style>
• Zeile 1-48 nach folgender Befehlszeile eintragen:
<strong>Beschreibung:</strong>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!-- Menü für die Farben -->
<div class="iconbar_main" style="display: inline;">
<div style="position:absolute;right:80px;margin-top:-22px;z-index:3;" onMouseOut="hide_tab('tab_farbe_t')" onmouseover="show_tab('tab_farbe_t');this.style.cursor='pointer';">
<img src="https://img.homepagemodules.de/ds/static/gaia/color3.png" alt="" border=0 height="20px">
<div id="tab_farbe_t" style="display: none; position: absolute; margin-left:-170px; margin-top:-47px;background-color: white; padding:2px;width:190px; border:1px solid #777777;border-radius:5px;">
<div style="padding:3px;"><a title="Rot" href="javascript:insert('[style=color: #800033]','[/style]')"><img border="0" src="https://img.homepagemodules.de/ds/static/colors/rot_15.gif"></a></div>
<div style="padding:3px;"><a title="Blau" href="javascript:insert('[style=color: #778899]','[/style]')"><img border="0" src="https://img.homepagemodules.de/ds/static/colors/blau_15.gif"></a></div>
<div style="padding:3px;"><a title="Grün" href="javascript:insert('[style=color: #00C000]','[/style]')"><img border="0" src="https://img.homepagemodules.de/ds/static/colors/gruen_15.gif"></a></div>
<div style="padding:3px;"><a title="Orange" href="javascript:insert('[style=color: #FF8000]','[/style]')"><img border="0" src="https://img.homepagemodules.de/ds/static/colors/orange_15.gif"></a></div>
<div style="padding:3px;"><a title="Violett" href="javascript:insert('[style=color: #8A0886]','[/style]')"><img border="0" src="https://img.homepagemodules.de/ds/static/colors/lila_15.gif"></a></div>
<div style="padding:3px;"><a title="Weiß" href="javascript:insert('[style=color: #ffffff]','[/style]')"><img border="0" src="https://img.homepagemodules.de/ds/static/colors/weiss_15.gif"></a></div>
<div style="padding:3px;"><a title="Schwarz" href="javascript:insert('[style=color: #000000]','[/style]')"><img border="0" src="https://img.homepagemodules.de/ds/static/colors/schwarz_15.gif"></a></div>
</div>
</div>
<div style="clear:both"></div>
</div>
<!-- Ende Menü -->
<!-- Menü für die Formatierung -->
<div class="iconbar_main" style="display: inline;">
<div style="position:absolute;right:50px;margin-top:-22px;z-index:3;" onMouseOut="hide_tab('tab_format')" onmouseover="show_tab('tab_format');this.style.cursor='pointer';">
<img src="https://files.homepagemodules.de/b104774/bhnetfiles-kr03-13-a577.png" alt="" border=0 height="20px">
<div id="tab_format" style="display: none; position: absolute; margin-left:-320px; margin-top:-50px;background-color: white; padding: 2px 0 2px 0; width:350px; border:1px solid #777777;border-radius:5px;">
<div style="padding:3px;"><a title="Fett" href="javascript:insert('[b]','[/b]')"><img border="0" src="https://img.homepagemodules.de/ds/static/gaia/bold.png"></a></div>
<div style="padding:3px;"><a title="Kursiv" href="javascript:insert('[i]','[/i]')"><img border="0" src="https://img.homepagemodules.de/ds/static/gaia/italic.png"></a></div>
<div style="padding:3px;"><a title="Unterstrichen" href="javascript:insert('[u]','[/u]')"><img border="0" src="https://img.homepagemodules.de/ds/static/gaia/underline.png"></a></div>
<div style="padding:3px;"><a title="Schrift kleiner" href="javascript:insert('[small]','[/small]')"><img border="0" src="https://img.homepagemodules.de/ds/static/gaia/edit-size-down.png"></a></div>
<div style="padding:3px;"><a title="Schrift größer" href="javascript:insert('[big]','[/big]')"><img border="0" src="https://img.homepagemodules.de/ds/static/gaia/edit-size-up.png"></a></div>
<div style="padding:3px;"><a title="Trennlinie" href="javascript:insert('[hr]')"><img border="0" src="https://img.homepagemodules.de/ds/static/gaia/ui-splitter-horizontal.png"></a></div>
<div style="padding:3px;"><a title="Linksbündig" href="javascript:insert('[left]','[/left]')"><img border="0" src="https://files.homepagemodules.de/b104774/a_25_cf4cb81b.png"></a></div>
<div style="padding:3px;"><a title="Rechtsbündig" href="javascript:insert('[right]','[/right]')"><img border="0" src="https://files.homepagemodules.de/b104774/a_25_cf4cb81b.png"></a></div>
<div style="padding:3px;"><a title="Zentriert" href="javascript:insert('[center]','[/center]')"><img border="0" src="https://files.homepagemodules.de/b104774/a_26_e839435e.png"></a></div>
<div style="padding:3px;"><a title="Blocksatz" href="javascript:insert('[justify]','[/justify]')"><img border="0" src="https://files.homepagemodules.de/b104774/a_28_c9551495.png"></a></div>
<div style="padding:3px;"><a title="Präformatierter Text" href="javascript:insert('[pre]','[/pre]')"><img border="0" src="https://img.homepagemodules.de/ds/static/gaia/pre.png"></a></div>
</div>
</div>
<div style="clear:both"></div>
</div>
<!-- Ende Menü -->
• "Admin > Template Entwicklung > [edit] > Bildergalerie - Bild anzeigen " aufrufen.
• Zeile 1 nach folgender Befehlszeile eintragen:
<script language="javascript" src="{{link_gallery_usertag_js}}" type="text/javascript"></script>1
<script type="text/javascript" >miranus_add_iconbar_textarea('editdesc');</script>
Wichtiger Link aus dem Forum:
Bis dann, viel Erfolg beim Einbau und
Wolfgang