[MOD] Details Ansicht / Größe des Bildes begrenzen

4images Modifications / Modifikationen > Mods & Plugins (Releases & Support)

(1/25) > >>

michi-w.:
(es wurde alles bis zum 21.12.05 berücksichtig und mit Script-Version 1.7 getestet)
Enthält in seiner Gesamtheit folgende Veränderungen:

1. Die Größe eines jpg Bildes in der Detail-Ansicht wird begrenzt, nach einem Klick auf die begrenzte Ansicht öffnet sich ein neues Browser-Fenster mit der Original Größe.
2. Mit der Erweiterung werden zwei Links (oben und unten) hinzugefügt, die den Klick auf das Bild ersetzen bzw. entsprechen. Damit ist diese Funktion für den User besser verständlich.
3. Nach dem Klick auf ein Thumbnail öffnet sich ein neues Browser-Fenster.

--- Quote ---1. Größe eines jpg Bildes begrenzen
Mit diesem Mod wird die Größe eines jpg Bildes in der Detail-Ansicht auf eine bestimmte Größe begrenzt. Falls die gesamte Größe erwünscht ist, muss auf die kleiner Version geklickt werden und das Bild öffnet sich in ganzer Größe in einem neuen Browser Fenster.
Demo: http://www.web-upload.de

includes/functions.php

finde:

--- Code: ---if ($image_info = @getimagesize($src, $info)) {
$width_height = " ".$image_info[3];
$width = $image_info[0];
$height = $image_info[1];
--- End code ---

danach einfügen:

--- Code: ---if (($width > $height) && ($width > 550)){
$new_limit = "550";
$limit_var = "width";
}elseif (($width < $height) && ($height > 550)){
$new_limit = "550";
$limit_var = "height";
}else {
$new_limit = $image_info[0];
$limit_var = "width";
}
--- End code ---

finde:

--- Code: ---"&mode=".$mode : ""))."\">".$media_icon."</a>";
}
$width_height = "";
$width = "";
$height = "";
--- End code ---

danach einfügen:

--- Code: ---
$limit_var = "";
$new_limit = "";
--- End code ---

finde:

