Author Topic: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen  (Read 41223 times)

0 Members and 1 Guest are viewing this topic.

Offline pixelartist

  • Pre-Newbie
  • Posts: 6
  • Got it!
    • View Profile
    • Pixelartist
Hallo,

da ich leider keine zufriedenstellende Modifikation für die Gallery gefunden habe, habe ich da selber was gebastelt.

Problem: Wenn man Bilder mit größerer Auflösung hochläd, bekommt man einen Scrollbalken.


Lösung1: Die Bilder kleiner formatieren. Ich habe es nie in 4images probiert, da diese Lösung einen Verlust der ursprünglichen Bildgröße beeinhaltet.

Lösung2: Meine :) Durch ein Javascript wird die Auflösung des Browser und die Größe des Bildes ausgelesen und nur die Ansicht skaliert. Sie kann mit einem Klick wiederhergestellt werden und es geht nichts von dem ursprünglichem Bild verloren. Hierbei sei angemerkt, das der Traffic natürlich gleich bleibt, da das gleich Bild geladen wird (für Performance/Trafficprobleme gibt es schon einen Thread)

Demo: http://www.pixelartist.de (Dort auf Gallery) - leider nicht mehr aktiv!


Was tun?

Ihr müßt in eurem Template nur eine Datei ändern (ggf. mehrere, wenn ihr verschiedene Bildformate benutzt). Die Datei "jpg.html" findet ihr hier: "4images\default\media\jpg.html" - wobei natürlich default durch das Template ersetz werden muss was ihr benutzt.

Inhalt der Datei ist folgender:
Code: [Select]
<!-- Template file for JPG Files -->
<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />

Den gesammten Inhalt ersetzt ihr einfach durch folgendes Skript:
Code: [Select]
<!-- Template file for JPG Files -->
<!-- <img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br /> -->

<script language="javascript">
var saveWidth = 0;

function scaleImg(what){
what = document.getElementById(what);
 if (navigator.appName=="Netscape")
  winW = window.innerWidth;
 if (navigator.appName.indexOf("Microsoft")!=-1)
  winW = document.body.offsetWidth;
 if (what.width>(720) || saveWidth>(720)) {
  if (what.width==(720))
   what.width=saveWidth;

else
 {
 saveWidth = what.width;
 what.style.cursor = "pointer";
 what.width=(720);
 }

}
}
</script>

<font color="black" face="Verdana" size=-2>
Die Bilder werden teilweise verkleinert dargestellt. Klicken um das Original zu sehen <P>
</font>
<img id="picture" onClick="scaleImg('picture')" onLoad="scaleImg('picture')" SRC="{media_src}" alt="{image_name}">

Das Bild wird nun bei Seitenaufruf auf 720 px skaliert, das sollte für die meisten passen. Durch einen Klick auf das Bild wird das Originalbild angezeigt. Wer ein bischen Plan hat, kann die Größe natürlich auch selber anpassen :)

Wer keinen Plan hat .. fragt.




International Language:

I haven't found a solution for my problem. The picture in the gallery should be displayed scaled without formating it to a smaller version (which is already available in 4images). I have written a script in which is just the display new scaled .. nothing changed in the original file. If you click on the picture it is scaled back to its origin. ALl u have to do is change the script in the jpg.html (4images\default\media\jpg.html).

The origin script
Code: [Select]
<!-- Template file for JPG Files -->
<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />

Delete all and paste the following into the file:
Code: [Select]
<!-- Template file for JPG Files -->
<!-- <img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br /> -->

<script language="javascript">
var saveWidth = 0;

function scaleImg(what){
what = document.getElementById(what);
 if (navigator.appName=="Netscape")
  winW = window.innerWidth;
 if (navigator.appName.indexOf("Microsoft")!=-1)
  winW = document.body.offsetWidth;
 if (what.width>(720) || saveWidth>(720)) {
  if (what.width==(720))
   what.width=saveWidth;

else
 {
 saveWidth = what.width;
 what.style.cursor = "pointer";
 what.width=(720);
 }

}
}
</script>

<font color="black" face="Verdana" size=-2>
Picture is scaled to fit in view. Click to see the original file <P>
</font>
<img id="picture" onClick="scaleImg('picture')" onLoad="scaleImg('picture')" SRC="{media_src}" alt="{image_name}">
« Last Edit: June 14, 2007, 03:59:27 PM by pixelartist »
Die Vegatarier essen meinem Essen das Essen weg!

Offline pixelartist

  • Pre-Newbie
  • Posts: 6
  • Got it!
    • View Profile
    • Pixelartist
Re: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
« Reply #1 on: November 27, 2006, 10:12:01 PM »
Hoi,

da bin ich noch bei. Die Version ist noch nicht so final wie sie aussieht :) ABer danke für den Hinweis :)
Die Vegatarier essen meinem Essen das Essen weg!

Offline pixelartist

  • Pre-Newbie
  • Posts: 6
  • Got it!
    • View Profile
    • Pixelartist
