Forum - Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates!

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 �

Das neue Template Xobor (v6). � Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4

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. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes 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 | Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4 datum

01.08.2020 18:40 (zuletzt bearbeitet: 25.07.2024 08:13)

Wolfgang

Administrator

Informationen anzeigen

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

Wolfgang hat heute Geburtstag!

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

Bilder aus "Datei anhängen" mit einem Klick vergrößert darstellen! - Teil 1
Aktualisiert 16.07.24

Bilder vergrößern

Der Wunsch Bilder in einem Beitrag zu vergrößern ist nichts Neues.
Hier muss man sich aber mehrere Fragen stellen.

Wie sollen die Bilder vergrößert werden?
Mit einer Lupe, für jedes einzelne Detail, oder ganz groß im "Modal-Modus" mit abgedunkelten Hintergrund oder etwas vergrößert, zur besseren Ansicht, um anschließend wieder schnell zum Beitrag zu kommen?
Eine weitere Frage lautet: Soll ein weiterer TAB geöffnet werden, um auf das Bild später zuzugreifen?
Wichtig ist auch: Wie soll die Ansicht geschlossen werden?
Über das gewohnte "X", über schließen des TAB's oder über ein Klick ins Bild?

Es zeigt sich, dass es hier nicht nur eine Richtung gibt ......!
Was für ein Forum habe ich, will ich schnell informieren oder sollen die Bilder erstmal auf mich wirken und einen Eindruck hinterlassen?
Welche Art der Vergrößerung am besten ist, hängt auch von den Beiträgen ab!
Manchmal ist eine Vergrößerung auch gar nicht angesagt....
Hinzu kommt noch, dass Xobor mehrere Möglichkeiten anbietet, Bilder abzulegen und anzuzeigen!
Welche sind am besten und welche eignen sich?

Bilder hochladen mit "AddPics.com"Vorteile:

Viele Informationen im Vorschaubild und Vollbild!
Viele Einstellungen und Möglichkeiten!
Vollbild wird "Modal" angezeigt.
Beim Schließen des Vollbildes, geht es zurück zum Beitrag. Top!

Nachteile:

Vollbild wird nur über X-Klick geschlossen!
Größe des Vorschaubildes leider nicht einstellbar!
Schließen mit Bild-Klick nicht möglich!

Bilder hochladen mit "Datei anhängen"Vorteile:

Größe und Textfluss einstellbar!
Bilder werden verzerrungsfrei wiedergegeben!
Unkompliziert und nützlich!
Vollbild wird "Modal" angezeigt und im neuen Tab geöffnet.

Nachteile:

Vollbild wird nur über TAB geschlossen!
Sprung zum Beitrag nur über TAB-Wechsel möglich!
Schließen mit Bild-Klick nicht möglich!

Nur für den Admin, "Bilder hochladen"

Für den Admin gibt es speziell ein Upload-Portal, das für die Erstellung von Bilder recht nützlich ist!
Bilder hochladen: admin/fileupload.php
Das kleine Portal ist mit Sortierung und einer Bildersuche ausgestattet!

Installation für Templates & Mobil - Teil 1

Was kann das neue Skript?

Es können beliebig viele Bilder hintereinander mit und ohne vorangehenden Text im Beitrag stehen, ohne einen ungewollten Umbruch zu erzeugen!
Ein Klick auf das Vorschaubild präsentiert die Vergrößerung, ohne dass der Beitrag in die Breite geht, verschwindet oder abgedunkelt wird!
Ein Klick auf das vergrößerte Bild führt schnellstens zum Beitrag zurück!
Die Größen der Bilder lassen sich beliebig bestimmen!
Liegen Bilder dicht nebeneinander und überlappen sich, ist immer das aktive Bild oben (auch im V6)!
Funktioniert auch bei Bildern mit "Textfluss links + rechts"!
Neu!Übergröße Bilder treten nicht über den Beitragsrand, werden gescrollt! Gut auf mobilen Endgeräten!
Neu! Es können Bilder mit reiner Bildadresse und Bilder aus "Datei anhängen" eingetragen werden.
Hier werden unterschiedliche Foren-Codes benötigt!

Zur Installation

Mit der folgenden Installation ist es möglich, erstellte Bild aus "Datei anhängen" per Mausklick beliebig groß anzuzeigen.
Zum schnellen Zurückspringen in den Beitrag werden die Bilder nicht "Modal" angezeigt!
Mit einem Klick ins Bild geht es zurück zum Beitrag. Top!
Vorschaubilder und Vollbilder können in ihrer Größe beliebig dargestellt werden!
Bei Bildern aus "Datei anhängen" werden zwei gleiche Bilder mit unterschiedlicher Größe benötigt!

HTML-Script

Neuer Foren-Code - Für Bildadressen (URL)

Neuer Foren-Code - Für Bilder aus "Datei anhängen"

Plugin anlegen

Weitere interessante Links aus dem Forum

Bis dann und gutes Gelingen

Wolfgang

Dankesch�n und Emanuel finden das Top!

Antworten

Moderations-Kommentar:

Beitrag komplett überarbeitet!
Funktioniert jetzt mit vorhandener Bildadresse und Bilder aus "Datei anhängen"!
Hier werden zwei verschiedene Foren-Codes benötigt!

#2 | Bilder aus "Datei anhängen" mit einem Klick modal darstellen! -Teil 2 datum

04.08.2020 18:50 (zuletzt bearbeitet: 06.07.2024 20:10)

Wolfgang

Administrator

Informationen anzeigen

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

Wolfgang hat heute Geburtstag!

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

Bilder aus "Datei anhängen" mit einem Klick modal darstellen! - Teil 2
Aktualisiert 10.05.22

