Kleine Iconbar in der Bildergalerie!

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

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!

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie. Wasserstoff - Energietr�ger der Zukunft. Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Elektronik & Elektrotechnik - Fragen & Antworten Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschl�ge. Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit. Alles, was noch so �brig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | Kleine Iconbar in der Bildergalerie! datum

30.01.2017 16:18 (zuletzt bearbeitet: 17.01.2025 10:51)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3591
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1460

Kleine Iconbar in der Bildergalerie!
Aktualisiert 16.01.2025

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.

Installation erstmal nur fürs Business-Templates (v4)

Einbauanleitung für die 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 allen Bildbeschreibungen unter "Bild bearbeiten" eingeblendet!

Es werden zwei Plugins angelegt!

Das Skript wird als Plugin angelegt, unter "Bildergalerie - Dialoge (bearbeiten, neu) - Footer"!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, Business - Template (144), Auswahl mit Mausklick oder Strg + Mausklick!

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
49
50
51
52
53
54
 
<style>
  .iconbar_main2 div {display:inline-block; padding:3px;}
</style>
 
<script>
  // Iconbar in der Bildergalerie
  miranus_add_iconbar_textarea('CatDesc');
  miranus_add_iconbar_textarea('editdesc');
 
  function hide_tab2(tab2){
    document.getElementById(tab2).style.display = 'none';
  }
  function show_tab2(tab2){
	document.getElementById(tab2).style.display = 'inline-block';
  }
 
$('#CatDesc, #editdesc').before(`		
  <div class="iconbar_main2" style="display: inline;">
    <div style="position:absolute; right:80px; margin-top:-26px;" onmouseout="hide_tab2('tab_farbe2')" onmouseover="show_tab2('tab_farbe2'); this.style.cursor='pointer';">
      <img src="https://img.homepagemodules.de/ds/static/gaia/color3.png" alt="" border=0 height="20px">
      <div id="tab_farbe2" style="display: none; position: absolute; margin-left:-160px; margin-top:-25px; background-color: white; padding:2px; width:180px; border:1px solid #777777;border-radius:5px; z-index:9999;">
        <div onclick="insert('[style=color: #800033]','[/style]')" title="Rot"><img src="//img.homepagemodules.de/ds/static/colors/rot_15.gif"></div>
        <div onclick="insert('[style=color: #778899]','[/style]')" title="Blau"><img src="//img.homepagemodules.de/ds/static/colors/blau_15.gif"></div>
        <div onclick="insert('[style=color: #00C000]','[/style]')" title="Grün"><img border="0" src="//img.homepagemodules.de/ds/static/colors/gruen_15.gif"></div>
        <div onclick="insert('[style=color: #FF8000]','[/style]')" title="Orange"><img border="0" src="//img.homepagemodules.de/ds/static/colors/orange_15.gif"></div>
        <div onclick="insert('[style=color: #8A0886]','[/style]')" title="Violett"><img border="0" src="//img.homepagemodules.de/ds/static/colors/lila_15.gif"></div>
        <div onclick="insert('[style=color: #ffffff]','[/style]')" title="Weiß"><img border="0" src="//img.homepagemodules.de/ds/static/colors/weiss_15.gif"></div>
        <div onclick="insert('[style=color: #000000]','[/style]')" title="Schwarz"><img border="0" src="//img.homepagemodules.de/ds/static/colors/schwarz_15.gif"></div>
      </div>
    </div>
  </div>
 
  <div class="iconbar_main2" style="display: inline;">
    <div style="position:absolute;right:55px;margin-top:-26px;" onMouseOut="hide_tab2('tab_format2')" onmouseover="show_tab2('tab_format2');this.style.cursor='pointer';">
      <img src="https://files.homepagemodules.de/b104774/bhnetfiles-kr03-13-a577.png" alt="" border=0  height="20px">
      <div id="tab_format2" style="display: none; position: absolute; margin-left:-290px; margin-top:-25px;background-color: white; padding: 2px 0 2px 0; width:310px; border:1px solid #777777;border-radius:5px;">                    
        <div onclick="insert('[b]','[/b]')" title="Fett"><img src="//img.homepagemodules.de/ds/static/gaia/bold.png"></div>
        <div onclick="insert('[i]','[/i]')" title="Kursiv"><img src="//img.homepagemodules.de/ds/static/gaia/italic.png"></div>
        <div onclick="insert('[u]','[/u]')" title="Unterstrichen"><img src="//img.homepagemodules.de/ds/static/gaia/underline.png"></div>
        <div onclick="insert('[small]','[/small]')" title="Schrift kleiner"><img src="//img.homepagemodules.de/ds/static/gaia/edit-size-down.png"></div>
        <div onclick="insert('[big]','[/big]')" title="Schrift größer"><img src="//img.homepagemodules.de/ds/static/gaia/edit-size-up.png"></div>
        <div onclick="insert('[hr]','')" title="Trennlinie"><img src="//img.homepagemodules.de/ds/static/gaia/ui-splitter-horizontal.png"></div>
        <div onclick="insert('[left]','[/left]')" title="Linksbündig"><img src="//files.homepagemodules.de/b104774/a_25_cf4cb81b.png"></div>
        <div onclick="insert('[right]','[/right]')" title="Rechtsbündig"><img src="//files.homepagemodules.de/b104774/a_25_cf4cb81b.png"></div>
        <div onclick="insert('[center]','[/center]')" title="Zentriert"><img src="//files.homepagemodules.de/b104774/a_26_e839435e.png"></div>
        <div onclick="insert('[justify]','[/justify]')" title="Blocksatz"><img src="//files.homepagemodules.de/b104774/a_28_c9551495.png"></div>
        <div onclick="insert('[pre]','[/pre]')" title="Präformatierter Text"><img src="//img.homepagemodules.de/ds/static/gaia/pre.png"></div>
 
      </div>
    </div>
  </div>
  <div style="clear:both"></div>
`);
</script>
 