Re: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
« Reply #2 on: November 27, 2006, 10:15:36 PM »
Wie mein Kollege immer zu sagen pflegt "Ist ja schon fertig" .. und nach hinten brüllt "Jetzt seht aber auch zu .. der Kunde nervt hier schon richtig rum"  :D
Die Vegatarier essen meinem Essen das Essen weg!

Offline birdhouse03

  • Pre-Newbie
  • Posts: 7
    • View Profile
Re: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
« Reply #3 on: June 13, 2007, 08:49:04 PM »
Wunderbarer Mod. Hab aber noch eine Frage dazu: Das Ganze funktioniert wunderbar mit Querformat-Bildern, nicht aber mit Hochformat-Bildern. Die werden nicht verkleinert dargestellt, da nur die Breite des Bildes berücksichtigt wird. Gibt es eine Möglichkeit auch Hochformat-Bilder zu verkleinern? Hab zwar schon jede Menge anderer Möglichkeiten hier im Forum gefunden, aber keine die derart einfach ist. Wäre für einen Tipp sehr dankbar.

Christian

Offline pixelartist

  • Pre-Newbie
  • Posts: 6
  • Got it!
    • View Profile
    • Pixelartist
Re: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
« Reply #4 on: June 14, 2007, 04:08:50 PM »
Hallo Christian,

es ist schon ein Weilchen her, das ich das Skript geschrieben habe, es sollte eigentlich für jegliche Übergröße funktionieren (aber dann hättest du dich ja nicht gemeldet). Eigentlich ist es sehr einfach aufgebaut und kann mit ein bischen Javascriptkenntnissen geändert werden. Solltest du damit nicht alleine zurechtkommen, werde ich mir das am Wochenende vielleicht noch einmal angucken ... wenn ihr nicht einen Hitzetod sterbe ;)

Gruß Manuel
Die Vegatarier essen meinem Essen das Essen weg!

Offline birdhouse03

  • Pre-Newbie
  • Posts: 7
    • View Profile
Re: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
« Reply #5 on: June 14, 2007, 09:17:00 PM »
Hallo Manuel,

Danke für die rasche Antwort. Habe selbst schon unter Anleitung eines Freundes versucht das Skript zu ändern, aber ohne Erfolg. Da ich so gut wie keine Kenntnisse über Javascript habe wäre es toll, wenn Du es schaffs die Änderungen vorzunehmen. Falls Du neugierig bist, mein Foto-Album ist unter folgender Adresse zu finden:

http://reiterweb.cwsurf.de/skate/

Danke schon mal vorab für Deine Hilfe,

Gruß Christian

Offline pixelartist

  • Pre-Newbie
  • Posts: 6
  • Got it!
    • View Profile
    • Pixelartist
Re: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
« Reply #6 on: June 14, 2007, 11:15:51 PM »
Okay,

kein Problem das du kein Javascript kannst. Ich kann dir nur leider nicht versprechen das es funktioniert, da ich keine Möglichkeit habe das in dem Template zu 100% zu testen, aber es sollte eigentlich so funktionieren.

Code: [Select]
<!-- Template file for JPG Files -->
<!-- <img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br /> -->

<script language="javascript">
var ow = 0;
var oh = 0;
var s = 728;
var onload_blows = 0;
function scale(img)
{
if (!onload_blows)
scale_load(img);

i = document.getElementById(img);
if (i.width > s) {
i.style.cursor = "pointer";
i.width = s;
i.height = s / (ow / oh);
} else if (i.width == s) {
i.width = ow;
i.height = oh;
}
}

function scale_load(img)
{
onload_blows = 1;

t = 0;
if (navigator.appName == "Netscape")
t = window.innerWidth;
else if (navigator.appName.indexOf("Microsoft") != -1 ||
navigator.appName.indexOf("Opera") != -1)
t = document.body.offsetWidth;

if (t > 64 && t < s)
s = t - 16;

i = document.getElementById(img);
ow = i.width;
oh = i.height;

scale(img);
}
</script>

<font color="black" face="Verdana" size=-2>
Die Bilder werden teilweise verkleinert dargestellt. Klicken um das Original zu sehen <P>
</font>
<img style="cursor: pointer;" id="picture" onclick="scale('img')" onload="scale_load('img')" src="{media_src}" alt="{image_name}">


Wenn es klappt, sag bitte noch einmal Bescheid.

Die 100 € kannst du mir dann ja überweisen  :lol:

P.S. Interessante Fotos hast du da! Ich bin selber mal aktiv gewesen, aber das ist lange her :)

International Language:

This is the updated version of the rescale javascript. Follow the instructions as given in the first post, but take the code above instead of the original one. New functions added to rescale picture now in height AND width.
Die Vegatarier essen meinem Essen das Essen weg!

Offline birdhouse03

  • Pre-Newbie
  • Posts: 7
    • View Profile
Re: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
« Reply #7 on: June 15, 2007, 10:36:58 PM »
Hallo Manuel,

