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:
<!-- 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:
<!-- 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
<!-- 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:
<!-- 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}">
