ImageFlow including Highslide and Lightbox module

[Ruud]

In this German thread there was a start to get an ImageFlow module working.
I picked it up and created a module that is worth looking at (I think  )
Just read my (English) message in that thread and try the module if you are interested.
Since writing German is not an option for me, it might be a good idea to continue in this thread from now on.

Ruud
Since this thread is getting a bit big, and it will be hard to find the current version, I will place the last version in this post.


Current version is 0.7.6 (Feb 21, 2009)


Version history

Note: If your current version is v0.5 or below, uninstall your current module first, then do a normal install.
From v0.6 or higher you can do a normal upgrade without losing current settings.

version 0.7.6 (Ruud)
-  fixed a small bug in the css edit page. (found by EngelDeLux)

version 0.7.5 (Ruud)
- fixed a few Notices for undefined variables.
- fixed "filenames with whitespace problem". Filenames with whitespace or accent characters should work ok now.
- updated slider image so it will show on white backgrounds

version 0.7.4 (Ruud)
 - fixed short_open_tag bug

version 0.7.3 (Vyni, Aldus, Ruud)
 - cosmetic changes to the backend
 - added colorpicker for the background color selection fields (switch off by setting "$use_colorpicker=false" in modify.php)
 - upgrade.php no longer drops/creates database tables. Allows upgrading without losing current configuration.
 - fixed small javascript errormessage in color selection when adding blank or invalid color

version 0.7.2 (Vyni, Aldus)
 - possibility for changing imageflow.css through back-end CSS editor (> WB 2.7 only)
 - minor changes and optimizations in modify.php
 - add a "noscript"-tag/message in "view.php"

version 0.7.1 (Vyni, Aldus, Ruud)
 - Changed Backend layout.
 - Changed Save/Clear/Cancel to Save&Clear/Save/Cancel
 - Minor bugfixes in the Backend and Language files

version 0.7 (Ruud Eisinga / Aldus)
 - added the possibility for a description file.
    put a file named "gallery_info.txt" in the same directory as the images.
    On a single line, start fith the imagename (without extention), followed by a "|" (pipe) and the description you want to show.
    example: myimage | This is the description of my image.

version 0.6.1  (Aldus)
 - Modifications in admin settings.

version 0.6 (Ruud Eisinga)
 - Added Gallery title/description
 - Fixed bug in getting filenames.
 - Stripped extention from image filenames displayed. (use filename as image description)

version 0.5 (Ruud Eisinga / Aldus)
 - Many cosmetic / code / debugging improvements (thnx to Aldus)
 - Added Lightbox script.
 - Added choice for Highslide / Lighbox2 / None(original) popups

version 0.4 (Ruud Eisinga)
 - added extra positioning div, including resize possibilities.
  (This seems to fix all positioning problems. (also in tables))
 - added option to disable filename caption and/or slider
 - added option to select Highslide border style.
 - fixed problem with filenames with whitespace or special characters
 - fixed positioning of the slider
 - added option to NOT cache thumbnails
 
version 0.32 (Ruud Eisinga - RuudE)
 - Added an extra div around the Imageflow. Corrects some positioning problems
 
version 0.31 (Ruud Eisinga - RuudE)
 - bugfix. Backcolor parameter was not set correctly
 - Added DE language file

version 0.3 (Ruud Eisinga - RuudE)
 - added resizing thumbnails
 - added HighSlide popup
 - added Parameter for height of reflection
 - added parameter for Background colour to fade into, default = #000000
 - added parameter to force jpeg output including quality setting
 - using the modified ImageFLow script found here: http://194.95.111.244/~countzero/scripts/_myImageFlowHighSlide/
   
version 0.2 (Ruud Eisinga - RuudE)
 - Added finding images in the picture folder. Skipping cached files


License ImageFlow v0.9: Public Domain
    http://finnrudolph.de/ImageFlow/Introduction
