Hallo Wolfgang, ich habe mal eine Idee für dich umgesetzt. Habe die PN’s ja gelöscht, ich kann mich noch erinnern, wie du meintest, ob ich etwas Ausgefallenes mit Bildern machen könnte.
Da hatte ich auf meinen Deckenventilator geschaut und dachte mir, das könnte ich ja auch machen. War etwas schwer, aber ich habe es hinbekommen. Ich hoffe, dass es so weit ok ist und das ausgefallen genug ist.
Es ist nur schlicht gestaltet, soll ja etwas ausgefallen aussehen. Ich hoffe, dass ich das so auf den Punkt getroffen habe.
Im Testforum habe ich es auch schon eingebaut und es funktioniert auf den eigenen Seiten. Ich habe da meine eigenen Bilder verwendet, mit meiner Hündin Alma.
Man kann das Deckenkarussell anklicken und muss mit der Maus Bewegungen nach links und rechts machen, dann wieder mit der Maus runter und man kann dann Positionen wechseln. Ich hoffe, dass ich das verständlich erklärt habe.
Ich entschuldige mich für die schlecht erklärte Aussprache und Grammatik. Ich hoffe, man versteht, was ich meine.
Die 3D-Animationen gefallen mir sehr gut, nur ist es etwas schwer umzusetzen, nur das Problem hier ist, was ich festgestellt habe das manche, 3D Animationen das Xobor - Forum nicht zulässt oder nicht verarbeitet. Ich weiß nicht, woran das liegt.
Manche gehen, manche nicht. Ich bastele noch ein paar 3D Animationen mit Bildern und für Bilder. Ich hoffe, dass es euch und Wolfgang gefallen wird. Diese werde ich dann hier mit in dem Thema einfügen. Muss ja nicht für jedes 3D extra einen neuen Beitrag posten, hoffe, dass das ok so ist mit den Beiträgen und neue 3D Inspirationen hier einzufügen, was mit Bildern zu tun hat.
Habe die ganze Nacht bis jetzt daran gesessen und geschrieben.
Ich habe es auf 3 Bilder gemacht. Man könnte es erweitern, aber das würde nicht mehr so schön aussehen. So finde ich es sehr schön, na ja wie gesagt jeder Mensch hat einen anderen Geschmack, es ist eben Geschmacksache.
Diese arbeiten mache ich gerne und es sind ja Ideen und Vorschläge und Gedanken von Wolfgang. Ob ich so nett wäre und für ihn ausgefallene Sachen für Bilder schreiben könnte. Ich kann meinen Ideen freien Lauf lassen, ich hoffe nur, dass meine verrückten Ideen so weit in Ordnung sind und sie ihm gefallen.
Ich verwende für die Ideen meine eigenen Bilder, da im Moment viel geschrieben wird, dass man Bilder aus dem Netz nicht nehmen sollte. Also nicht wundern, ich habe es so gemacht, dass es wie ein Gemälde aussieht, mit Kartoffelfeinstoff.
Dies 3 Gemälde, 3D Bilder sind animiert, wenn man mit der Maus über das liegende Bild fährt, richten sie sich auf.
Ich habe es im Testforum in eigenen Seiten eingebaut und es funktioniert auch da tatenlos. Test-Links habe ich unten mit eingefügt.
Ich habe heute Nacht noch einen verrückten Einfall gehabt und habe dieses noch, umgeschrieben. Man kann jetzt auch die Hintergründe der Bilder in Rauputz, Tapeten, Raufaser und so machen. Dies kann in Zeile 53 in der CSS geändert werden.
Ich wusste jetzt nicht wie das mit den Datenanhängen funktioniert, da die Bilder etwas größer sein müssen wie sonst. Mache ich sie in die Spoiler.
Hier habe ich mir auch etwas einfallen lassen, ist so ähnlich wie eine Light Box Galerie. Beim anklicken der Bilder werden die Bilder hell. Ich hatte zuerst mehrere Bilder gemacht, dass sah grauenhaft aus. Ich habe es nur schlicht gemacht, mit 3 Bildern, so kommt der Effekt meinerseits besser rüber.
Hoffe nur das auch diese Idee und dieserVorschlag hier gut ankommt und es im Wolfgang gefällt.
Ich habe es im Testforum in "Eigenen Seiten" eingebaut und es funktioniert auch da tatenlos.
<!-- Held Titel --> <h2 id="heroTitle">3D lightbox</h2> <!-- Bilder Container --> <div class="imageContainer"> <!-- Hintergrundlinie --> <hr id="showCaseBackgroundLine"> <!-- Bild a --> <div class="image a"></div> <!-- Bild b --> <div class="image b"></div> <!-- Bild c --> <div class="image c"></div> </div>
<!-- Javascript --> <script id="rendered-js" type="module"> //Importieren Sie nur einen Javascript import $ from "https://cdn.skypack.dev/jquery@3.6.0";
$(function () { $(".image").on("click", function () { if ($(this).hasClass("a")) { $(".b").removeClass("activeB"); $(".c").removeClass("activeC"); $(this).toggleClass("activeA"); } else if ($(this).hasClass("b")) { $(".a").removeClass("activeA"); $(".c").removeClass("activeC"); $(this).toggleClass("activeB"); } else if ($(this).hasClass("c")) { $(".a").removeClass("activeA"); $(".b").removeClass("activeB"); $(this).toggleClass("activeC"); } }); }); //# sourceURL=pen.js </script>
Das hier war auch eine verrückte Idee, so eine Art Blitz-Idee. Ich weiß nicht, ob es Wolfgang gefällt, ich dachte mir einfach, das könnte gut in sein Forum passen, im Portal oder im Forum. Ich würde sagen, ich wollte mit meiner Idee das Forum etwas aufmotzen. Wie gesagt es ist alles Geschmacksache, ich habe ja jetzt meine Ideen freien Lauf gelassen.
Es war nur eine Idee, mit dem Skript das Forum aufpimpen. Ich denke, von meiner Seite passt es gut zu Wolfgangs Style.
Wolfgang, ich hoffe, alle diese Ideen gefallen dir, und ich habe all diese Arbeiten gerne getan.
Leider bekomme ich diese eine Idee nicht im Xobor - Forum zum Laufen, nicht mal in den eigenen Seiten.
Hallo Daishi, das 3D Karussell aus Beitrag #1 weist einen interessanten Effekt auf. Die Richtung der Rotations in der Vertikalen ist auch etwas Besonders! Ist aber als Lightshow mit Foren-Codes im Forum kaum umzusetzen, weil bei Abweichungen von Anzahl und Größe der Bilder, viele Komponenten geändert werden müssen! Das Skript ist gut geeignet für eine feste Bildershow auf "Eigene Seiten"! Ich habe die senkrechte Stange ausgeblendet, weil sie doch ziemlich viel Platz in Anspruch nimmt! Zusätzlich habe ich das Karussell und die Bilder vergrößert! Es war noch ein kleiner Fehler im Skript, der letzte Div-Container war nicht abgeschlossen, es fehlte ein "</div"!
Hallo Daishi, die 3D Bildergalerie aus Beitrag #3 hat ansprechende Effekte, die ich so noch nicht gesehen habe. Top! Habe es im Forum umzusetzen können, hat ganz schön gedauert bis etwas Vernünftiges herauskam! Vieles war voneinander abhängig. Hat das Eine funktioniert, passte eine andere Einstellung nicht mehr! Nach wie vor faszinierend, was man allein über die CSS machen kann!
Zu Deinem Skript:
Ich habe keine Fehler feststellen können! Im HTML-Editor oder auf "Eigene Seiten" läuft es ansehnlich gut!
Ich habe eine Verlinkung vermisst, lässt sich aber ohne weiteres nachbauen!
Die Hintergründe und Transparenz nehmen die Schärfe des Front-Bildes, passt nicht bei allen Bildern, lässt sich ändern!
Danke, danke für die klasse Idee und Deine Arbeit!
Was das folgende Skript kann:
Die Bilder können nebeneinander oder untereinander platziert werden, ohne sich zu stören!
Die Größe der Bilder kann beliebig eingestellt werden, empfehlenswert ist es hier einen gleichen Wert für alle Bilder zu wählen!
Die Bilder können nach Belieben verlinkt werden!
Es können so viele Bilder eingetragen werden, wie erforderlich! Es wird derselbe Foren-Code für jedes weitere Bild benötigt!
Das Template wird nicht verändert!
So sieht die 3D Bildergalerie im Forum aus, hier mit 3 Bildern:
Größe der Bilder: 300 x 300px
Installation für alle Templates & Mobil
Einbau-Anleitung:
3D Bildergalerie komplett in HTML
3D Bildergalerie ins Forum einbauen
Neue Foren Codes für die 3D Bildergalerie
Einbau in die Iconbar + Erklärung
Kann zum Testen in einem HTML-Editor oder in die Fußzeile kopiert werden!
Will man den Hintergrund-Spezialeffekt nutzen, müssen die Zeilen 40, 49+50 freigegeben werden! Hier ist zu bedenken, dass die Bilder an Tiefenschärfe verlieren, um den speziellen Hintergrund einfließen zu lassen!
Will man die Breite der Bilder verändern, müssen die Zeilen 18, 52 +97 gleichermaßen geändert werden! Will man die Höhe verändern, müssen die Zeilen 19, 53, 74, 79, 87+98 gleichermaßen geändert werden!
In den Zeilen 110, 117 + 124 stecken die Verlinkungen zu den Originalbilder mittels "onclick"!
<script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> <script> window.addEventListener('load', function(){ //Animiert die Bilder beim Laden $('.canv').each(function (index, el) { window.setTimeout(function () { $(el).removeClass('animate-in'); }, 100 * index + 1500); }); }); </script>
Schließen
Der CSS-Eintrag und das Skript können in die Fußzeile oder besser als PIugin in "Untere Leiste - header" kopiert! werden
Wichtig! Im Plugin müssen rechts oben "Unterstützte Templates" markiert werden, z.B.: Business - Template (144) & Mobile - Template (177) (Auswahl mit Mausklick oder Strg + Mausklick)!
Will man den Hintergrund-Spezialeffekt nutzen, müssen die Zeilen 34,43+44 freigegeben werden! Hier ist zu bedenken, dass die Bilder an Tiefenschärfe verlieren, um den speziellen Hintergrund einfließen zu lassen!
Zeile 35 sorgt dafür das Bilder bei gleichen Breiten- und Höhenangaben nicht verzerrt dargestellt werden!
Über Zeile 14, 54 + 98 können die Aktionszeiten der 3D Bildergalerie etwas geändert, bzw. angepasst werden!
Hallo Daishi, auch die 3D Lightbox aus Beitrag #3 ist etwas Besonderes. Will man die 3D-Lightshow fürs Forum nutzen, kann sie nicht variabel eingesetzt werden. Sie kann nur als feste Vorgabe (hier 3 Bilder) verwendet werden! Bei jedem weiteren Bild oder ein Bild weniger, müsste eine Korrektur der Achsen-Position erfolgen....
Was mir aufgefallen ist:
Ich habe keine Fehler feststellen können! Im HTML-Editor oder auf "Eigene Seiten" läuft es !
Ich habe auch hier eine Verlinkung vermisst, lässt sich wenn es gebraucht wird, ohne weiteres nachbauen!
Was mir aufgefallen ist, ist die Trägheit der 3D Lightshow! Ich denke, das liegt an den supergroßen Bildern, die erstmal geladen werden müssen!
Danke, danke für die klasse Idee und Deine Arbeit!