Author Topic: [MOD] Details Ansicht / Größe des Bildes begrenzen  (Read 170383 times)

0 Members and 1 Guest are viewing this topic.

Offline michi-w.

  • Hero Member
  • *****
  • Posts: 505
    • View Profile
[MOD] Details Ansicht / Größe des Bildes begrenzen
« on: September 30, 2005, 01:07:53 PM »
(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: [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}" />


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";


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: [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
Quote
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}

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


Quote
Größe
Quote
width=680,height=480');


Quote
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');


Quote
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]
« Last Edit: August 27, 2006, 01:47:29 AM by michi-w. »

Offline JensF

  • Addicted member
  • ******
  • Posts: 1.028
    • View Profile
    • http://www.terraristik-galerie.de
Re: Details Ansicht / Größe eines jpg Bildes begrenzen
« Reply #1 on: November 14, 2005, 07:45:09 PM »
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 :(
Mit freundlichem Gruß
Jens Funk



-> Sorry for my bad English <-

Offline michi-w.

  • Hero Member
  • *****
  • Posts: 505
    • View Profile
Re: Details Ansicht / Größe eines jpg Bildes begrenzen
« Reply #2 on: November 14, 2005, 10:22:12 PM »
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!

Offline JensF

  • Addicted member
  • ******
  • Posts: 1.028
    • View Profile
    • http://www.terraristik-galerie.de
Re: Details Ansicht / Größe eines jpg Bildes begrenzen
« Reply #3 on: November 15, 2005, 06:58:31 AM »
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.
Mit freundlichem Gruß
Jens Funk



-> Sorry for my bad English <-

Offline michi-w.

  • Hero Member
  • *****
  • Posts: 505
    • View Profile
Re: Details Ansicht / Größe eines jpg Bildes begrenzen
« Reply #4 on: November 15, 2005, 11:59:09 AM »
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!

Offline JensF

  • Addicted member
  • ******
  • Posts: 1.028
    • View Profile
    • http://www.terraristik-galerie.de
Re: Details Ansicht / Größe eines jpg Bildes begrenzen
« Reply #5 on: November 16, 2005, 07:40:11 AM »
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  :?:
Mit freundlichem Gruß
Jens Funk



-> Sorry for my bad English <-

Offline michi-w.

  • Hero Member
  • *****
  • Posts: 505
    • View Profile
Re: Details Ansicht / Größe eines jpg Bildes begrenzen
« Reply #6 on: November 16, 2005, 12:48:10 PM »

Offline JensF

  • Addicted member
  • ******
  • Posts: 1.028
    • View Profile
    • http://www.terraristik-galerie.de
Re: Details Ansicht / Größe eines jpg Bildes begrenzen
« Reply #7 on: November 16, 2005, 01:38:31 PM »
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 :)

Mit freundlichem Gruß
Jens Funk



-> Sorry for my bad English <-

Offline michi-w.

  • Hero Member
  • *****
  • Posts: 505
    • View Profile
Re: Details Ansicht / Größe eines jpg Bildes begrenzen
« Reply #8 on: November 16, 2005, 02:27:35 PM »
Finde ich eine gute Lösung
Quote
[Klicke hier um das Bild in voller Größe zu sehen!]

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

Offline Darkness2001

  • Full Member
  • ***
  • Posts: 151
    • View Profile
    • photo-galerie-online
Re: Details Ansicht / Größe eines jpg Bildes begrenzen
« Reply #9 on: November 16, 2005, 03:04:28 PM »
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  :mrgreen:

Offline JensF

  • Addicted member
  • ******
  • Posts: 1.028
    • View Profile
    • http://www.terraristik-galerie.de
Re: Details Ansicht / Größe eines jpg Bildes begrenzen
« Reply #10 on: November 16, 2005, 03:37:48 PM »
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>";
Mit freundlichem Gruß
Jens Funk



-> Sorry for my bad English <-

Offline michi-w.

  • Hero Member
  • *****
  • Posts: 505
    • View Profile
Re: Details Ansicht / Größe eines jpg Bildes begrenzen
« Reply #11 on: November 16, 2005, 03:57:12 PM »
@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 :oops:, vielleicht findet sich ja noch jemand.

Offline Darkness2001

  • Full Member
  • ***
  • Posts: 151
    • View Profile
    • photo-galerie-online
Re: Details Ansicht / Größe eines jpg Bildes begrenzen
« Reply #12 on: November 16, 2005, 04:23:14 PM »
Hallo,

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

Grüße Darkness  :mrgreen:

Offline michi-w.

  • Hero Member
  • *****
  • Posts: 505
    • View Profile
Re: Details Ansicht / Größe eines jpg Bildes begrenzen
« Reply #13 on: November 16, 2005, 04:30:34 PM »
@Darkness
Das wäre natürlich was :D 

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

Offline JensF

  • Addicted member
  • ******
  • Posts: 1.028
    • View Profile
    • http://www.terraristik-galerie.de
Re: Details Ansicht / Größe eines jpg Bildes begrenzen
« Reply #14 on: November 17, 2005, 05:49:51 PM »
Quote
@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
Mit freundlichem Gruß
Jens Funk



-> Sorry for my bad English <-