This module uses Imageflow 0.9. This version is Public Domain - The current version (not supported by this module) uses a different license!

   
Licence HighSlide: Highslide JS is licensed under a Creative Commons Attribution-NonCommercial 2.5 License.
    This means you need the author's permission to use Highslide JS on commercial websites.
    http://vikjavev.no/highslide/
       
License Lightbox: licensed under the Creative Commons Attribution 2.5 License. A donation would be nice, hint hint.
    As for proper attribution, all that is required is that you leave my name and link atop the lightbox javascript file.
    I do appreciate an html link, but it is not required.
    http://www.lokeshdhakar.com/projects/lightbox2/

[Availor]

Ruude you've been reading my mind I wished someone would create a module out of it 

[Availor]

Works splendidly http://www.videoxone.com/demo/baker1/pages/image-flow.php
 

[Ruud]

version 0.31

Bugfixed:
- the backcolor parameter had a typo. Due to this it always faded to black.
- small error in the language files.
- added the German language file (thanks to Vyni)

Ruud

Edit: Removed link, newer version below

[Availor]

It's a bit offside - http://www.websitebakerden.com/pages/menu/image-flow.php

[Ruud]

It's a bit offside

Very strange things happen when the template uses tables.

There are some other strange things I noticed while testing it on different templates.
Sometimes the last couple of images (#9 / #15) appear not in the carousel but on top of the container.
That only happens on IE, not in FF?!

I don't have a quick fix right now. It's getting too late.

I'm open for tips

Ruud

[Availor]

Well this is only a theory but if it happens to template using tables (I use tables 80% of the time) maybe it's possible to offset them, like using absolute position with left margin or something?

[Ruud]

Version 0.32

Just a small fix that should correct some (not all) positioning problems.


Ruud

Newer version below

[Availor]

Much better. http://www.websitebakerden.com/pages/menu/image-flow.php
Is it possible to leave the scrolling dot as black? When I make the background white the dot becomes invisible.

[Ruud]

The dot is in /modules/imageflow/images (slider.png). You can always replace that by something else.

The scrollbar is controlled in CSS. Set the color you want in there.

It would advise to make the thumbnail images a bit bigger (250 or 300 px). Because you are using a big (wide) page, the images will be generated small and stretched by Javascript. Thats not good for the quality.

Ruud

[Availor]

Thanks.

This was just a test - http://a2k.co.il/pages/F2E1E5E3E5FA.php This page is from WB 2.6.4 I should be upgrading it...

[vyni]

  I just wanted to show what I did with it.

Here You could have a look of what I´m talking about. Check this

...with a little playing with the css-file. Once more: the content MUST have the attribute position set.

regards Vyni

[Availor]

Nice doing - how did tou remove the scrolling bar?

[vyni]

Hi,

Thanks You. I just setted visibility: hidden; in imageflow.css

also size and position-correction
see the included file

regards
Vyni

[Ruud]

Version 0.4

- added extra positioning div, including resize possibilities.
   (This seems to fix all positioning problems. (also in tables))
- added option to disable filename caption and/or slider
- added option to select Highslide border style.
- fixed problem with filenames with whitespace or special characters
- fixed positioning of the slider
- added option to NOT cache thumbnails

Ruud

[vyni]

Very well done!

No errors on installing with template Round (tables) at all.
And again the german language-file.

Best regards
Vyni

[BerndJM]

Hi,

maybe I'm a little stupid or I missed something, but I cannot manage to get bigger Previews.
The option "preview height" (Höhe der Vorschaubilder (in px).) takes no affect. I can set it to 100 or  500 or whatever I want the previews have in all cases the same size

Regards Bernd

[vyni]

Morgen,
i probier´ des einmal halbwegs verständlich zu formulieren. Des mit der Höhe der Vorschaubilder hat nur indirekt was mit der Darstellung von dem ganzen zu tun. Wie groß die Vorschaubilder abgebildet werden hängt in einem x:y Verhältnis von der Breite ab. (i was nua ned genau welches x:y des is - aber das ist irgendwie programmiert.) Also wenn so und so breit dann eben so und so hoch. - Des wiederum hat aber nix mit der Erzeugung der Vorschaubilder zu tun. Dafür ist irgend eine andere Routine zuständig.
Reden wir von einem Originalbild von ca. 800 x 600 (Breite x Höhe)px und 200 KB, weil kaum komprimiert.
Jetzt war des so, dass die Thumbs in max. (sprich in original) Höhe der eigentlichen Bilder erstellt wurden obwohl nur ungefähr 80 x 130 px angezeigt wurden, weil das Container-div nur eine Breite von z.B: 500px hatte und sich aufgrund x:y ergab, dass eben die thumbs nur 130 px hoch sein können - oder noch weniger, weil die Breite eben nur 300px oder so ist.
Folglich hattest Du Thumbs, die obwohl JPEG-Qualität 50 % eingestellt war und die Darstellung 130x80 px war, von einer Dateigröße, die schwindelerregend war und irgendwo bei 300kb (!!!) lag. Und deshalb eine nicht tragbare Ladezeit verursachten (denk an 30 Bilder oder mehr - graus, weil der Link ja auf ein anderes Bild zeigt, muss ja dann nocheinmal geladen werden).
Wennst jetzt also sagst Höhe der Vorschaubilder 500 px kriegst herrlich schöne, grosse Thumbs mit Reflektion, die aber nur mit 130 (oder eventuell mit 200) px Höhe angezeigt werden. Sagst aber hingegen 100px und Kompression 70 % dann sind die Thumbs ca. 4 KB oder so - und mit minimaler Ladezeit verbunden.
Willst hingegen eine größere Darstellung auf der Webseite erreichen, muss der Container verbreitert werden.
Sagen wir z.B bei Template blank die volle Bildschirmbreite: dann errechnen sich irgendwo bei 350 oder 400 px hohe Thumbs. (x:y halt) und Du hast in den Optionen Höhe der Vorschaubilder 100px, Qualität 100%. Dann hast immer noch bescheidene Vorschaubilder, weil die Darstellung dann Deine Thumbs vergrößert und des bekanntlich bescheiden ausschaut.
Es gilt also, eine sinnvolle Kombination aus den beiden Werten zu finden.
Es sei denn, Du möchtest ein Bild 800x600 mit Reflektion versehen - Dann stellst eben die Reflektion auf 50% und die Höhe der Thumbs auf 900px dann noch die Qualität auf 90% - haust auf mach´ - und ohne jedem Fotoprogramm hast Dein Bild (wobei bisher ein Bild in einem Ordner zu einer Fehlermeldung führt) - Kopier´ das um und verwend´ es - aber als Thumb ist es schlichtweg unbrauchbar.

Ich hoffe, es ist nicht allzuviel Mist was ich da von mir geb´ - aber so seh´ ich das.
LG aus Himberg
Vyni

[vyni]

Translation of my last post:

Concerning height of thumbs:
This will affect only the creation of thumbs - not the presentation. Will affekt the filesize but not the size on screen. The screen-size depends on the width of the container div. If You want big thumbs on screen You need a wide range for the display.

For the file-size of the thumbs it makes sense to keep the height of thumbs less than 200px. If You use f.e; template blank to present Your Fotos - it makes sense to keep the height of the thumbs around 300 px - but it will take longer to load. If You are using a 2-column template with only 380px per column it makes sense to keep the height by 80px or so - than You get fast-loading small thumbs.

This or something similar to this I was writing in german - maybe someone could move the post to the german thread. Sorry.

regards from Himberg
Vyni

[BerndJM]

Thanks vyni for your explanation,

read it 3 times and think I understand now the behavior:
the height of the previews mainly is calculated on the availible space in the container depending on the x/y ratio, so the "height" parameter is mainly for the thumbnails filesize, ok maybe the definition "Höhe der Vorschaubilder (in px)." is a little bit missleading ...

Regards Bernd

[Ruud]

Here is version 0.5

 - Many cosmetic / code / debugging improvements (thnx to Aldus)
 - Added Lightbox script.
 - Added choice for Highslide / Lighbox2 / None(original) popups

Ruud

@vyni,
Nice explanation.
Bottom line: Create thumbs as small as possible (faster loading), but no smaller than what the javascript will use in the carousel (look at right-click -> properties). Experiment in your used template for the optimal values.

[aldus]

hello  Ruud

view.php line 91 :: looks like a typo/bug

Code:

htmlspecialcharacters

info.php got still the missing "." in the modul-description.

that's it at first look - fine work, again.

Add:
some "cosmetic" changes in
- inc_highslide
- inc_imageflow_hs
- inc_imageflow
- inc_lightbox

to get rid of unnecessary string-concatinations [?] ( oh dear - my dinglish )
 
Add 2:
- some major changes in view.php to try to get rid of the nearly unreadable link-part of the php-code
and strip some variables.

To explain: (test)
instead of

Code:

   <?php  
        foreach ($img_list as $img) { 
          if ($popups == 2) {?>
              <img src="<?php echo WB_URL; ?>/modules/imageflow/reflect.php?img=<?php echo urlencode($picdir.'/'.$img).$params ?>" longdesc="javascript:myLightbox.start('<?php echo $imageurl.'/'.urlencode($img) ?> | <?php echo urlencode($img) ?>');" alt="<?php echo $img ?>" />
          <?php } else { ?>
              <img src="<?php echo WB_URL; ?>/modules/imageflow/reflect.php?img=<?php echo urlencode($picdir.'/'.$img).$params ?>" longdesc="<?php echo $imageurl.'/'.urlencode($img) ?>" alt="<?php echo $img ?>" />
        <?php }
        }
    ?>

the use of

Code:

<? 
        $link_template = "<img src=\"{{link}}\" longdesc=\"{{longdesc}}\" alt=\"{{alt}}\">\n";
       
        foreach ($img_list as $img) {
            $temp = Array (
                'link'        =>  WB_URL."/modules/imageflow/reflect.php?img=".urlencode($picdir.'/'.$img).$params ,
                'longdesc'    => "javascript:myLightbox.start('".$imageurl.'/'.urlencode($img). " | " .urlencode($img),
                'alt'         => $img
            );
           
            if ($popups != 2) $temp['longdesc'] = $imageurl.'/'.urlencode($img);

             echo replace_all($link_template, $temp);
        }
    ?>

by adding the (mini-)function

Code:

/**
*    function for a mini-template-sytem
*/
function replace_all ($aStr = "", &$aArray=array() ) {
    foreach($aArray as $k=>$v) $aStr = str_replace("{{".$k."}}", $v, $aStr);
    return $aStr;
}

sorry for messing up the forum within code

Add 3: Added a colorbox in modify.php

Add 4: Last one (finger crossed): typo erased in "info.php":

Code:

$module_description = 'This module allows you to create a image Gallery based on ImageFlow 0.9 from Finn Rudolph and HighSlide and Lightbox2 popups.';

Regards
Aldus

Edit: removing old versions ...

[aldus]

Ok - to get rid of the "default" imagflow "jumpt to a new page"
i've made some modifications in the javascript (see attachment).
Just a quick one for testing: stict @dev alpha - because untested
on windows - sorry.

Even bug reports and or suggestions and or "schimpfe" are wellcome.

Regards
Aldus

[BerndJM]

Hi Aldus,

FF3.0.1 / Linux - Firebug says:

element is null
[Break on this error] element.style.visib ility = 'hidden';
imageflow.js (line 389)

Regards Bernd

[aldus]

Danke
Graus - ausgerechnet die Zeilen kommen nicht von mir ...

Thank you, Bernd

Add: Bugfix and some minor cosmetic changes in the comments.

Aldus