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

[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.

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: [Select]

if ($image_info = @getimagesize($src, $info)) {
      $width_height = " ".$image_info[3];
      $width = $image_info[0];
      $height = $image_info[1];
danach einfügen:

Code: [Select]

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";
      }
finde:

Code: [Select]

"&amp;mode=".$mode : ""))."\">".$media_icon."</a>";
    }
    $width_height = "";
    $width = "";
    $height = "";
danach einfügen:

Code: [Select]


    $limit_var = "";
    $new_limit = "";
finde:

Code: [Select]

      $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,
danach einfügen:

Code: [Select]

      "new_limit" => $new_limit,
      "limit_var" => $limit_var,

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

suche:

Code: [Select]

{image}
ersetzen durch:

Code: [Select]

<a href="{media_src}" target="_blank">{image}</a>
templates\default\media\jpg.html

Code: [Select]

<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />
ersetzen durch:

Code: [Select]

<img src="{media_src}" border="0" alt="{image_name}" {limit_var}="{new_limit}" />

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

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

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: [Select]

"direction" => $lang['direction']
füge davor ein

Code: [Select]

"vollbild" => $lang['vollbild'],
2.
öffne die templates\default\details.html und suche

Code: [Select]

{image}
ersetze es mit

Code: [Select]

{vollbild}<br>{image}<br>{vollbild}
3.
öffne lang/sprache/main.php und setze vor ?> folgendes ein

Code: [Select]

$lang['vollbild'] = "<a href=\"{media_src}\" target=\"_blank\">[Klicke hier um das Bild in voller Gr&ouml;&szlig;e zu sehen!]</a>";
Nachtrag
So kann man den Vergrößerungs-Link ab Version 1.7.1 darstellen.

Code: [Select]

<a href="{media_src}" target="_blank">[Bitte hier klicken, um das Bild in voller Gr&ouml;&szlig;e zu sehen!]</a>
<br />{image}<br />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.

Sinnvolle Ergänzungen

3. Durch das Anklicken auf einen Thumbnail öffnet sich ein neues Browser Fenster.
 
templates\default\thumbnail_bit.html

suche

Code: [Select]

{thumbnail}
ersetzen durch

Code: [Select]

{thumbnail_openwindow}

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: [Select]

<script language="javascript" type="text/javascript">
<!--
  function opendetailwindow() {
    window.open('','detailwindow','toolbar=no,scrollbars=yes,resizable=no,width=680,height=480');
  }

  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;
// -->
</script>

Größe

width=680,height=480');

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

Code: [Select]

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

Code: [Select]

'toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=680,height=480');

Wenn das entfernt wird, entfernt man den Copyright Schutz:

Code: [Select]

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;

Code: [Select]

[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: [Select]

<a href="{media_src}" target="_blank">{image}</a>
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: [Select]

"&amp;mode=".$mode : ""))."\">".$media_icon."</a>";
    }
    $width_height = "";
    $width = "";
    $height = "";
danach einfügen

Code: [Select]


    $limit_var = "";
    $new_limit = "";
finde

Code: [Select]

      $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,
danach einfügen

Code: [Select]

      "new_limit" => $new_limit,
      "limit_var" => $limit_var,
Entschuldigung!
Mod wurde entsprechend ergänzt!

[JensF]

Jetzt geht es. Besten Dank!!!!

Habe aber ein kleines Problem festgestellt. Wenn ich den Internet Explorer nutze dann kann ich das Bild nicht anklicken um es in voller Größe anzuzeigen. Mit Opera geht das  :

[michi-w.]

Hast du den CHMOD für das media Verzeichinis richtig eingestellt?

Bei mir
http://www.web-upload.de/templates/default/media/jpg.html

Bei dir
http://www.terraristik-galerie.de/templates/default/media/jpg.html

[JensF]

Hi,

ich habe meinen Fehler gefunden. Und zwar habe ich die html Dateien geändert um ein Hintergrundbild zu haben. Meine html Datei sieht nun so aus

Code: [Select]

<!-- Template file for JPG Files -->
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
<td style="background-image:url(templates/4grey2/images/loading.gif); background-position: center center; background-repeat: no-repeat;"><img src="{media_src}" border="0" alt="{image_name}" {limit_var}="{new_limit}" /><br /></td>
</tr>
</table>
Aber ich habe eine andere Lösung gefunden

[michi-w.]

Finde ich eine gute Lösung

[Klicke hier um das Bild in voller Größe zu sehen!]

Vielleicht übernehm ich das.
Wie hast du das gemacht?

[Darkness2001]

Hallo,

gefällt mir auch sehr gut, noch eine Sache:

Kann ich nicht ein Tool im Adminbereich einbauen wo ich dann auch die Größen bei Bedarf so ändern könnte?

Grüße Darkness 

[JensF]

Hi,

wow auch ich kann mal helfen Das ganze wird so gemacht....


1.

öffne includes/page_header.php und suche

Code: [Select]

"direction" => $lang['direction']
füge davor ein

Code: [Select]

"vollbild" => $lang['vollbild'],
2.

öffne die details.php und suche

Code: [Select]

{image}
ersetze es mit

Code: [Select]

{vollbild}<br>{image}<br>{vollbild}
3.

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

Code: [Select]

$lang['vollbild'] = "<a href=\"{media_src}\" target=\"_blank\">[Klicke hier um das Bild in voller Gr&ouml;&szlig;e zu sehen!]</a>";

[michi-w.]

@JensF
Danke, werde ich versuchen!

Kann ich nicht ein Tool im Adminbereich einbauen wo ich dann auch die Größen bei Bedarf so ändern könnte?

Also bis jetzt kann man das nur in der functions.php, bei

Code: [Select]

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";
      } ändern, in dem alle 550 gegen eine entsprechend andere Zahl ausgetauscht werden. Leider kann ich selber kein PHP und muss mir auch immer alles erbetteln , vielleicht findet sich ja noch jemand.

[Darkness2001]

Hallo,

dann werde ich mich mal in einer ruhigen Min. hinsetzten und versuchen solch Admin Tool zu basteln 

Grüße Darkness 

[michi-w.]

@Darkness
Das wäre natürlich was  

@JensF
In der details.php gibt es kein {image}, ich nehme an, das du die templates\default\details.html meinst.

[JensF]

@JensF
In der details.php gibt es kein {image}, ich nehme an, das du die templates\default\details.html meinst.

Sorry, keine die ist gemeint. Nicht die details.php sondern die details.html