Wahlschalter für Bildergröße

Hallo,

ich habe im CSS folgendes stehen :

Code:

.postbody img {
        max-width: 80%;
        }*/

Damit werden alle Fotos in Beiträgen automatisch auf eine bestimmte Größe skaliert.
Meine Testuser fänden es aber viel besser wenn jeder User selbst seine persönliche Größe einstellen könne.

Ich würde gerne so einen Wahlschalter im Template overall_header integrieren (so ähnlich ungefähr) :

Code:

<!-- BEGIN switch_user_logged_in -->

<div class="gensmall">
<div style="position: fixed; bottom: 200px; left: 20px; z-index: 10000;">
<a href=.....>
<img src="bild-1" title="auf 600px ändern"/>
</a>
<br/><br/>
<a href=.....>
<img src="bild-2" title="auf 800px ändern"/>
</a>
</div>
</div>

<!-- END switch_user_logged_in -->

Ich weiß ihr macht es freiwillig und würde mich freuen wenn jemand von euch mir da etwas behilflich sein würde.

mfg
felix

Hallo,
Das ist nicht möglich, weil du hier eine Aktion an den Server senden müsstest der dann diesen Wert Automatisch in das Template der Beitragsanzeige einsetzen muss. Das ganze brauchte dann noch einen Cookie.
Da du hier kein Serverzugriff in der Art hast, ist das nicht möglich.

Wenn der Wert nach dem Logout gespeichert werden soll dann bräuchte man einen Cookie, ja ... aber wenn beim Login grundsätzlich für alle User erstmal die normale Einstellung geladen wird und dieser erst dann auf eigenen Wunsch wechseln würde, dann bräuchte ich kein Cookie und auch kein Serverzugriff oder verstehe ich das falsch ? Eine dynamische CSS-Änderung geht also auch nicht ? Schade! Trotzdem Danke.

felix

Du kannst es mit einem Java Script versuchen, das diesen Wert dann immer dem Img Tag hinzufügt, aber ich denke das das nicht so einfach ist.
Das währe noch das was mir dazu einfallen würde.

Habe gelesen dass CSS-Änderungen durch Javascript zu dessen Stärke gehört. Nun, ich kann leider kein Javascript. Vielleicht weißt du oder Zuckerpuppe da etwas ... ?

Ich denke nicht, das wir hier so was programmieren werden.
Es steht dir frei, dich in einschlägigen Java Foren an die dortigen Programmierer zu wenden.

Dank deinen Tip mit Javascript ... das habe ich auch mal heute morgen gemacht und verschiedene Möglichkeiten ausprobiert die ich fand. Eine davon ging sehr gut im Template. Wenn Interesse dann würde ich den Code denn ich gebastelt habe hier einstellen. Ansonsten kannst du hier schließen.

mfg
felix

Wenn du möchtest, dann kannst du das hier gerne veröffentlichen.
Aber dann versuche es bitte so zu erklären, das es andere auch verstehen können.
Ein paar Screenshots dazu währen auch nicht schlecht.

Ok.
Erstmal der Code in Javascript - dieser trägt bei jedem Aufruf einen neuen CSS-Befehl im Stylesheet ein. Da die Browser immer den letzten Eintrag nehmen braucht man die vorherigen nicht zu löschen oder zu ändern. (so habe ich das mal im Netz entnommen).

Code:

<script type="text/javascript">
 function bilder_klein ()
 {
  var css = document.styleSheets[0];
  var rule = ".postbody img {max-width: 200px; !important;}";
  css.insertRule(rule, css.cssRules.length);
 }

 function bilder_mittel ()
 {
  var css = document.styleSheets[0];
  var rule = ".postbody img {max-width: 400px;!important;}";
  css.insertRule(rule, css.cssRules.length);
 }

 function bilder_gross ()
 {
  var css = document.styleSheets[0];
  var rule = ".postbody img {max-width: 600px;!important;}";
  css.insertRule(rule, css.cssRules.length);
 }
</script>

<p><a href="javascript:bilder_klein()">&auml;ndern auf 200px</a></p>
<p><a href="javascript:bilder_mittel()">&auml;ndern auf 400px</a></p>
<p><a href="javascript:bilder_gross()">&auml;ndern auf 600px</a></p>

Jetzt dieser Code im Template overall_header ganz am Ende so einfügen :
Anmerkung : Diese Links werden am Rand rechts unten des Hintergrundbildes platziert und ist nur für eingeloggte User sichtbar.
Beim Anklicken des jeweiligen Link ändern sich dynamisch immer die Bilder in den Posts auf die festgelegte Bildgröße in den Funktionen.

Code:

<!-- BEGIN switch_user_logged_in -->
<div class="gensmall">
<div style="position: fixed; bottom: 100px; right: 20px; z-index: 10000;">

<script type="text/javascript">
 function bilder_klein ()
 {
  var css = document.styleSheets[0];
  var rule = ".postbody img {max-width: 200px; !important;}";
  css.insertRule(rule, css.cssRules.length);
 }

 function bilder_mittel ()
 {
  var css = document.styleSheets[0];
  var rule = ".postbody img {max-width: 400px;!important;}";
  css.insertRule(rule, css.cssRules.length);
 }

 function bilder_gross ()
 {
  var css = document.styleSheets[0];
  var rule = ".postbody img {max-width: 600px;!important;}";
  css.insertRule(rule, css.cssRules.length);
 }
</script>

<p><a href="javascript:bilder_klein()">&auml;ndern auf 200px</a></p>
<p><a href="javascript:bilder_mittel()">&auml;ndern auf 400px</a></p>
<p><a href="javascript:bilder_gross()">&auml;ndern auf 600px</a></p>