Schließen

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
49
50
51
52
53
54
55
56
 
<style>
  .iconbar_main2 div {display:inline-block; padding:3px;}
  form[name="EditCatFrom"] .cover_prev {top: 25px !important; }
  form[name="EditForm"] td {text-align: left !important;}
</style>
 
<script>
  miranus_add_iconbar_textarea('CatDesc');
  miranus_add_iconbar_textarea('editdesc');
 
// Iconbar in der Bildergalerie
  function hide_tab2(tab2){
    document.getElementById(tab2).style.display = 'none';
  }
  function show_tab2(tab2){
	document.getElementById(tab2).style.display = 'inline-block';
  }
 
$('#cat_name, #edittitle').after(`		
  <div class="iconbar_main2" style="display: inline;">
    <div style="position:absolute; margin-left:10px; margin-top: -5px;" onmouseout="hide_tab2('tab_farbe2')" onmouseover="show_tab2('tab_farbe2'); this.style.cursor='pointer';">
      <img src="https://img.homepagemodules.de/ds/static/gaia/color3.png" alt="" border=0 height="20px">
      <div id="tab_farbe2" style="display: none; position: absolute; margin-left:-160px; margin-top:-25px; background-color: white; padding:2px; width:180px; border:1px solid #777777;border-radius:5px; z-index:9999;">
        <div onclick="insert('[style=color: #800033]','[/style]')" title="Rot"><img src="//img.homepagemodules.de/ds/static/colors/rot_15.gif"></div>
        <div onclick="insert('[style=color: #778899]','[/style]')" title="Blau"><img src="//img.homepagemodules.de/ds/static/colors/blau_15.gif"></div>
        <div onclick="insert('[style=color: #00C000]','[/style]')" title="Grün"><img border="0" src="//img.homepagemodules.de/ds/static/colors/gruen_15.gif"></div>
        <div onclick="insert('[style=color: #FF8000]','[/style]')" title="Orange"><img border="0" src="//img.homepagemodules.de/ds/static/colors/orange_15.gif"></div>
        <div onclick="insert('[style=color: #8A0886]','[/style]')" title="Violett"><img border="0" src="//img.homepagemodules.de/ds/static/colors/lila_15.gif"></div>
        <div onclick="insert('[style=color: #ffffff]','[/style]')" title="Weiß"><img border="0" src="//img.homepagemodules.de/ds/static/colors/weiss_15.gif"></div>
        <div onclick="insert('[style=color: #000000]','[/style]')" title="Schwarz"><img border="0" src="//img.homepagemodules.de/ds/static/colors/schwarz_15.gif"></div>
      </div>
    </div>
  </div>
 
  <div class="iconbar_main2" style="display: inline;">
    <div style="position:absolute;rright:55px; margin-left:40px; margin-top:-5px;" onmouseout="hide_tab2('tab_format2')" onmouseover="show_tab2('tab_format2');this.style.cursor='pointer';">
      <img src="https://files.homepagemodules.de/b104774/bhnetfiles-kr03-13-a577.png" alt="" border=0  height="20px">
      <div id="tab_format2" style="display: none; position: absolute; margin-left:-290px; margin-top:-25px;background-color: white; padding: 2px 0 2px 0; width:310px; border:1px solid #777777;border-radius:5px;">                    
        <div onclick="insert('[b]','[/b]')" title="Fett"><img src="//img.homepagemodules.de/ds/static/gaia/bold.png"></div>
        <div onclick="insert('[i]','[/i]')" title="Kursiv"><img src="//img.homepagemodules.de/ds/static/gaia/italic.png"></div>
        <div onclick="insert('[u]','[/u]')" title="Unterstrichen"><img src="//img.homepagemodules.de/ds/static/gaia/underline.png"></div>
        <div onclick="insert('[small]','[/small]')" title="Schrift kleiner"><img src="//img.homepagemodules.de/ds/static/gaia/edit-size-down.png"></div>
        <div onclick="insert('[big]','[/big]')" title="Schrift größer"><img src="//img.homepagemodules.de/ds/static/gaia/edit-size-up.png"></div>
        <div onclick="insert('[hr]','')" title="Trennlinie"><img src="//img.homepagemodules.de/ds/static/gaia/ui-splitter-horizontal.png"></div>
        <div onclick="insert('[left]','[/left]')" title="Linksbündig"><img src="//files.homepagemodules.de/b104774/a_25_cf4cb81b.png"></div>
        <div onclick="insert('[right]','[/right]')" title="Rechtsbündig"><img src="//files.homepagemodules.de/b104774/a_25_cf4cb81b.png"></div>
        <div onclick="insert('[center]','[/center]')" title="Zentriert"><img src="//files.homepagemodules.de/b104774/a_26_e839435e.png"></div>
        <div onclick="insert('[justify]','[/justify]')" title="Blocksatz"><img src="//files.homepagemodules.de/b104774/a_28_c9551495.png"></div>
        <div onclick="insert('[pre]','[/pre]')" title="Präformatierter Text"><img src="//img.homepagemodules.de/ds/static/gaia/pre.png"></div>
 
      </div>
    </div>
  </div>
  <div style="clear:both"></div>
`);
</script>
 

