Lightbox - Bildgrösse dynamisch an Browserfenster anpassen

[G-Punkt]

An der in phpwcms integrierten Lightbox/Slimbox nervt, dass die Bilder bei unterschiedlichen Auflösungen bzw. Browsergrössen vertikal/horizontal gescrollt werden müssen. Ich hab' mal ne Lightbox mit einer ähnlichen Funktion wie in Highslide oder Lightview gesehen, in der sich die Bilder automatisch an das Browserfenster anpassten, dh. ist das Browserfenster nur 300pix hoch, dann ist das Bild auch nur ca. 280pix hoch.
Gibt es eine solche Funktion auch in "unserer" Lightbox bzw. welche Schalter müssen da aktiviert werden?

Grüße
Michael

[G-Punkt]

hmmm... keiner ne Idee?

[juergen]

http://forums.shopify.com/categories/2/posts/5455

Wenn das so stimmt was da steht, so würde es ausreichen die maximale Lightboxgröße an der Auflösung des clients festzumachen. Du müsstest aber eine Spezialbehandlung für ganz kleine Bilder haben....

[Oliver Georgi]

Ist nicht enthalten.

Das Bild wird "vorberechnet" auf die von Dir definierte Maximalgröße (conf.template_default) ausgeliefert.

Was dann die dynamische Anpassung des Bildes an das Browserwindow betrifft, müsste hier in die Slimbox eingegriffen werden - es ist also letztlich ein reines JavaScript Ding und hat weniger mit phpwcms zu tun.

Problem: moderne Browser können ganz gut mit dem dynamischen Resizing umgehen. "Großes Bild" wird auch geladen, wenn Darstellung kleiner als Bildquelle. Ist das Browserwindow größer als das zugrund liegende Bild, so wird das Bild aufskaliert - wieviel Sinn das macht

Oliver

[G-Punkt]

Ich möchte ja folgendes Problem lösen:
Die Bilder sollen sich dynamisch an das Browserfenster anpassen, damit ich mir im Vorfeld die ganze skaliererei sparen kann, aber die Bilder auch sehr groß zur Verfügung stellen möchte. Jetzt mal unabhängig, wie und welche und ob die Browser das auch könnten, also das Skalieren.
Lightbox kanns nicht.
Aber EnlargeIt! kann es

Das JS-Paket hier downloaden,
entpacken und den Inhalt von examples\files bspw. in template/enlargeit kopieren.

Achtung: weiter unten gibts ein Template made by Claus, mit dem der HEAD-Eintrag nicht mehr in die Vorlage eingetragen werden muß
Dann ist den HEAD-Bereich der Vorlage (unter ADMIN) folgendes einfügen:

Code: Select all

<script src="template/enlargeit/enlargeit.js" type="text/javascript" ></script>
      <script type="text/javascript">
        enl_ani = 3;
        enl_brdcolor = '#FFFFFF';
        enl_titletxtcol = '#444444';
        enl_ajaxcolor = '#d0d0d0';
        enl_brdsize = 20;
        enl_maxstep = 30;
        enl_speed = 12;
        enl_shadow = 1;
        enl_shadowintens = 20;
        enl_shadowsize = 3;
        enl_center = 1;
        enl_dark = 0;
        enl_darkprct = 20;
        enl_preload = 1;
        enl_drgdrop = 1;
        enl_darksteps = 5;
        enl_keynav = 1;
        enl_wheelnav = 1;
        enl_opaglide = 1;
        enl_minuscur='minuscur.cur';
        enl_brdround = 1;
        enl_brdbck = '';
        enl_buttonurl[0] = 'prev';
        enl_buttontxt[0] = 'Previous picture [left arrow key]';
        enl_buttonoff[0] = -216;
        enl_buttonurl[1] = 'next';
        enl_buttontxt[1] = 'Next picture [right arrow key]';
        enl_buttonoff[1] = -234;
        enl_buttonurl[2] = 'close';
        enl_buttontxt[2] = 'Close [Esc key]';
        enl_buttonoff[2] = -0;
        enl_gifpath = 'template/enlargeit/';
        enl_btnact='bact.png';
        enl_btninact='binact.png';
      </script>

Hier können zahlreiche Parameter eingestellt werden. Obacht bei der drittletzten Position enl_gifpath = 'template/enlargeit/'; Hier die Pfadangabe ggf. korrigieren. Hier liegen nur die vom Script benötigten Bilder wie bswp. Navipfeile, CloseButton oder Cursoricons.
Hier kann man sich die gewünschten Verhalten gleich generieren lassen...

In Bilder <div> und Bilder spezial läufts mit folgender Vorlage:

Code: Select all

<!--IMAGES_HEADER_START//-->

