Kazhal 1 Report post Posted March 2, 2011 Hallo, ich habe schon länger ein Aufgabe im Standardportal von IP.B umzusetzen und alle meine Bemühungen laufen bisher nicht wirklich perfekt, daher die Frage wie es einer von euch lösen würde oder ob es vllt. jemand eine fertige Mod dazu kennt: Im Portal soll in einem zusätzlichen Fenster in der Spalte in der auch die Seitennavigation, die empfohlenen Seiten usw. stehen ein zusätzlicher Kasten zu sehen sein, in dem ein zufällig ausgewähltes Bild dargestellt wird. Die Bilder haben allesamt eine fixe Breite von 400px und sollen auch nicht skaliert oder beschnitten werden. Sie liegen in einem Verzeichnis auf dem Forumsserver und sollen jeweils mit einer Webseite verlinkt sein (Mouseover). Bislang liegt die Zuordnung "Bild" zu URL in einer eigenen Tabelle in der Forumsdatenbank. Die Records in der Tabelle dienen so gesehen also auch als Gesamtliste für das zufällige Auswählen eines Bildes. Die Standard IP.Gallery ist übrigens ebenfalls installiert (falls dies hilfreich ist). Danke + Gruß PS: Alle meine Versuche liefen bislang nur suboptimal (Bilder werden beschnitten, Navigationsspalte und Forenspalte liegen plötzlich untereinander und nicht mehr nebeneinander, ein Vertauschen der Spalten im Portal liess das Portal gut aussehen aber vertauschte auch die Spalten im normalen Forumsbereich usw. ... alles irgendwie nix halbes und nix ganzes). Share this post Link to post
Kazhal 1 Report post Posted March 29, 2011 (edited) Hallo, ich möchte das Thema noch mal gerne aufgreifen, da ich nun eine andere Lösung habe, die ja vllt. den ein oder anderen interessiert. In dem Zusammenhang habe ich (wie könnte es auch anders sein) selber noch ein kleines Problem, aber vllt. weiß ja hier jemand die Lösung. Ich muss von vorneherein zugeben ich habe mir die "Zutaten" zu dieser Lösung zusammengeklaut habe bzw. größtenteils hat mir ein Freund hierbei unter die Arme gegriffen, da ich zwar selber Entwickler bin, jedoch unter einer vollkommen anderen Entwicklungsumgebung. Also wie folgt: Anstelle die Graphiken im Portal einzublenden, haben wir uns dazu entschieden die Sidebar hierfür herzunehmen. Angenehm ist hierbei natürlich, dass das IP.B die Einbindung von 'Ad Code' mittlerweile unterstützt und man den Code via ACP eintragen kann. Vorteil ganz klar: Kein wiederkehrendes Anpassen des Codes nach jedem Upgrade des Forums. Also rein ins ACP, suchen nach 'Ad Code' und dann in die gewählte Box den Code eintragen (ggf. die Einstellungen der Maße der Graphiken editieren: <iframe src="http://www.forum.de/.../randomBanner.html" id="bildframe" width="400" height="300" align="left" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen </p> </iframe> Dann noch die verlinkte html-Datei hochladen (Pfad zur JS-Datei anpassen): <html> <head><title>Test</title> <script type="text/javascript" src="http://www.forum.de/.../randomBanner.js"> </script> </head> <body onload="zeigeBanner()"> <div id="Bildbereich"></div> </body> </html> und das Javascript was wiederum in der html-Datei aufgerufen wird (verlinkte Webseiten und die absoluten Pfade zu den Bildern anpassen und ggf. durch weitere ergänzen): var lnks = new Array (); lnks[0] = new Object(); lnks[0]["url"] = "http://www.homepage-0.de"; lnks[0]["image"] = "http://www.forum.de/images/.../bild-0.png"; lnks[1] = new Object(); lnks[1]["url"] = "http://www.homepage-1.eu"; lnks[1]["image"] = "http://www.forum.de/images/.../bild-1.jpg"; lnks[2] = new Object(); lnks[2]["url"] = "http://www.homepage-2.com"; lnks[2]["image"] = "http://www.t5net-forum.de/images/.../bild-2.png"; var DHTML = false, DOM = false, MSIE4 = false, NS4 = false, OP = false; if (document.getElementById) { DHTML = true; DOM = true; } else { if (document.all) { DHTML = true; MSIE4 = true; } else { if (document.layers) { DHTML = true; NS4 = true; } } } if (window.opera) { OP = true; } function getElement (Mode, Identifier, ElementNumber) { var Element, ElementList; if (DOM) { if (Mode.toLowerCase() == "id") { Element = document.getElementById(Identifier); if (!Element) { Element = false; } return Element; } if (Mode.toLowerCase() == "name") { ElementList = document.getElementsByName(Identifier); Element = ElementList[ElementNumber]; if (!Element) { Element = false; } return Element; } if (Mode.toLowerCase() == "tagname") { ElementList = document.getElementsByTagName(Identifier); Element = ElementList[ElementNumber]; if (!Element) { Element = false; } return Element; } return false; } if (MSIE4) { if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") { Element = document.all(Identifier); if (!Element) { Element = false; } return Element; } if (Mode.toLowerCase() == "tagname") { ElementList = document.all.tags(Identifier); Element = ElementList[ElementNumber]; if (!Element) { Element = false; } return Element; } return false; } if (NS4) { if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") { Element = document[Identifier]; if (!Element) { Element = document.anchors[Identifier]; } if (!Element) { Element = false; } return Element; } if (Mode.toLowerCase() == "layerindex") { Element = document.layers[Identifier]; if (!Element) { Element = false; } return Element; } return false; } return false; } function getAttribute (Mode, Identifier, ElementNumber, AttributeName) { var Attribute; var Element = getElement(Mode, Identifier, ElementNumber); if (!Element) { return false; } if (DOM || MSIE4) { Attribute = Element.getAttribute(AttributeName); return Attribute; } if (NS4) { Attribute = Element[AttributeName] if (!Attribute) { Attribute = false; } return Attribute; } return false; } function getContent (Mode, Identifier, ElementNumber) { var Content; var Element = getElement(Mode, Identifier, ElementNumber); if (!Element) { return false; } if (DOM && Element.firstChild) { if (Element.firstChild.nodeType == 3) { Content = Element.firstChild.nodeValue; } else { Content = ""; } return Content; } if (MSIE4) { Content = Element.innerText; return Content; } return false; } function setContent (Mode, Identifier, ElementNumber, Text) { var Element = getElement(Mode, Identifier, ElementNumber); if (!Element) { return false; } if (DOM && Element.firstChild) { Element.firstChild.nodeValue = Text; return true; } if (MSIE4) { Element.innerText = Text; return true; } if (NS4) { Element.document.open(); Element.document.write(Text); Element.document.close(); return true; } } function zeigeBanner() { showLinkNr = Math.floor(Math.random()* (lnks.length) ); bildbereich = getElement("id", "Bildbereich"); var img = document.createElement("img"); img.setAttribute("src", lnks[showLinkNr]["image"]); img.setAttribute("width", "100%"); img.setAttribute("border", "0"); var anker = document.createElement("a"); anker.setAttribute("href", lnks[showLinkNr]["url"]); anker.setAttribute("target", "blank"); anker.appendChild(img); bildbereich.appendChild(anker); var blubb = links[showLinkNr]["url"] + " - " + links[showLinkNr]["image"]; } Das Ergebnis kann man hier sehen: T5net-Forum Damit die 400px-Bilder nicht beschnitten werden (bezogen auf die "Standardauflösung" von mind. 1280x...) habe ich noch das Verhältnis der Spalten zueinander gemäss Helges Hinweisen angepasst (Klick mich, je 10% schmaler bzw. breiter). Funktioniert soweit alles ganz gut. Allerdings zwei Dinge würde ich gerne noch verbessern, vllt. weiß einer von euch wie: Zieht man das Fenster weiter auf, so reiht sich das nächste darunter liegende Fenster mit den <Neuesten Themen> einfach direkt rechts daneben an. Wenn ich es vergleiche mit einem meiner anderen Boards, in dem ich an gleicher Stelle eine Amazon-Einbindung habe, passiert das nicht. Da die neuen Themen dabei optische abgeschnitten werden würde ich das gerne verbessern (simpel ausgedrückt: da fehlt irgendwie ein Zeilenumbruch).Die Fensterhöhe ist immer fix (atm 300px). Schöner wäre es natürlich, wenn sie sich dynamisch anpassen würde. Statt den '300' einfach 'auto' einzutragen zeigt zwar Wirkung, aber leider nicht die gewünschte (die Graphiken werden beschnitten). BG Edited March 29, 2011 by Kazhal Share this post Link to post