Schließen

Das Skript wird als Plugin angelegt, unter "Bildergalerie - Bild anzeigen - Footer"!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, Business - Template (144), Auswahl mit Mausklick oder Strg + Mausklick!

1
 
<script>miranus_add_iconbar_textarea('editdesc')</script>

Schließen

Wichtiger Link aus dem Forum:

Smileys in der Schnellantwort
Multi-Assistent für die Iconbar!

Bis dann, viel Erfolg beim Einbau und

Wolfgang

Dankesch�n findet das Top!

Antworten

Moderations-Kommentar:

Skript komplett überarbeitet, Templates werden nicht mehr verändert!

#2 | Nachtrag: Kleine Iconbar in der Bildergalerie! datum

17.01.2025 10:50

Nachtrag: Kleine Iconbar in der Bildergalerie!

Eine kleine Iconbar in den Beschreibungen der Bildergalerie unterzubringen, kann recht nützlich sein!
Habe das Skript in Beitrag #1 überarbeitet. Einträge in den Templates selbst sind jetzt nicht mehr notwendig!
Allerdings habe ich noch keine Lösung fürs Gaia (v3) und das neue Xobor (v6) gefunden!

Bis dann
Wolfgang

Kipper-Spedition und Dankesch�n finden das Top!

Antworten

#3 | RE: Kleine Iconbar in der Bildergalerie! datum

27.03.2025 12:19 (zuletzt bearbeitet: 27.03.2025 12:24)

Sehr schön, läuft, klein und fein.
Hier hab ich gleich verstanden, dass ich den
neuen Plugin am besten (jeweils) deinen Namen "Bildergalerie - Bild anzeigen - Footer" gebe und dann
in den Templates zu "Bildergalerie - Bild anzeigen" herunterscrolle, dann Footer anklicke.
So langsam fühl ich mich da geübter!

Wie erhofft funzt es nicht nur bei "Bild bearbeiten", sondern auch bei "Fotoalbum bearbeiten".

Dankeschön
von Jan

Wolfgang und Kipper-Spedition finden das Top!

Antworten

Viele ausgewählte einzelne Fotos aus der Bildergalerie schneller löschen � � Upload-Fenster immer automatisch in den Sichtbereich scrollen lassen!

�hnliche Themen

Antworten

Letzter Beitrag

Für die Iconbar: Wählbares + aktuelles Datum in Beiträgen einfügen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

06.09.2024 21:08
von

Wolfgang • Zugriffe: 466

Für die Iconbar: Smileys mit einstellbarer Größe!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

02.02.2020 15:37
von

Wolfgang • Zugriffe: 1210

Drucker-Button in der Bildergalerie!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 0 01.01.2020 11:02
Wolfgang • Zugriffe: 972
Xobor-Superklick in der Iconbar: Version 1-5
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 7 25.09.2021 15:59
Wolfgang • Zugriffe: 3239
Multi-Dialog-Assistent für die Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 20 16.11.2024 08:53
Anne • Zugriffe: 10428

Iconbar: "Inhalte integrieren" und "addPics" ausblenden!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

10.12.2023 14:14
von

Nara • Zugriffe: 3131

Iconbar & Navileiste fixieren - Teil 1(2)
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 14 Gestern 16:56
nobody • Zugriffe: 2796

Beiträge nur für Mitglieder in der neuen Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

02.06.2024 11:53
von

Wolfgang • Zugriffe: 2343

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

65%

Kleine Iconbar in der Bildergalerie!Aktualisiert 16.01.2025

Nachtrag: Kleine Iconbar in der Bildergalerie!

Kleine Iconbar in der Bildergalerie!
Aktualisiert 16.01.2025