danke für Deine Mühe. Hab das Skript eben getestet, aber es scheint nicht zu funktionieren. Es werden alle Bilder in Originalgröße dargestellt, egal ob Hoch- oder Querformat. Das Ergebnis kann man in meinem Album sehen.

Gruß Christian

PS: Habe eine zweite Homepage bei Funpic.de als Backup eingerichtet. Wenn Du willst kann ich Dir die Zugangsdaten mailen, damit könntest Du das Skript auch selbst testen.
« Last Edit: June 17, 2007, 10:29:04 AM by birdhouse03 »

Offline anser

  • Pre-Newbie
  • Posts: 5
    • View Profile
Re: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
« Reply #8 on: October 27, 2008, 02:55:53 PM »
Hallo,

ich habe die Lösung ausprobiert und hat auch genial funktioniert. Allerdings wenn ich im Backend die Bilddetails bearbeiten möchte habe ich immer noch das riesige Bild.

Hat vielleicht jemand einen Tipp wie ich das ganze auch im Backend hinbekomme?

Gruß

Andreas

Offline meier

  • Jr. Member
  • **
  • Posts: 58
    • View Profile
Re: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
« Reply #9 on: January 25, 2009, 02:11:00 PM »
Hallo, könnte man das vergrößern auf die mittlere Maustase legen? Auf der linke kommt bei mir schon das nächste Bild und das beist sich. Die Rechte ist ja gesperrt.

Oder das die Fenstergröße Prozentual angezeigt wird.
« Last Edit: January 25, 2009, 02:40:03 PM by meier »

Offline Hagen-Roderich

  • Full Member
  • ***
  • Posts: 127
    • View Profile
    • Hof Jokers
Re: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
« Reply #10 on: October 29, 2009, 01:13:13 PM »
Der Code aus dem ersten Post funktioniert. Die überarbeite Version bekomme ich aber nicht zum laufen. Da wird dann weder Quer- noch Hochformat skaliert.
Wie muss der Code angepasst werden?

Offline x23piracy

  • Sr. Member
  • ****
  • Posts: 420
    • View Profile
    • FHG
Re: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
« Reply #11 on: November 22, 2010, 05:49:49 PM »
Der Code aus dem ersten Post funktioniert. Die überarbeite Version bekomme ich aber nicht zum laufen. Da wird dann weder Quer- noch Hochformat skaliert.
Wie muss der Code angepasst werden?

Hi,

vielleicht hilft dir das?: http://www.4homepages.de/forum/index.php?topic=28340.0

Ich hab außerdem den Code aus dem ersten Code mal um die Höhe erweitert ;)

hier ist der Code:

Code: [Select]
<script language="javascript">
var saveWidth = 0;
var saveHeight = 0;

function scaleImg(what){
what = document.getElementById(what);
 if (navigator.appName=="Netscape") {
  winW = window.innerWidth;
  winH = window.innerHeight;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
 }
 if (what.width>(540) || saveWidth>(540)) {
  if (what.width==(540))
   what.width=saveWidth;

else
 {
 saveWidth = what.width;
 what.style.cursor = "pointer";
 what.width=(540);
 }

}

 if (what.height>(380) || saveHeight>(380)) {
  if (what.height==(380))
   what.height=saveHeight;

else
 {
 saveHeight = what.height;
 what.style.cursor = "pointer";
 what.height=(380);
 }

}

}
</script>


Gruß Jens
« Last Edit: November 22, 2010, 09:10:05 PM by x23piracy »

Don't trust in md5 it's unsafe change your 4i galerys password hash algorythm! second pw db field, create new hashes over some time, deny old hash. Help members that cry, send informationen mail to the rest. Camouflage new pw hash in cookie. Done!

--(◔̯◔)--

Offline Hagen-Roderich

  • Full Member
  • ***
  • Posts: 127
    • View Profile
    • Hof Jokers
Re: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
« Reply #12 on: November 24, 2010, 10:35:12 AM »
Ich habe den Code in die "jpg.html" kopiert und auf den Server hoch geladen.
Danach hatte ich gar kein Detailbild mehr. (siehe Anhang)
Muss der Code noch angepasst werden?

Info: hab jetzt wieder die originale "jpg.html" im Einsatz.

Offline mikemccoy

  • Pre-Newbie
  • Posts: 1
    • View Profile
Re: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
« Reply #13 on: December 27, 2010, 01:10:16 PM »
Hallo,

habe eine kurze Frage.
Das große Bild bleibt in der Detailansicht erhalten, d.h. ich habe das Bild doppelt.
Was könnte der Fehler sein?

Vielen Dank

Rembrandt

  • Guest
Re: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
« Reply #14 on: December 27, 2010, 05:21:03 PM »
Willkommen im Forum!
....Das große Bild bleibt in der Detailansicht erhalten, d.h. ich habe das Bild doppelt.
Was könnte der Fehler sein?
....

ich nehme mal an das du den originalcode in der jpg.html mittels   <!--  -->  nicht auskommentiert hast.

mfg Andi