Simple Image Resize

[dennis84]

Kann ich die dynamische Breite in einen festen Wert umwandeln?
Hab bei mir links und rechts ränder, mit dem obigen befehl also screen weight-400 klappt das bei 1024x768 ganz gut, gedoch wenn ich mit 1280x1024 die seite betrachtet, dann wird das bild größer als das Forum (mein Banner ist genau so breit wie das Forum, deshalb fällts leider auf )
Jemand ne idee?

[Max]

kannst ja die -400 in -750 ändern, dann passt das --> www.ssvforum.de (Ergebnis schon gleich im Portal zu sehen)


Gruß Max

[mgutt]

kannst ja die -400 in -750 ändern, dann passt das --> www.ssvforum.de (Ergebnis schon gleich im Portal zu sehen)


Gruß Max

und bei 1600

das bild wird bei 800x600er auflösung arg klein

man muss hier mit einem mittelwert leben.

[mgutt]

Ich bin immer noch dran.

Jetzt sieht der Code z.B. so aus:

overall_header.tpl im Headbereich:

Code: Alles auswählen

<script language="javascript">
<!--
var shownwidth = 640;
var savedwidth = 0;

function sizepic(pic)
{
	pic = document.getElementById(pic);
	if (pic.width>shownwidth || savedwidth>shownwidth)
	{
		if (pic.width==shownwidth)
		{
			pic.width = savedwidth;
		}
		else
		{
			savedwidth = pic.width;
			pic.style.cursor = "pointer";
			pic.width = shownwidth;
		}
	}
}
//-->
</script>

und in der bbcode.tpl:

Code: Alles auswählen

<!-- BEGIN img --><img src="{URL}" id="pic" border="0" onClick="sizepic('pic')" onLoad="sizepic('pic')" /><!-- END img -->

Funktioniert aber leider nicht richtig. Die Funktion wir bei jedem Bild für alle Bilder ausgelöst.

Klickt man auf ein Bild, dann werden alle auf der Seite wieder groß. Und beim Laden entsprechend nacheinander alle, klein, groß, klein, usw.

Hm.. weiß nicht wie man das mit this jetzt beschränken könnte.

[dennis84]

Hast du diesen MOD schon versucht?

Code: Alles auswählen

##############################################################
# Title: No Thread Stretch
# Author: Thoul  thoul@users.sourceforge.net  http://darkmods.sourceforge.net
# Description: Prevents page stretching by long images and text.
# Version: 1.3.0
#
# Installation Level: Easy
# Installation Time: 5 Minutes
# Files To Edit: overall_header.tpl, viewtopic_body.tpl
# Included Files: no_thread_stretch.js and Several overflow*.css files
############################################################## 
# Author's Notes:
# See the readme.txt file for notes, including install and upgrade instructions, 
# okay? Okay.
############################################################## 
# BEFORE ADDING THIS TO YOUR FORUM, YOU SHOULD BACK UP ALL RELATED FILES.
############################################################## 

Soll angeblich den gleichen Effekt haben.

[mgutt]

mein aktueller Code:

bbcode.tpl:

Code: Alles auswählen

<!-- BEGIN img --><img src="{URL}" border="0" onMouseover="resize(this)" onLoad="resize(this)" /><!-- END img -->

in viewtopic_body.tpl:

Code: Alles auswählen

<SCRIPT LANGUAGE="JavaScript">
<!--
function resize(img)
{
	if (img.width > screen.width-400)
	{
		img.width = (screen.width-400);
	}
}
//-->
</SCRIPT>

Funktioniert schon länger. Beim ersten Laden der Seite werden die Bilder verkleinert und beim drüber schweben mit der Maus, falls die Bilder bereits im Cache sind.

Gruß

[senyafin]

@mgutt - werden bei deinem resize mod die proportionen beibehalten?

Ich benutze diesen, bin aber nicht so zufrieden damit

