Page 1 of 2
Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Tue 13. Jan 2009, 18:24
by 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
Re: Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Mon 19. Jan 2009, 01:06
by G-Punkt
hmmm... keiner ne Idee?
Re: Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Mon 19. Jan 2009, 05:59
by 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....
Re: Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Mon 19. Jan 2009, 08:39
by 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
Re: Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Mon 16. Mar 2009, 21:23
by 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//-->
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
Re: Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Mon 16. Mar 2009, 22:24
by update
Ich kann's gebrauchen
sehr schön!
Kann man damit auch die Bilder croppen und werden sie dann trotzdem enlargeITiert?
Re: Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Mon 16. Mar 2009, 22:39
by 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!
Re: Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Mon 16. Mar 2009, 22:44
by G-Punkt
Meinst Du, Vorschau auf Größe schneiden?
Joo, das geht.
Guckst Du
Die untere Reihe ist auf 234pxx234px gecropped
Re: Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Mon 16. Mar 2009, 22:45
by G-Punkt
claus wrote: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...
Re: Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Mon 16. Mar 2009, 22:51
by update
AyAyaha! Sehr beruhigend - und schon habe ich zwei neue Dateien
Danke!
Re: Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Mon 16. Mar 2009, 22:59
by G-Punkt
Zwei neue Dateien? Gut.. aber wieso, weshalb, warum und vor allem welche?
Re: Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Mon 16. Mar 2009, 23:35
by 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)
Re: Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Mon 16. Mar 2009, 23:58
by G-Punkt
Aber hallo, ja doch, tatsächlich geht es... und ist dann natürlich alles schön aufgeräumt. Feine Sache!
Re: Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Tue 17. Mar 2009, 11:02
by 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!
Re: Lightbox - Bildgrösse dynamisch an Browserfenster anpassen
Posted: Tue 17. Mar 2009, 12:57
by update
kurz nachgefragt: wie bekomme ich denn die netten Buttons oben rechts?