[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//-->

<img src="{THUMB_ABS}" alt="" onclick="enlarge(this);" longdesc="{IMAGE_REL}" style="padding:5px; border:1px solid #000" class="tralala"/>	

<!--IMAGES_ENTRY_END//-->
<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->
<!--IMAGES_FOOTER_START//--><!--IMAGES_FOOTER_END//-->

Codekorrektur:
Im oben gezeigten Code muß ein class="tralala" eingefügt werden. Denn nur so kann zwischen den Bildern im enlargten Zustand per Mausrad, Tastatur oder Button gewechselt werden. Diese Korrektur gilt auch für den weiter unten zu findenden Code von Claus. Was in class="" steht, ist völlig wug. Bei mir heißts eben tralala...

Diesen Code in eine Datei namens enlarge_it.tmpl packen und in die Ordner
template/inc_cntpart/images
und/oder
template/inc_cntpart/imagespecial
kopieren, damit man sie als Vorlage bei Artikelinhalt auswählen kann.

Beispiel hier

Vielleicht kannst ja die/der eine oder andere gebrauchen...

Grüße
Michael

edit:
Richtig geil fänd ich es, wenn man diese Funktion auch in der Galerie einbinden könnte. Aber das ist mir einfach zu hoch. Ich habe ja schon Mühe, dieses gigantisches Teil ({GALLERYX: ......} V1.2.2) zu verstehen

[update]

Ich kann's gebrauchen sehr schön!
Kann man damit auch die Bilder croppen und werden sie dann trotzdem enlargeITiert?

[update]

mit enl_gifpath = 'template/enlargeit/'; komme ich nicht klar - wenn das der Folder für die Bilder ist, dann wähle ich die nicht über den CP aus? Oder werden die generierten Bilder da gespeichert? Huch!

[G-Punkt]

Meinst Du, Vorschau auf Größe schneiden?
Joo, das geht. Guckst Du
Die untere Reihe ist auf 234pxx234px gecropped

[G-Punkt]

mit enl_gifpath = 'template/enlargeit/'; komme ich nicht klar - wenn das der Folder für die Bilder ist, dann wähle ich die nicht über den CP aus? Oder werden die generierten Bilder da gespeichert? Huch!

Das ist nur der Ordner, in denen die Pics für das JS liegen. Also die NaviPfeile oder der CloseButton usw...

[update]

AyAyaha! Sehr beruhigend - und schon habe ich zwei neue Dateien
Danke!

[G-Punkt]

Zwei neue Dateien? Gut.. aber wieso, weshalb, warum und vor allem welche?

[update]

Diese hier (damit der Kram aus der Vorlage raus ist (jetzt ist das im template für bilder<div> und wird nur ondemand geladen)

Code: Select all

<!--IMAGES_HEADER_START//-->
[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]
<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//-->
[PHP]
$GLOBALS['block']['custom_htmlhead']['enlargeit.js'] = '  <script src="'.TEMPLATE_PATH.'enlargeit/enlargeit.js" type="text/javascript"></script>';
//$GLOBALS['block']['css']['reg_tabs_accordion01_login'] = 'specific/reg_tabs_accordion01_login.css';
$GLOBALS['block']['custom_htmlhead']['enlargeit'] = '  <script type="text/javascript">
  // <![CDATA[
        enl_ani = 3;
        enl_brdcolor = \'#FFFFFF\';
        enl_titletxtcol = \'#444444\';
        enl_ajaxcolor = \'#d0d0d0\';
        enl_brdsize = 20;
        enl_maxstep = 30;
        enl_speed = 12;
        enl_shadow = 1;
        enl_shadowintens = 20;
        enl_shadowsize = 3;
        enl_center = 1;
        enl_dark = 0;
        enl_darkprct = 20;
        enl_preload = 1;
        enl_drgdrop = 1;
        enl_darksteps = 5;
        enl_keynav = 1;
        enl_wheelnav = 1;
        enl_opaglide = 1;
        enl_minuscur=\'minuscur.cur\';
        enl_brdround = 1;
        enl_brdbck = \'\';
        enl_buttonurl[0] = \'prev\';
        enl_buttontxt[0] = \'Previous picture [left arrow key]\';
        enl_buttonoff[0] = -216;
        enl_buttonurl[1] = \'next\';
        enl_buttontxt[1] = \'Next picture [right arrow key]\';
        enl_buttonoff[1] = -234;
        enl_buttonurl[2] = \'close\';
        enl_buttontxt[2] = \'Close [Esc key]\';
        enl_buttonoff[2] = -0;
        enl_gifpath = \'template/enlargeit/\';
        enl_btnact=\'bact.png\';
        enl_btninact=\'binact.png\';
	// ]]>
  </script>';
[/PHP]

<img src="{THUMB_ABS}" alt="" onclick="enlarge(this);" longdesc="{IMAGE_REL}" style="padding:5px; border:1px solid #000" class="hoppsassa" />   

<!--IMAGES_ENTRY_END//-->
<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->
<!--IMAGES_FOOTER_START//--><!--IMAGES_FOOTER_END//-->

und eine pikfeine JS-datei
...und natürlich die anderen Dateien, die alle in diesen einen Ordner müssen.
Und dann nicht vergessen, nur "vergrößern" anzuklicken... (bilder<div> btw)

[G-Punkt]

Aber hallo, ja doch, tatsächlich geht es... und ist dann natürlich alles schön aufgeräumt. Feine Sache!

[update]

Schön,dass es funktioniert. So kann man prinzipiell jedes Template der CPs "ausrüsten", wenn nötig. Vorteil: JS sowie CSS- Dateien bleiben aus der Seitenvorlage draussen und werden nur bei Bedarf geladen... und alles ist sauber - sozusagen. Beachte die escapten Hochkommata - das muss, sonst geht es nicht!

[update]

kurz nachgefragt: wie bekomme ich denn die netten Buttons oben rechts?