Im zweiten Teil werden die Bilder auch mit "Datei anhängen" dargestellt!
Allerdings modal , in voller Größe, mit einem Mausklick!
Die Größe der Vorschaubilder und die Bildergröße im "Modalmodus" ist frei wählbar!
Empfehlenswert bleibt trotzdem die Einstellung "fullsize"
Mit einem Klick ins Bild geht es zurück zum Beitrag. Top!
Es braucht kein TAB geschlossen werden!
Auch hier werden zwei gleiche Bild-Dateien aus "Datei anhängen" mit einer kleiner Größe für die Vorschau und "fullsize" für das Vollbild benötigt!
Bilder mit Übergrößen und Bilder mit geringer Auflösung werden jetzt maximal dargestellt!

Installation für Templates V1 bis V4 & Mobil - Teil 2

Bilder mit einem Klick öffnen und schließen:

Die Bilder werden "modal" angezeigt und es wird kein zusätzlich neuer TAB geöffnet!
Nach dem Schließen geht es direkt zum Beitrag zurück!
Benötigt man für z.B. eine längere Betrachtungsweise, das Bild im TAB, kann das über das Kontext-Menü (Rechte Maustaste + Link im neuen TAB öffnen) erfolgen!

Die Bilder werden beim Mouseover leicht abgedunkelt! Möchte man das nicht, Zeile 6 löschen!
Mit "object-fit: scale-down" in Zeile 5 wird verhindert, das Bilder mit geringer Auflösung zu groß dargestellt werden!
Mit "vertical-align: baseline !important" werden die Bilder auf einer Linie mit dem Text gebracht!
Ist der Rahmen für die Bilder nicht erwünscht oder soll verändert werden, müssen "border" und "border-radius" gelöscht, bzw. angepasst werden!
In Zeile 36+37 können die Tooltipps angepasst werden!
In Zeile 12 wird das Bild in der Modalansicht durch "top: -100%;bottom: -100%;left: -100%;right: -100%;margin: auto;" horizontal und vertikal zentriert!
Mit max-height: 85%, max-width: 90% + width:auto wird die maximale Größe im Modal-Modus bestimmt!
Selbst übergroße, verticale Bilder werden maximal dargestellt!
Mit "object-fit: scale-down" wird verhindert, das Bilder mit geringer Auflösung zu groß dargestellt werden!

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
 