--- Code: --- $site_template->register_vars(array(
"media_src" => $media_src,
"media_icon" => $media_icon,
"image_name" => $image_name,
"width_height" => $width_height,
"width" => $width,
"height" => $height,
--- End code ---

danach einfügen:

--- Code: --- "new_limit" => $new_limit,
"limit_var" => $limit_var,
--- End code ---

templates\default\details.html
(sollte die Erweiterung eingebaut werden, die details.html nicht verändern)

suche:

--- Code: ---{image}
--- End code ---

ersetzen durch:

--- Code: ---<a href="{media_src}" target="_blank">{image}</a>
--- End code ---

templates\default\media\jpg.html

--- Code: ---<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />
--- End code ---

ersetzen durch:

--- Code: ---<img src="{media_src}" border="0" alt="{image_name}" {limit_var}="{new_limit}" />
--- End code ---

--- End quote ---

--- Quote ---Veränderungen in der Größe werden in der functions.php vorgenommen, durch das verändern der Zahlen.

--- Quote ---if (($width > $height) && ($width > 550)){
$new_limit = "550";
$limit_var = "width";
}elseif (($width < $height) && ($height > 550)){
$new_limit = "550";
--- End quote ---

--- End quote ---

--- Quote ---2. Erweiterung von JensF (Nachtrag beachten)
Das geht nur mit der Script Version 1.7.
Mit dem o.g. Abschnitt öffnet sich das vollständige Bild erst bei einem zusätzlichen Klick in der Detail-Ansicht. Mit der nun folgenden Ergänzung ändert sich das und man hat statt dessen einen Link über und unter der Detail-Ansicht, die das vollständige Bild aufrufen können.

1.
öffne includes/page_header.php und suche

--- Code: ---"direction" => $lang['direction']
--- End code ---

füge davor ein

--- Code: ---"vollbild" => $lang['vollbild'],
--- End code ---

2.
öffne die templates\default\details.html und suche

--- Code: ---{image}
--- End code ---

ersetze es mit

--- Code: ---{vollbild}<br>{image}<br>{vollbild}
--- End code ---

3.
öffne lang/sprache/main.php und setze vor ?> folgendes ein

--- Code: ---$lang['vollbild'] = "<a href=\"{media_src}\" target=\"_blank\">[Klicke hier um das Bild in voller Größe zu sehen!]</a>";
--- End code ---

Nachtrag
So kann man den Vergrößerungs-Link ab Version 1.7.1 darstellen.

--- Code: ---<a href="{media_src}" target="_blank">[Bitte hier klicken, um das Bild in voller Größe zu sehen!]</a>
<br />{image}<br />
--- End code ---
Im Prinzip müsste das auch bei der Version 1.7 gehen, also kann man sich die Erweiterung von JensF eigentlich sparen und gleich diese Methoden anwenden.
--- End quote ---

Sinnvolle Ergänzungen

--- Quote ---3. Durch das Anklicken auf einen Thumbnail öffnet sich ein neues Browser Fenster.

templates\default\thumbnail_bit.html

suche

--- Code: ---{thumbnail}
--- End code ---

ersetzen durch

--- Code: ---{thumbnail_openwindow}
--- End code ---

--- End quote ---

--- Quote ---Die Größe oder das Aussehen des Browser Fenster kannst du über die templates\default\header.html verändern. Dort gibt es diesen Javascript:

--- Code: ---<script language="javascript" type="text/javascript">

</script>
--- End code ---

--- End quote ---

--- Quote ---Größe

--- Quote ---width=680,height=480');
--- End quote ---

--- End quote ---

--- Quote ---Das Aussehen des Browser Fenster läßt sich damit gestalten:

--- Code: ---'toolbar=no,scrollbars=yes,resizable=no,'
--- End code ---
yes oder no verändern.
Es gibt noch zusätzliche Einstellungsmöglichkeiten, einfach den Abschitt austauschen mit:

--- Code: ---'toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=680,height=480');
--- End code ---

--- End quote ---

--- Quote ---Wenn das entfernt wird, entfernt man den Copyright Schutz:

--- Code: ---function right(e) {
if (navigator.appName == 'Netscape' && (e.which == 2 || e.which == 3)) {
alert("© Copyright by {site_name}");
return false;
}
else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button==2 || event.button == 3)) {
alert("© Copyright by {site_name}");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
--- End code ---

--- End quote ---

--- Code: ---
--- End code ---

JensF:
Hi,

ich habe das eben mal getestet aber irgendwie funzt das nicht. Habe alles so gemacht wie beschrieben aber die Bilder werden immer noch so groß angezeigt wie sie hochgeladen wurden.

Beispiel: http://www.terraristik-galerie.de/details.php?image_id=1628

Das sollte ja begrenzt sein auf 550 und erst groß angezeigt werden wenn man darauf klickt, dem ist aber nicht so :(

michi-w.:
Das kann ja eigentlich nicht, weil du bei der Detail-Ansicht keinen Link Effekt hast.

Den erzeugst du mit diesen Code

--- Code: ---<a href="{media_src}" target="_blank">{image}</a>
--- End code ---

In der Detail-Ansicht sollte sich beim klick auf das Bild ein neues Fenster mit dem vollständigen Bild öffnen, das ist aber nicht der Fall.

Entweder hast du doch nicht alles eingebaut oder die geänderten Dateien nicht auf den Server übertragen.

Gruß
michi-w.

P.S. da dieser Mod rekonstruiert wurde, kann natürlich auch etwas fehlen!

JensF:
Ich habe alles genauso eingebaut wie du es beschrieben hast und wenn man auf das Bild klickt dann öffnet sich doch ein neues Fenster mit dem Bild drin.

Außerdem sollte doch mit dem Code in der functions.php auch mein Bild verkleinert werden wenn man es aufruft und sich erst vergrößern wenn man darauf klickt.

Und die Dateien habe ich zum Server übertragen.

michi-w.:
Ich habe den Fehler gefunden, es fehlt tatsächlich noch etwas.

includes/functions.php

finde

--- Code: ---"&mode=".$mode : ""))."\">".$media_icon."</a>";
}
$width_height = "";
$width = "";
$height = "";
--- End code ---

danach einfügen

--- Code: ---
$limit_var = "";
$new_limit = "";
--- End code ---

finde

--- Code: --- $site_template->register_vars(array(
"media_src" => $media_src,
"media_icon" => $media_icon,
"image_name" => $image_name,
"width_height" => $width_height,
"width" => $width,
"height" => $height,
--- End code ---

danach einfügen

--- Code: --- "new_limit" => $new_limit,
"limit_var" => $limit_var,
--- End code ---

Entschuldigung!
Mod wurde entsprechend ergänzt!

Navigation

[0] Message Index

[#] Next page

Go to full version