Sie sind nicht angemeldet.

[Codeschnipsel] Image Resizer JQuery Plugin

Lieber Besucher, herzlich willkommen bei: BASE4U. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Grizzly

Administrator

  • »Grizzly« ist der Autor dieses Themas

Beiträge: 6 682

Aktivitätspunkte: 36 095

Wohnort: Lichtenau

Beruf: Anwendungsentwickler

  • Nachricht senden

1

Mittwoch, 11. Mai 2011, 22:02

Image Resizer JQuery Plugin

Hi @ all,

ich möchte euch hier ein kleinen Codeschnipsel zeigen, der dazu da ist um alle Bilder von einer Seite auf eine Betsimmte größe zu bringen, ohne an Qualität zu verlieren. Das bedeutet, dass die Bilder so skaliert werden, dass sie immer noch gut ausschauen, also nicht verzerrt. Dazu verwende ich JQuery. Ich habe auch ein JQuery-PlugIn geschrieben, welchen Ihr euch downloaden könnt, mit dem geht es sogar noch leichter (PlugIn in HTML Seite einfügen, und eine Zeile Code schrieben, fertig)

Also hier erstmal der Codeschnipsel

Javascript-Quelltext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready(function()
{

var max_size = 200; //Diese Größe wird die Maximal größe sein

$("img").each(function(i) {
//Die Bildergröße muss natürlich größer als die maximale sein, um sie überhaupt zu skalieren
	if ($(this).height() > max_size || $(this).width() > max_size)
	{
	  if ($(this).height() > $(this).width()) 
	  {
		var h = max_size;
		var w = Math.ceil($(this).width() / $(this).height() * max_size);
	  } 
	  else 
	  {
		var w = max_size;
		var h = Math.ceil($(this).height() / $(this).width() * max_size);
	  }

	  $(this).css({ height: h, width: w });
	}
});

});


Und hier habe ich mein Image Resizer JQuery PlugIn

Und so kann es verwendet werden:

Beispiel 1:

Javascript-Quelltext

1
2
3
4
5
6
7
<script type="text/javascript" language="javascript">

$(document).ready(function()
{
    $("img.resize").imageResizer(); //Default-Value: 200px
});
</script >


HTML

1
2
3
4
<img class="resize" src="../images/ac_2.png" />
<img class="resize" src="../images/ac_4.png" />
<img class="resize" src="../images/ac_6.png" />
<img class="resize" src="../images/ac_8.png" />


Beispiel 2:

Javascript-Quelltext

1
2
3
4
5
6
7
<script type="text/javascript" language="javascript">

$(document).ready(function()
{
    $("#resizeImages>img").imageResizer({max_width: 250})
});
</script >


HTML

1
2
3
4
5
6
<div id="resizeImages">
<img src="../images/ac_1.jpg" />
<img src="../images/ac_3.jpg" />
<img src="../images/ac_5.jpg" />
<img src="../images/ac_7.jpg" />
</div>


Edit Ich habe nun die Version 1.0.1 hochgeladen, jetzt kann man die Breite und Höhe statt der allgemeinen größe übergeben. Die Logik wurde zudem überarbeitet, da nun zwei Werte übergeben werden können.

Standartwert für höhe und breite ist 200 px


A.J.

Technik Redakteur

Beiträge: 1 952

Aktivitätspunkte: 10 315

Wohnort: Ansbach

Beruf: Fachinformatiker

  • Nachricht senden

2

Donnerstag, 12. Mai 2011, 09:34

Sehr cooles Addon, muss ich sicher auch auf meiner Page einbauen (falls ich mal dazu kommen sollte ...)

Grizzly

Administrator

  • »Grizzly« ist der Autor dieses Themas

Beiträge: 6 682

Aktivitätspunkte: 36 095

Wohnort: Lichtenau

Beruf: Anwendungsentwickler

  • Nachricht senden

3

Donnerstag, 12. Mai 2011, 10:37

Ja kuul, danke dass es dir gefällt, wenn es fragen gibt, einfach melden ne :) Und bei Fehlern auf jedenfall auch...

Grizzly

Administrator

  • »Grizzly« ist der Autor dieses Themas

Beiträge: 6 682

Aktivitätspunkte: 36 095

Wohnort: Lichtenau

Beruf: Anwendungsentwickler

  • Nachricht senden

4

Dienstag, 9. August 2011, 09:30

So auch von diesem PlugIn gibt es eine neue Version: Das ist neu: Die Logik wurde überarbeitet. Wenn nur ein Wert (z. B. nur maximale Höhe) angegeben wurde, dann wird der andere Wert extra berechnet. Solange zwei Werte angegeben wurden, wird das Bild NIE größer als der angegebene maximale Wert