Wahlschalter für Bildergröße

felix at 16h18
03
Oct
2011
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
Antworten
1 #Frank, am 03/10/2011 at 19h17
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.
2 felix, am 03/10/2011 at 19h49
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
3 #Frank, am 03/10/2011 at 20h16
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.
4 felix, am 03/10/2011 at 22h57
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 ... ?
5 #Frank, am 04/10/2011 at 09h50
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.
6 felix, am 04/10/2011 at 10h34
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
7 #Frank, am 04/10/2011 at 10h38
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.
8 felix, am 04/10/2011 at 11h04
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
9 #Frank, am 04/10/2011 at 11h48
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.
10 #Frank, am 04/10/2011 at 12h22
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:
11 felix, am 04/10/2011 at 13h42
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 ...


12 #Frank, am 04/10/2011 at 15h05
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.
13 felix, am 04/10/2011 at 17h13
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
14 #Frank, am 04/10/2011 at 17h23
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.
Similar topics
Wahlschalter
nach dem ich jetzt mehrere stunden daran gesessen habe den fehler im code zu finden frag ich nun euch. hab mir jetzt den wahlschalter erstellt mit insgesamt 11(!) styles (ich weiß man kann darüber streiten ob so viele styles wirklich notwendig sind aber
wahlschalter
Hallo,ich habe den Wahlschalter eingebaut, will aber das mein normaler style da ist,ich weiß aber nicht wo ich das:Code:if (type == 'wert1') {   document.write('<link rel="stylesheet" type="text/css"
Wahlschalter Problem
Hallo, Ich bins mal wieder^^ Ich habe heute nach Anleitung den Wahlschalter versucht ins Forum einzubauen. Aber irgendetwas mache ich falsch. Das Problem ist, dass wenn ich den Code in meine Forumsbeschreibung einfüge, der Wahlschalter nicht angezeigt
Antworten 1 zu 14 auf 14 für "Wahlschalter für Bildergröße "
Antworten
Informations

14 Antworten For the topic :
"Wahlschalter für Bildergröße "

This topic has been viewed 531 times.

Last message :
03/10/2011 at 16h18 von "felix"