</div>
</div>
<!-- END switch_user_logged_in -->

Es geht zumindest mal bei mir unter Opera einwandfrei. Ich glaube bei IE heisst dieser Befehl insertRule etwas anders und man müsste da wohl auch für IE noch eine Zusatzzeile spendieren (habe ich aber noch nicht getestet).
Hoffe, ich habe diese verständlich erklären können.

mfg
felix

Sehr schön, ich habe es gleich mal getestet und es Funktioniert in allen Browsern bist auf im IE.
Wenn man das ganze nun noch in das Template viewtopic_body einsetzt, dann wird einem das Menü nur noch in den Beiträgen angezeigt, wo es eigentlich auch hin soll.

Ich habe das Menü nun noch mal von dem Einfachen Text Menü in eine Tabelle mit Buttons umgewandelt.
Der Code der hierfür an das ende des Templates:
viewtopic_body
eingesetzt werden muss ist dieser:

Code:

    <!-- BEGIN switch_user_logged_in -->
    <div class="gensmall">
    <div style="position: fixed; bottom: 20px; right: 5px; z-index: 10000;">

    <script type="text/javascript">
    function bilder_klein ()
    {
      var css = document.styleSheets[0];
      var rule = ".postbody img {max-width: 200px; !important;}";
      css.insertRule(rule, css.cssRules.length);
    }

    function bilder_mittel ()
    {
      var css = document.styleSheets[0];
      var rule = ".postbody img {max-width: 400px;!important;}";
      css.insertRule(rule, css.cssRules.length);
    }

    function bilder_gross ()
    {
      var css = document.styleSheets[0];
      var rule = ".postbody img {max-width: 600px;!important;}";
      css.insertRule(rule, css.cssRules.length);
    }

    function bilder_ggross ()
    {
      var css = document.styleSheets[0];
      var rule = ".postbody img {max-width: 800px;!important;}";
      css.insertRule(rule, css.cssRules.length);
    }

    function bilder_normal ()
    {
      var css = document.styleSheets[0];
      var rule = ".postbody img {max-width: 100%;!important;}";
      css.insertRule(rule, css.cssRules.length);
    }
    </script>

<table border="0" width="102" background="http://hitskin.com/themes/16/50/11/i_back_title.jpg" bordercolor="#3D3D3D">
  <tr>
    <td class="row1" align="center"><h1 class="cattitle">Bildgr&ouml;&szlig;e &auml;ndern</h1></td>
  </tr>
  <tr>
    <td class="row1" align="center"><a class="nav" href="javascript:bilder_klein()"><img src="http://www.abload.de/img/200px2c1y.png" title="&auml;ndern auf 200px"></a></td>
  </tr>
  <tr>
    <td class="row1" align="center"><a class="nav" href="javascript:bilder_mittel()"><img src="http://www.abload.de/img/400pxye8b.png" title="&auml;ndern auf 400px"></a></td>
  </tr>
  <tr>
    <td class="row1" align="center"><a class="nav" href="javascript:bilder_gross()"><img src="http://www.abload.de/img/600pxrdo6.png" title="&auml;ndern auf 600px"></a></td>
  </tr>
  <tr>
    <td class="row1" align="center"><a class="nav" href="javascript:bilder_ggross()"><img src="http://www.abload.de/img/800pxtdnz.png" title="&auml;ndern auf 800px"></a></td>
  </tr>
  <tr>
    <td class="row1" align="center"><a class="nav" href="javascript:bilder_normal()"><img src="http://www.abload.de/img/normalydy0.png" title="&auml;ndern auf Normal"></a></td>
  </tr>
</table>
    </div>
    </div>
    <!-- END switch_user_logged_in -->

Aussehen soll es dann so:

Hallo Frank,
habs mal in viewtopic_body verschoben.
Ich musste aber leider im Nachhinein feststellen, dass -wenn ich ".postbody img {max-width: 100%;!important;}" hinzufüge- meine Bilder trotzdem nicht die ganze Breite des Postingareal einnehmen. Stattdessen erscheint über den Bildern : "Dieses Foto vergrößern". Erst wenn ich diese anklicke, dann erst wird die max Größe angezeigt. Die Javascript-Funktion geht aber scheinbar nur bis zu dieser Breite (Screen 1, darunter gehen alle gewählte Breiten). Ist das bei dir auch so oder habe ich da irgendwo noch etwas was die volle Ausbreitung verhindert ? Im CSS habe ich da nix mehr stehen ...

Das passiert, wenn die Änderung der Bildgröße Aktiviert ist.
Du findest diese Einstellung unter:
Allgemein --> Beitragsoptionen, Privatnachrichten, Mails --> Einstellungen

Im Bereich Beiträge ist es die letzte Option. Dort musst du bei beiden Feldern "0" eingeben, dann ist diese Funktion deaktiviert und die Bilder werden auch mit ihrer Normalen Größe angezeigt.

Danke, jetzt geht es!
Edit : Fehlt nur noch das mit dem IE, dort müsste man statt "insertRules" "addRules" einsetzen.
Aber ich bin auch so zufrieden und IE-User müssen sich halt mit der Standardgröße begnügen.

mfg
felix

An der Sache mit dem IE war ich vorhin auch schon dran. Aber dann bin ich wieder davon Abgekommen.
Aber den Ansatz hatte ich auch schon gefunden.
Ich hatte auch schon überlegt, das man die Funktion noch an anderer Stelle einsetzt, aber habe dann für mich entschieden, das es so mit der festen Zusatz Tabelle doch am besten gelöst ist.