<style>
.clickImgModal {display:inline;}
.clickImgModal div {display:inline;z-index:1000;}
.clickImgModal a {padding-top:0px !important;padding-bottom:0px !important;}
.clickImgModal img {margin:0px;object-fit: scale-down;vertical-align: baseline !important;border:1px solid #555555 !important;border-radius:9px;}
.clickImgModal img:hover {opacity: 0.7;}
 
.clickcloseImg {float:right;margin: 20px 30px 0 0; color: #f1f1f1; font-size: 40px; font-weight: bold;}
.clickcloseImg:hover {color: #ff8000; text-decoration: none; ccursor: pointer;}
 
.clickModal  {position: fixed;left: 0;top:0;width: 100%; height: 100%;overflow:hidden;background-color: #000000;cursor:pointer;z-index:999999;}
.clickModal img {object-fit: scale-down; max-height: 85%; max-width: 90%; width:auto !important;height:hidden !important; width:100%;cursor:pointer;border-radius:9px;opacity: 1.0 !important; position:absolute; top: -100%;bottom: -105%;left: -100%;right: -100%;margin: auto;border:1px solid #555555 !important;border-radius:9px;} 
</style>
 

<!-- Bild 1 --><div class="clickImgModal">
<div class="clickImgModal">
<div class="clickModal" style="display:none;"><span class="clickcloseImg">×</span>
<img src="https://files.homepagemodules.de/b104774/a_249_7f2d395e.jpg" style="max-width: 90%; max-height: 85%">
</div>
<img src="https://files.homepagemodules.de/b104774/a_249_7f2d395e.jpg"  style="max-width: 100px; max-height: 100px">
</div>
 

<!-- Bild 2 -->
<div class="clickImgModal">
<div class="clickModal" style="display:none;"><span class="clickcloseImg">×</span>
<img src="https://files.homepagemodules.de/b104774/a_249_7f2d395e.jpg" style="max-width: 90%; max-height: 85%">
<div class="clickcloseImg">×</div>
</div>
<img src="https://files.homepagemodules.de/b104774/a_249_7f2d395e.jpg"  style="max-width: 100px; max-height: 100px">
</div>
 

<script>
$('.clickImgModal img').attr('title','Vollbild anzeigen');
$('.clickImgModal div img, .clickImgModal div').attr('title','Mit einem Klick - Vollbild schließen');
$('.clickImgModal').click(function(){
$('div',this).fadeIn(100).click(function(){
$('.clickModal').hide(500);
$('.boxheader,.options,#obere_leiste,#donationbox_table,.scroll_page').css('visibility','visible');
$('body').css('overflow','auto');
return false;
});
$('.boxheader,.options,#obere_leiste,#donationbox_table,.scroll_page').css('visibility','hidden');
$('body').css('overflow','hidden');
return false;
});
</script>
 

Schließen

Zu beachten:

Folgender "Foren-Code" wird neu angelegt und nach "nicht sichtbar" verschoben.
"Erweiterte Foren-Code" wird eingeblendet

Für alle neuen Foren-Codes unter "Weitere Einstellungen":

1
 
Reihenfolge: 0

Grafik:

1
 
//img.homepagemodules.de/ds/static/gaia/picture.png

Neuer Foren-Code:

1
2
3
4
5
 
Ersetze:
[clickImg]{{klein}}[click] ... [/clickImg]
 
Mit:
<div class="clickImgModal"><div class="clickModal" style="display:none;"><span class="clickcloseImg">×</span> ...  </div>{{klein}}</div>
 

Schließen

Das Skript und der CSS-Eintrag kann in die "Fußzeile" oder am besten als Plugin in den "bottom_header" eingetragen werden!
Die Bilder werden beim Mouseover leicht abgedunkelt! Möchte man das nicht, Zeile 5 löschen!
Mit "vertical-align: baseline !important" in Zeile 4 werden die Bilder auf einer Linie mit dem Text gebracht!
In Zeile 16 kann der Tooltipp fürs Schließen angepasst werden!
In Zeile 11 wird das Bild in der Modalansicht durch "top: -100%;bottom: -100%;left: -100%;right: -100%;margin: auto;" horizontal und vertikal zentriert!
Mit "height: 80%; width: auto !important" wird die maximale Größe bestimmt!
Selbst übergroße, verticale Bilder werden maximal dargestellt!
Mit "object-fit: scale-down" wird verhindert, das Bilder mit geringer Auflösung zu groß dargestellt werden!
Das Template wird nicht verändert!

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
 
<style>
.clickImgModal {display:inline;}
.clickImgModal div {display:inline;z-index:1000;}
.clickImgModal a {padding-top:0px !important;padding-bottom:0px !important;}
.clickImgModal img {margin:0px;object-fit: scale-down;vertical-align: baseline !important;border:1px solid #555555 !important;border-radius:9px;}
.clickImgModal img:hover {opacity: 0.7;}
 
.clickcloseImg {float:right;margin: 20px 30px 0 0; color: #f1f1f1; font-size: 40px; font-weight: bold;}
.clickcloseImg:hover {color: #ff8000; text-decoration: none; ccursor: pointer;}
 
.clickModal  {position: fixed;left: 0;top:0;width: 100%; height: 100%;overflow:hidden;background-color: #000000;cursor:pointer;z-index:999999;}
.clickModal img {object-fit: scale-down; max-height: 85%; max-width: 90%; width:auto !important;height:hidden !important; width:100%;cursor:pointer;border-radius:9px;opacity: 1.0 !important; position:absolute; top: -100%;bottom: -105%;left: -100%;right: -100%;margin: auto;border:1px solid #555555 !important;border-radius:9px;} 
</style>
 
<script>
$('.clickImgModal img').attr('title','Vollbild anzeigen');
$('.clickImgModal div img, .clickImgModal div').attr('title','Mit einem Klick - Vollbild schließen');
$('.clickImgModal').click(function(){
$('.clickModal',this).fadeIn(100).click(function(){
$('.clickModal').hide();
$('.boxheader,.options,#obere_leiste,#donationbox_table,.scroll_page').css('visibility','visible');
$('body').css('overflow','auto');
return false;
});
$('.boxheader,.options,#obere_leiste,#donationbox_table,.scroll_page').css('visibility','hidden');
$('body').css('overflow','hidden');
return false;
});
</script>
 

Schließen

  • Mit dem Auslöse-Icon wird der BB-Code in den Beitrag geschrieben!
  • Das folgenden Skript wird mit Namen unter "" eingetragen.
  • Das erstellte Auslöse-Icon kann auch in eine vorhandene Gruppen geschoben werden.

Das Auslöse-Icon:

1
 
<div onclick="xob_insert('[clickImg]File:Kleines Bild[click]File:Großes Bild - fullsize','[/clickImg]')" class="xob_icon_cont"><img alt="Bilder modal anzeigen!" title="Bilder modal anzeigen!" class="xob_icon" src="https://files.homepagemodules.de/b2001010/a_799_50667aa9.png"></div>

Schließen

Die verschiedenen Bild-Codes von "Datei anhängen":

Ohne Textfluss:

[[File:Pin1.png|none|100px|100px]] wird von "Datei anhängen" erzeugt!
Diese Datei wird gedoppelt und mit der gewünschten Größe (hier fullsize) in den Foren-Code eingetragen

Mit Textfluss Links:

[[File:Pin1.png|left|100px|100px]] wird von "Datei anhängen" erzeugt!
Diese Datei wird gedoppelt und mit der gewünschten Größe (hier fullsize) in den Foren-Code eingetragen

Mit Textfluss Rechts:

[[File:Pin1.png|right|100px|100px]] wird von "Datei anhängen" erzeugt!
Diese Datei wird gedoppelt und mit der gewünschten Größe (hier fullsize) in den Foren-Code eingetragen

Foren-Code für ein Bild mit einer Vorschau-Größe von 100px im Modal-Modus mit fullsize:

1
 
[clickImg][[File:Pin1.png|none|100px|100px]][/clickImg]

Oder

1
 
[clickImg][[File:Pin1.png|left|100px|100px]][/clickImg]

Oder

1
 
[clickImg][[File:Pin1.png|right|100px|100px]][/clickImg]

Schließen

Neu!

Möchte man die Funktion auch "Mobil" zur Verfügung stellen, müssen CSS und Skript unter "Mobil" ein zweites Mal eingetragen werden!

CSS-Eintrag Zeile 1-13 unter "Admin > Layout > Mobil > Eigenes HMTL/JS > HTML vor Navigation" eintragen
Es ist der gleiche CSS-Eintrag, wie oben!

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<style>
.clickImgModal {display:inline;}
.clickImgModal div {display:inline;z-index:1000;}
.clickImgModal a {padding-top:0px !important;padding-bottom:0px !important;}
.clickImgModal img {margin:0px;object-fit: scale-down;vertical-align: baseline !important;border:1px solid #555555 !important;border-radius:9px;}
.clickImgModal img:hover {opacity: 0.7;}
 
.clickcloseImg {float:right;margin: 20px 30px 0 0; color: #f1f1f1; font-size: 40px; font-weight: bold;}
.clickcloseImg:hover {color: #ff8000; text-decoration: none;}
 
.clickModal  {position: fixed;z-index: 999999  !important;left: 0;top:0;width: 100%; height: 100%;overflow:hidden;background-color: #000000;cursor:pointer;}
.clickModal img {object-fit: scale-down; max-height: 85%; max-width: 90%; width:auto !important;height:hidden !important; width:100%;cursor:pointer;border-radius:9px;opacity: 1.0 !important; position:absolute; top: -100%;bottom: -105%;left: -100%;right: -100%;margin: auto;border:1px solid #555555 !important;border-radius:9px;} 
</style>
 

Skript-Eintrag Zeile 1-9 unter "Admin > Layout > Mobil > Eigenes HMTL/JS > Eigenes Javascript" eintragen
Es ist der gleiche Skript-Eintrag, wie oben!

1
2
3
4
5
6
7
8
9
 
<script>
$('.clickImgModal a').attr('title','Vollbild anzeigen');
$('.clickModal img, .clickModal,.clickcloseImg').attr('title','Mit einem Klick - Vollbild schließen');
$('.clickImgModal').click(function(){
$('.clickModal',this).toggle();
$('body').toggleClass('overflow-hidden');
return false;
});
</script>
 

Schließen

Weitere interessante Links aus dem Forum:

  • Bilder "Modal" anzeigen!
  • Bilder vergrößern mit variabler Lupenfunktion!
  • Bilder vergrößern per "Mouseover", mittels "CSS" oder "Tooltipps"
  • Forum-Bilder mit einstellbarer Größe und Tooltipps ausstatten!

Bis dann und gutes Gelingen

Wolfgang

Wolfgang hat folgende Bilder an diesen Beitrag angeh�ngt

Pin1.png

Als Diashow anzeigen

Antworten

#3 | Bilder aus "Datei anhängen" mit einem Klick vergrößern - Mit Bildbeschriftung! - Teil 3 datum

25.08.2020 00:22 (zuletzt bearbeitet: 06.07.2024 20:10)

Wolfgang

Administrator

Informationen anzeigen

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

Wolfgang hat heute Geburtstag!

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

Bilder aus "Datei anhängen" mit einem Klick vergrößern - Mit Bildbeschriftung! - Teil 3
Aktualisiert 10.05.22

Es ist auch möglich Bilder aus "Datei anhängen" mit einer Bildbeschreibung zu versehen!
Hier sind nur neue Foren-Codes und CSS-Einträge notwendig!

Was kann die neue Funktion?

Die Beschriftung ist mit einem Überlauf ausgestattet (... Punkte am Ende)!
Die Beschriftung kann auch mehrzeilig erfolgen!
Die Beschriftung wird unterhalb des Bildes platziert!

Mit einem Klick vergrößern und verschieben:

Es lassen sich nur geöffnete Bilder verschieben.
Nach dem Schließen nehmen die Bilder ihre Ausgangsposition wieder ein!
Benötigt man für z.B. eine längere Betrachtungsweise, das Bild im TAB, kann das über das Kontext-Menü (Rechte Maustaste + Link im neuen TAB öffnen) erfolgen!

Mit einem Klick modal anzeigen und wieder schließen:

Die Bilder werden "modal" angezeigt und es wird kein zusätzlich neuer TAB geöffnet!
Nach dem Schließen geht es direkt zum Beitrag zurück!
Benötigt man für z.B. eine längere Betrachtungsweise, das Bild im TAB, kann das über das Kontext-Menü (Rechte Maustaste + Link im neuen TAB öffnen) erfolgen!

Installation für Templates V1 bis V4 & Mobil - Teil 3

Zu beachten:

Folgender "Foren-Code" wird neu angelegt und nach "nicht sichtbar" verschoben.
"Erweiterte Foren-Code" wird eingeblendet

Für alle neuen Foren-Codes unter "Weitere Einstellungen":

1
 
Reihenfolge: 0

Für "URL einer Grafik":

1
 
//img.homepagemodules.de/ds/static/gaia/picture.png

1. Neuer Foren-Code:

1
2
3
4
5
 
Ersetze:
[mouseclick={{text}}]{{klein}}[hover] ... [/mouseclick]
 
Mit:
<div class="clickimg"><div class="clickmo" style="display:none;"> ...  <center><h5 class="clicktext">{{text}}</h5></center></div><div class="clickin">{{klein}}<center><h5 class="clicktext">{{text}}</h5></center></div></div>
 

2. Neuer Foren-Code:

1
2
3
4
5
 
Ersetze:
[clickImg={{text}}]{{klein}}[click] ... [/clickImg]
 
Mit:
<div class="clickImgModal"><div class="clickModal" style="display:none;"><span class="clickcloseImg">×</span> ...  <center><h5 class="clicktextmo">{{text}}</h5></center></div><div class="clickin">{{klein}}<center><h5 class="clicktext">{{text}}</h5></center></div></div>
 

Schließen

Folgende CSS in den vorhandenen "Style" nachtragen!
Das Template wird nicht verändert!

1
2
3
4
5
 
<style>
.clicktext {text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:80%;font-size:85%;color:#383838;background:#cccccc; border-radius:3px;clear:both;font-weight:bold;padding:2px 5px;}
.clicktextmo {max-width:50%;margin:10px 50px;padding:10px;border-radius:9px;background:#cccccc;bbackground:#070470;font-size:120%;color:#383838;padding:2px 5px;}
.clickin {display:inline-block !important;}
</style>
 

Schließen

1
 
<div onclick="xob_insert('[mouseclick=Text]File:Kleines Bild[hover]File:Großes Bild','[/mouseclick]')" class="xob_icon_cont"><img alt="Bilder vergrößert anzeigen!" title="Bilder vergrößert anzeigen!" class="xob_icon" src="https://files.homepagemodules.de/b2001010/a_799_50667aa9.png"></div>

Das Auslöse-Icon (Modal):

1
 
<div onclick="xob_insert('[clickImg=Text]File:Kleines Bild[click]File:Großes Bild mit fullsize','[/clickImg]')" class="xob_icon_cont"><img alt="Bilder modal anzeigen!" title="Bilder modal anzeigen!" class="xob_icon" src="https://files.homepagemodules.de/b2001010/a_799_50667aa9.png"></div>

Schließen

Die erweiterten Bilder-Codes für "Datei anhängen"

[[File:gallery_icon.jpg|none|100px|100px]] wird von "Datei anhängen" erzeugt!
Diese Datei wird gedoppelt und mit der gewünschten Größe (hier 400px) in den Foren-Code eingetragen

1
 
[mouseclick=Bild vergrößern - Beispieltext][[File:pin.png|none|100px|100px]][hover][[File:pin.png|none|400px|400px]][/mouseclick]

Oder

[[File:pin.png|none|100px|100px]] wird von "Datei anhängen" erzeugt!
Diese Datei wird gedoppelt und mit der gewünschten Größe (hier fullsize) in den Foren-Code eingetragen

1
 
[clickImg=Bild modal darstellen - Beispieltext][[File:pin.png|none|100px|100px]][click][[File:pin.png|none|fullsize]][/clickImg]

Schließen

Neu!

Möchte man die Funktion auch "Mobil" zur Verfügung stellen, muss die CSS ergänzt werden!

CSS-Eintrag Zeile 2-4 unter "Admin > Layout > Mobil > Eigenes HMTL/JS > HTML vor Navigation" nachtragen

1
2
3
4
5
 
<style>
.clicktext {text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:80%;font-size:85%;color:#383838;background:#cccccc;bbackground:#070470;border-radius:3px;clear:both;font-weight:bold;padding:2px 5px;}
.clicktextmo {max-width:50%;margin:10px 50px;padding:10px;border-radius:9px;background:#cccccc;bbackground:#070470;font-size:120%;color:#383838;padding:2px 5px;}
.clickin {display:inline-block !important;}
</style>
 

Schließen

Weitere interessante Links aus dem Forum:

Bis dann und gutes Gelingen

Wolfgang

Wolfgang hat folgende Bilder an diesen Beitrag angeh�ngt

gallery_icon.jpg

pin.png

Als Diashow anzeigen

Antworten

#4 | Bilder aus "Datei anhängen" mit einem Klick öffnen - Template V6 - Mit Bildbeschriftung! - Teil 4 datum

29.08.2020 19:05 (zuletzt bearbeitet: 06.07.2024 20:10)

Wolfgang

Administrator

Informationen anzeigen

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

Wolfgang hat heute Geburtstag!

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

Bilder aus "Datei anhängen" mit einem Klick öffnen - Template V6 - Mit Bildbeschriftung! - Teil 4
Aktualisiert 10.05.22

Soll das Skript im responsive Template V 6 laufen, gleicht es den mobilen Einträgen aus Beitrag #1, #2, #3 !

Die folgende Installation ist für Bilder aus "Datei anhängen" mit Textfluss Links & Rechts, mit und ohne Beschriftung!
In der modalen Ansicht wird kein zusätzlicher TAB geöffnet und es geht nach dem Schließen direkt zum Beitrag zurück!
Benötigt man für z.B. eine längere Betrachtungsweise, ein Bild im TAB, kann das über das Kontext-Menü (Rechte Maustaste + Link im neuen TAB öffnen) erfolgen!
Bei Bildern mit Beschriftung ist eine Veränderung des Textflusses leider nicht möglich!
In der mobilen Version funktioniert das Verschieben leider nicht!

Installation responsive Template V 6 & Mobil - Teil 4

Die Installation für das Responsive Template V6 gleicht den mobilen Eintragungen.
Benötigt werden die 4 beschriebenen Foren-Codes aus Beitrag #1, #2, #3 und der folgende CSS- & Skript-Eintrag!

CSS-Eintrag Zeile 1-25 unter "Admin > Layout > Mobil > Eigenes HMTL/JS > HTML vor Navigation" eintragen

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
 
<style>
.clickimg {display:inline;}
.clickimg div {display:inline;z-index:1000;}
.clickimg a {padding-top:0px !important;padding-bottom:0px !important;}
.clickimg div img {opacity: 1.0 !important;}
.clickimg img {margin:0px;object-fit: scale-down;vertical-align: baseline !important;border:1px solid #555555 !important;border-radius:9px;}
.clickimg img:hover {opacity: 0.7;}
.clickmo {position:absolute;}
 
.clickImgModal {display:inline;}
.clickImgModal div {display:inline;z-index:1000;}
.clickImgModal a {padding-top:0px !important;padding-bottom:0px !important;}
.clickImgModal img {margin:0px;object-fit: scale-down;vertical-align: baseline !important;border:1px solid #555555 !important;border-radius:9px;}
.clickImgModal img:hover {opacity: 0.7;}
 
.clickcloseImg {float:right;margin-right: 30px; color: #f1f1f1; font-size: 40px; font-weight: bold;}
.clickcloseImg:hover {color: #ff8000; text-decoration: none; ccursor: pointer;}
 
.clickModal  {position: fixed;z-index: 999999  !important;left: 0;top:0;width: 100%; height: 100%;overflow:hidden;background-color: #000000;cursor:pointer;}
.clickModal img {object-fit: scale-down; max-height: 85%; max-width: 90%; width:auto !important;height:hidden !important; width:100%;cursor:pointer;border-radius:9px;opacity: 1.0 !important; position:absolute; top: -100%;bottom: -105%;left: -100%;right: -100%;margin: auto;border:1px solid #555555 !important;border-radius:9px;} 
 
.clicktext {text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:95%;font-size:85%;background-color:#eeeeee;border-radius:3px;clear:both;font-weight:bold;padding:2px 5px;}
.clicktextmo {max-width:50%;margin:10px 50px;padding:10px;border-radius:9px;background:#eeeeee;font-size:120%;}
.clickin {display:inline-block !important;}
</style>
 

Skript-Eintrag Zeile 1-18 unter "Admin > Layout > Mobil > Eigenes HMTL/JS > Eigenes Javascript" eintragen!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<script>
$('.clickimg a').attr('title','Bild vergrößern');
$('.clickmo a').attr('title','Bild verkleinern');
$('.clickimg').click(function(){
$('.clickmo',this).toggle();
return false;
});
 
$('.clickImgModal a').attr('title','Vollbild anzeigen');
$('.clickModal img, .clickModal,.clickcloseImg').attr('title','Mit einem Klick - Vollbild schließen');
$('.clickImgModal').click(function(){
$('.clickModal',this).toggle();
$('body').toggleClass('overflow-hidden');
return false;
});
 
$('.card-body p:first').each(function(){$(this).replaceWith( "<span>" + $(this).html()  + "</span>" );});
</script>
 

Schließen

Testseite für Bilder aus "Dateien anhängen" mit Textfluss Rechts & Links und doppelten Bildern!

"Datei anhängen" bringt schon von Haus aus eine Menge mit!

Bilder werden verzerrungsfrei dargestellt, auch wenn die Maße für Höhe und Breite eine Verzerrung auslösen müsste!
Bilder werden nur bis zu ihrer wirklichen Größe angezeigt, auch wenn die Maße für Höhe und Breite weit darüber liegen!
Mit "fullsize" im Bild-Code (Vollbild), kann die maximale Größe des Bildes wiedergegeben werden!
Hinzu kommt noch, das der Textfluss um das Bild mit "left" und "right" bestimmt werden kann!

Um die neuen Foren-Codes mit "Dateien anhängen" in ihrer Umgebung zu testen, sind min. 25 Variationen notwendig!

[

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
 
[b]1. Vergrößern mit Text - Textfluss Normal (100px / 400px)[/b]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text  [mouseclick=Bild vergrößern - Beispieltext 1][[File:gallery_icon.jpg|none|100px]][hover][[File:gallery_icon.jpg|none|400px|400px]][/mouseclick] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]2. Vergrößern mit Text - Textfluss Left (200px / 400px)[/b]
[i]Bilder mit Bildbeschreibung können nicht mit Textfluss "links" oder "rechts" dargestellt werden![/i]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text  [mouseclick=Bild vergrößern - Beispieltext 2][[File:gallery_icon.jpg|left|200px]][hover][[File:gallery_icon.jpg|left|400px|400px]][/mouseclick] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]3. Vergrößern mit Text - Textfluss Right (200px / 400px)[/b]
[i]Bilder mit Bildbeschreibung können nicht mit Textfluss "links" oder "rechts" dargestellt werden![/i]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text  [mouseclick=Bild vergrößern - Beispieltext 3][[File:gallery_icon.jpg|right|200px]][hover][[File:gallery_icon.jpg|right|400px|400px]][/mouseclick] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[hr3]
 

[b]4. Modal mit Text - Textfluss Normal (100px / fullsize)[/b]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [clickImg=Bild Modal - Beispieltext 4][[File:pin.png|none|100px|100px]][/clickImg] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  [clear]
 

[b]5. Modal mit Text - Textfluss Left (200px / fullsize)[/b]
[i]Bilder mit Bildbeschreibung können nicht mit Textfluss "links" oder "rechts" dargestellt werden![/i]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [clickImg=Bild Modal - Beispieltext 5][[File:pin.png|left|200px]][/clickImg] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]6. Modal mit Text - Textfluss Right (200px / fullsize)l[/b]
[i]Bilder mit Bildbeschreibung können nicht mit Textfluss "links" oder "rechts" dargestellt werden![/i]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [clickImg=Bild Modal - Beispieltext 6][[File:pin.png|right|200px]][/clickImg] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[hr3]
 

[b]7. Vergrößern  ohne Text - Textfluss Normal (100px / 400px)[/b]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [mouseclick][[File:gallery_icon.jpg|none|100px|100px]][hover][[File:gallery_icon.jpg|none|400px|400px]][/mouseclick] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]8. Vergrößern  ohne Text - Textfluss Left (200px / 400px)[/b]
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [mouseclick][[File:gallery_icon.jpg|left|200px|200px]][hover][[File:gallery_icon.jpg|left|400px|400px]][/mouseclick] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]9. Vergrößern  ohne Text - Textfluss Right (200px / 400px)[/b]
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [mouseclick][[File:gallery_icon.jpg|right|200px|]][hover][[File:gallery_icon.jpg|none|400px|400px]][/mouseclick] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[hr3]
 

[b]10. Modal  ohne Text - Textfluss Normal (100px / fullsize)[/b]
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [clickImg][[File:pin.png|none|100px|100px]][/clickImg] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]11. Modal ohne Text - Textfluss Left (200px / fullsize)[/b]
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [clickImg][[File:pin.png|left|200px]][/clickImg] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]12. Modal  ohne Text - Textfluss Right (200px / fullsize)[/b]
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [clickImg][[File:pin.png|right|200px]][/clickImg] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[hr3]
 

[b]13. Vergrößern  mit Text - Textfluss Normal - Doppelt   (100px / 400px)[/b]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [mouseclick=Bild vergrößern - Beispieltext 7][[File:gallery_icon.jpg|none|100px|100px]][hover][[File:gallery_icon.jpg|none|400px|400px]][/mouseclick] [mouseclick=Bild vergrößern - Beispieltext 7][[File:gallery_icon.jpg|none|100px|100px]][hover][[File:gallery_icon.jpg|none|400px|400px]][/mouseclick] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]14. Vergrößern  mit Text - Textfluss Left - Doppelt  (200px / 400px)[/b]
[i]Bilder mit Bildbeschreibung können nicht mit Textfluss "links" oder "rechts" dargestellt werden![/i]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [mouseclick=Bild vergrößern - Beispieltext 8][[File:gallery_icon.jpg|left|200px]][hover][[File:gallery_icon.jpg|left|400px|400px]][/mouseclick] [mouseclick=Bild vergrößern - Beispieltext 8][[File:gallery_icon.jpg|left|200px]][hover][[File:gallery_icon.jpg|left|400px|400px]][/mouseclick] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]15. Vergrößern  mit Text - Textfluss Right- Doppelt   (200px / 400px)[/b]
[i]Bilder mit Bildbeschreibung können nicht mit Textfluss "links" oder "rechts" dargestellt werden![/i]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [mouseclick=Bild vergrößern - Beispieltext 9][[File:gallery_icon.jpg|right|200px]][hover][[File:gallery_icon.jpg|right|400px|400px]][/mouseclick] [mouseclick=Bild vergrößern - Beispieltext 10][[File:gallery_icon.jpg|right|200px]][hover][[File:gallery_icon.jpg|right|400px|400px]][/mouseclick] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[hr3]
 

[b]16. Modal  mit Text - Textfluss Normal - Doppelt (100px / fullsize)[/b]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text [clickImg=Bild Modal - Beispieltext 11][[File:pin.png|none|100px|100px]][/clickImg] [clickImg=Bild Modal - Beispieltext 12][[File:pin.png|none|100px|100px]][/clickImg] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]17. Modal  mit Text - Left - Textfluss Doppelt (200px / fullsize)[/b]
[i]Bilder mit Bildbeschreibung können nicht mit Textfluss "links" oder "rechts" dargestellt werden![/i]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text   [clickImg=Bild Modal - Beispieltext 13][[File:pin.png|left|200px]][/clickImg] [clickImg=Bild Modal - Beispieltext 14][[File:pin.png|left|200px]][/clickImg] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]18. Modal  mit Text - Textfluss Right - Doppelt  (200px / fullsize) [/b]
[i]Bilder mit Bildbeschreibung können nicht mit Textfluss "links" oder "rechts" dargestellt werden![/i]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [clickImg=Bild Modal - Beispieltext 15][[File:pin.png|right|200px]][/clickImg] [clickImg=Bild Modal - Beispieltext 16][[File:pin.png|right|200px]][/clickImg] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[hr3]
 

[b]19. Vergrößern  ohne Text - Textfluss Normal - Doppelt  (100px / 400px)[/b]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [mouseclick][[File:gallery_icon.jpg|none|100px|100px]][hover][[File:gallery_icon.jpg|none|400px|400px]][/mouseclick] [mouseclick][[File:gallery_icon.jpg|none|100px|100px]][hover][[File:gallery_icon.jpg|none|400px|400px]][/mouseclick] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]20. Vergrößern  ohne Text - Textfluss Left - Doppelt  (200px / 400px)[/b]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [mouseclick][[File:gallery_icon.jpg|left|200px]][hover][[File:gallery_icon.jpg|left|400px|400px]][/mouseclick]  [mouseclick][[File:gallery_icon.jpg|left|200px]][hover][[File:gallery_icon.jpg|left|400px|400px]][/mouseclick] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]21. Vergrößern  ohne Text - Textfluss Right - Doppelt  (200px / 400px)[/b]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [mouseclick][[File:gallery_icon.jpg|right|200px]][hover][[File:gallery_icon.jpg|right|400px|400px]][/mouseclick]  [mouseclick][[File:gallery_icon.jpg|right|200px]][hover][[File:gallery_icon.jpg|right|400px|400px]][/mouseclick] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[hr3]
 

[b]22. Modal  ohne Text - Textfluss Normal - Doppelt  (100px / fullsize)[/b]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [clickImg][[File:pin.png|none|100px|100px]][/clickImg] [clickImg][[File:pin.png|none|100px|100px]][/clickImg] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]23. Modal  ohne Text - Textfluss Left - Doppelt  (200px / fullsize)[/b]
 
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [clickImg][[File:pin.png|left|200px]][/clickImg]  [clickImg][[File:pin.png|left|200px]][/clickImg] Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[b]24. Modal  ohne Text - Textfluss Right - Doppelt (200px / fullsize)[/b]
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text  [clickImg][[File:pin.png|right|200px]][/clickImg]  [clickImg][[File:pin.png|right|200px]][/clickImg]Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [clear]
 

[hr3]
 

[b]25. Bilder aus [rot]Datei einfügen[/rot] ohne Foren-Code[/b]
[i]Doppelklick öffnet das Bild im Großformat in einen neuen Tab![/i]
[[File:pin.png|none|200px]] [[File:pin.png|none|200px]] [[File:pin.png|none|200px]] [clear]
 

Schließen

Weitere interessante Links aus dem Forum:

Bis dann und gutes Gelingen

Wolfgang

Wolfgang hat folgende Bilder an diesen Beitrag angeh�ngt

gallery_icon.jpg

pin.png

Als Diashow anzeigen

844er findet das Top!

Antworten

#5 | RE: Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4 datum

20.05.2024 09:58 (zuletzt bearbeitet: 20.05.2024 14:35)

Guten Morgen @Wolfgang

Ich habe Beitrag #1 installiert:

#1 | Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4

Habe den Code in "bottom_header" und für den "Foren-Code" alles gemacht. Irgendwie funtzt es bei mir nicht.

Nur eine Frage habe ich, zeigt das Script alles als Diashow an? Oder ist das das falsche Script? Ich bin hier etwas verwirrt.

Bei dir wird der Anhang als Diashow angezeigt.

Deswegen diese Frage.

Oder stören sich hier die verschiedene Scripte, da ich das Script noch installiert habe für, modal Modus.

Ich frage nur, was ich hier falsch gemacht habe oder ob ich es falsch verstanden habe und es nicht das Script ist, das ich suche.

Ich bedanke mich herzlichst im Voraus, und ich entschuldige mich von ganzem Herzen, wenn ich es falsch verstanden habe und es nicht das Script ist, was ich suche.

Ich hoffe, man konnte verstehen, was ich meine

Mit herzlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#6 | Fehlersuche: Bilder aus "Datei anhängen" mit einem Klick öffnen - Teil 1 datum

16.07.2024 10:14 (zuletzt bearbeitet: 16.07.2024 10:20)

Fehlersuche: Bilder aus "Datei anhängen" mit einem Klick öffnen - Teil 1

Hallo DaishiIn der Foren-Software hat sich so einiges getan und verhindern das Funktionieren älterer Skripte!

In diesem Fall ist es die Vollansicht von Bildern in der Modal-Ansicht!
Alle 4 Teile müssen überarbeitet und angepasst werden!

In Teil 1 ist mir etwas Gutes gelungen.
Es können auf die Schnelle Bilder mit einem Klick auf eine gewünschte Größe gebracht werden und das für Bilder mit vorhandener Bildadresse und Bilder aus "Datei anhängen"!
Hier werden allerdings zwei verschiedene Foren-Codes benötigt!
Näheres im Beitrag!

Teil 2-4 folgen noch, auch die Diashow!

Hier geht es zum Beitrag:
Linke Grafik anklicken!

Bis dann und viel Zeit für Deine Arbeiten!
Wolfgang

Antworten

#7 | RE: Fehlersuche: Bilder aus "Datei anhängen" mit einem Klick öffnen - Teil 1 datum

24.07.2024 11:08

Fehlersuche: Bilder aus "Datei anhängen" mit einem Klick öffnen

@Daishi

Diashow und Bilder in "Datei anhängen"Wollte mich hier nochmal zur Diashow und den Bildern in "Datei anhängen" melden!
Auch im Skript (Jahr 2020) für die Diashow und den Bildanhängen war noch ein Fehler versteckt, funktionierte nur im ersten Beitrag ordnungsgemäß!

Habe in einem anderen Beitrag hierzu alles ausführlich beschrieben!
Die Templates der Premium-Foren und kostenlosen Foren haben die Erstellung der Skripte nicht gerade vereinfacht.
Hier gab es viele Unterschiede!

Im Update ist auch für jedes Template ein eigenes Skript verfügbar!

Hier geht es zum Beitrag:
Linke Grafik anklicken!

Bis dann und gutes Gelingen!
Wolfgang

Antworten

#8 | RE: Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4 datum

06.11.2025 17:51 (zuletzt bearbeitet: 06.11.2025 20:50)

Dankeschön

Informationen anzeigen

Beitr�ge:	279
Registriert seit:	19.01.2025

Homepage:	Link
Letzte Spende	Betrag 10 � Forum Spende
Sternzeichen	novalue
Likes	156

Hallo Wolfgang,

eigentlich machen wir alle Bilder über Uploads, nie über URL, aber jetzt hats doch jemand directupload.eu benutzt, einfach die URL, davon hätte ich per Nacharbeitiung gern die Bilder angezeigt. Ich komm aber peinlicherweise gar nicht damit klar.... Von allem, was ich hier und auf hpm lese müsste es locker funktionieren.

Bei IMG/IMG (

1
 
[IMG]https://www.directupload.eu/file/d/9094/lr5qympl_jpg.htm[/IMG]

)
krieg ich nur einen thumb-Platzhalter

Bei directupload (z.B. https://www.directupload.eu/file/d/9094/lr5qympl_jpg.htm) werden 4 Share Links angeboten deren BBC

1
 
[URL=https://www.directupload.eu/file/d/9094/lr5qympl_jpg.htm][IMG]/leer.gif[/IMG][/URL]

funzt aber genau so wenig:

Jetzt probier ich deine Bild-Icon

1
 
[img_mod=400px=auto]https://www.directupload.eu/file/d/9094/lr5qympl_jpg.htm[/img]

und krieg zumindest in einem Browser einen großen Platzhalter, in einem anderen auch nur einen etwas anderen thumb-Platzhalter....

Was stimmt hier ... mit mir .... nicht?

Ich wollt erstmal dies klären, bevor ich ggf. den Forencode aus #1 einrichte.

Dankeschön!!
von Jan

Die neuesten Beiträge auf meinem Naturforum...

Beitrag wurde gelesen, ist in Arbeit!

Antworten

Kleine Formatfehler beheben im responsive Template Xobor (v6) & Mobil �

�hnliche Themen

Antworten

Letzter Beitrag

Präsentationskalender - Darstellung interessanter Themen - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

09.04.2024 00:35
von

Wolfgang • Zugriffe: 2479

Feuerwerk zum Geburtstag oder andere Anlässe - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

25.08.2023 20:30
von

Kipper-Spedition • Zugriffe: 1756

Sprechblasen fürs Forum - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 1 10.08.2022 18:49
Wolfgang • Zugriffe: 966
Bilder drehen - In der Bildergalerie & In Beiträgen - 2 Teile
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 3 05.06.2022 11:39
844er • Zugriffe: 9077
YouTube-Videogalerie für das eigene Forum installieren - 5 Teile!
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 4 06.07.2025 06:34
Wolfgang • Zugriffe: 2290
"Wer ist Online?" erweitern Teil (1-3) - Online-Zeitzähler!
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 7 22.04.2024 22:49
Anne • Zugriffe: 3041

Bilder vergrößern per "Mouseover", mittels "CSS" oder "Tooltipps"
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

18.01.2020 17:44
von

Wolfgang • Zugriffe: 20831

Forum-Bilder mit einstellbarer Größe, Tooltipps und Beschreibung ausstatten - Teil 1-3!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

08.06.2022 10:15
von

Wolfgang • Zugriffe: 5175

Texte, Sätze und Bilder mit einem Klick aus- und einblenden!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

26.05.2018 00:56
von

Wolfgang • Zugriffe: 2413

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages �

Das neue Template Xobor (v6). � Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4

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 €

93%

Bilder aus "Datei anhängen" mit einem Klick vergrößert darstellen! - Teil 1Aktualisiert 16.07.24

Bilder aus "Datei anhängen" mit einem Klick modal darstellen! - Teil 2Aktualisiert 10.05.22

Die verschiedenen Bild-Codes von "Datei anhängen":

Bilder aus "Datei anhängen" mit einem Klick vergrößern - Mit Bildbeschriftung! - Teil 3Aktualisiert 10.05.22

Die erweiterten Bilder-Codes für "Datei anhängen"

Bilder aus "Datei anhängen" mit einem Klick öffnen - Template V6 - Mit Bildbeschriftung! - Teil 4Aktualisiert 10.05.22

Testseite für Bilder aus "Dateien anhängen" mit Textfluss Rechts & Links und doppelten Bildern!

Fehlersuche: Bilder aus "Datei anhängen" mit einem Klick öffnen - Teil 1

Fehlersuche: Bilder aus "Datei anhängen" mit einem Klick öffnen

Bilder aus "Datei anhängen" mit einem Klick vergrößert darstellen! - Teil 1
Aktualisiert 16.07.24

Bilder aus "Datei anhängen" mit einem Klick modal darstellen! - Teil 2
Aktualisiert 10.05.22

Bilder aus "Datei anhängen" mit einem Klick vergrößern - Mit Bildbeschriftung! - Teil 3
Aktualisiert 10.05.22

Bilder aus "Datei anhängen" mit einem Klick öffnen - Template V6 - Mit Bildbeschriftung! - Teil 4
Aktualisiert 10.05.22