Code: Alles auswählen

   1. ##############################################################  
   2. ## MOD Title: Image Mouseover Resize MOD  
   3. ## MOD Author: Kinetix < webmaster@ikrontik.tk > (N/A) http://www.ikrontik.tk  
   4. ## MOD Description: This MOD limits image width - which if too big will cause the  
   5. ##                  extending of your theme. Move your mouse over an image and  
   6. ##                  it will go to full size. Move the mouse off and back to small size.  
   7. ## MOD Version: 1.0.0  
   8. ##  
   9. ## Installation Level: Easy  
  10. ## Installation Time: 5 Minutes  
  11. ## Files To Edit: 4:  templates/subSilver/overall_header.tpl  
  12. ##                    templates/subSilver/simple_header.tpl  
  13. ##                    templates/subSilver/admin/page_header.tpl  
  14. ##                    templates/subSilver/bbcode.tpl  
  15. ## Included Files: 0  
  16. ##############################################################  
  17. ## For Security Purposes, Please Check: http://www.phpbb.com/mods/ for the  
  18. ## latest version of this MOD. Downloading this MOD from other sites could cause malicious code  
  19. ## to enter into your phpBB Forum. As such, phpBB will not offer support for MOD's not offered  
  20. ## in our MOD-Database, located at: http://www.phpbb.com/mods/  
  21. ##############################################################  
  22. ## Author Notes: You need to add the Javascript stuff to the 3 header  
  23. ##               TPL files.  
  24. ##               This MOD is especially made for templates such as Solaris,  
  25. ##               in which large images will cause breaking of the page.  
  26. ##                 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  
  27. ##                   How to modify the width limitation:  
  28. ##                     Search for every instance of the number 700  
  29. ##                     in this file and change it to the pixel size you  
  30. ##                     want images resized to.  
  31. ##                 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  
  32. ##  
  33. ##############################################################  
  34. ## MOD History:  
  35. ##              1.0.0 - Release Candidate 0/Final  
  36. ##              0.9.1 - Fixed the location of page_header.tpl (forgot admin/)  
  37. ##              0.9.0 - Initial Beta Release  
  38. ##  
  39. ##############################################################  
  40. ## Before Adding This MOD To Your Forum, You Should Back Up All Files Related To This MOD  
  41. ##############################################################  
  42.  
  43. #  
  44. #-----[ OPEN ]------------------------------------------  
  45. #  
  46. templates/subSilver/overall_header.tpl  
  47. #  
  48. #-----[ FIND ]------------------------------------------  
  49. #  
  50. </head  
  51. #  
  52. #-----[ BEFORE, ADD ]------------------------------------------  
  53. #  
  54. <script type="text/javascript">  
  55. function setImageDimensions(gotImage)  
  56. {  
  57.  if(gotImage.width > 700) {  
  58.    gotImage.width = 700;  
  59.  }  
  60. }  
  61. function changeImageDimensions(gotImage, type)  
  62. {  
  63.  if(gotImage.width > 700 && type == 'out') {  
  64.    gotImage.width = 700;  
  65.    return;  
  66.  }  
  67.  if(type == 'over') {  
  68.    gotImage.removeAttribute('width');  
  69.  }  
  70. }  
  71. </script>  
  72. #  
  73. #-----[ OPEN ]------------------------------------------  
  74. #  
  75. templates/subSilver/simple_header.tpl  
  76. #  
  77. #-----[ FIND ]------------------------------------------  
  78. #  
  79. </head  
  80. #  
  81. #-----[ BEFORE, ADD ]------------------------------------------  
  82. #  
  83. <script type="text/javascript">  
  84. function setImageDimensions(gotImage)  
  85. {  
  86.  if(gotImage.width > 700) {  
  87.    gotImage.width = 700;  
  88.  }  
  89. }  
  90. function changeImageDimensions(gotImage, type)  
  91. {  
  92.  if(gotImage.width > 700 && type == 'out') {  
  93.    gotImage.width = 700;  
  94.    return;  
  95.  }  
  96.  if(type == 'over') {  
  97.    gotImage.removeAttribute('width');  
  98.  }  
  99. }  
 100. </script>  
 101. #  
 102. #-----[ OPEN ]------------------------------------------  
 103. #  
 104. templates/subSilver/admin/page_header.tpl  
 105. #  
 106. #-----[ FIND ]------------------------------------------  
 107. #  
 108. </head  
 109. #  
 110. #-----[ BEFORE, ADD ]------------------------------------------  
 111. #  
 112. <script type="text/javascript">  
 113. function setImageDimensions(gotImage)  
 114. {  
 115.  if(gotImage.width > 700) {  
 116.    gotImage.width = 700;  
 117.  }  
 118. }  
 119. function changeImageDimensions(gotImage, type)  
 120. {  
 121.  if(gotImage.width > 700 && type == 'out') {  
 122.    gotImage.width = 700;  
 123.    return;  
 124.  }  
 125.  if(type == 'over') {  
 126.    gotImage.removeAttribute('width');  
 127.  }  
 128. }  
 129. </script>  
 130. #  
 131. #-----[ OPEN ]------------------------------------------  
 132. #  
 133. templates/subSilver/bbcode.tpl  
 134. #  
 135. #-----[ FIND ]------------------------------------------  
 136. #  
 137. <!-- BEGIN img -->  
 138. #  
 139. #-----[ IN-LINE FIND ]----------------------------------------  
 140. #  
 141. <img  
 142. #  
 143. #-----[ IN-LINE AFTER, ADD ]----------------------------------  
 144. #  
 145. onload="setImageDimensions(this)" onmouseover="changeImageDimensions(this, 'over')" onmouseout="changeImageDimensions(this, 'out')"  
 146. #  
 147. #-----[ SAVE/CLOSE ALL FILES ]------------------------------------------  
 148. #  
 149. # EoM 

[easygo]

mein aktueller Code:

Ahja die Minimalscriptlösung also.

und hast du schon mal beobachtet, was passiert, wenn so ein Bild beim
Antwort erstellen im iframe vom Topic Review auftaucht?

Gibt das keinen Scriptfehler bei dir? easy

[mgutt]

Nein, läuft super.. der js-code ist natürlich auch in der Vorschau platziert. Ist bisher die einzige Lösung, die erträglich funktioniert. Ich versuche nach ne Variante zu machen mit dem ich das Bild bei Bedarf groß machen kann. Werde das noch nachreichen.

Gruß

[easygo]

Nein, läuft super.. der js-code ist natürlich auch in der Vorschau platziert.

Wo genau?

Ich versuche nach ne Variante zu machen mit dem ich das Bild bei Bedarf groß machen kann. Werde das noch nachreichen.

Warum nicht, aber dazu gibts schon tausend Varianten. easy