Imageflow

[aldus]

Ok -- very beta and very unofficial - packs the implanted nessesary js-files inside the header instead of the body.

im template für die imageflow-gallery

Code:

/**
*    Automatically include optional WB module files (frontend.css, frontend.js)
*/
if (function_exists("register_frontend_modfiles")) {
    register_frontend_modfiles("css");
    register_frontend_modfiles("js");
   
    if (file_exists (WB_PATH."/modules/imageflow/test_header.php") )
        require_once (WB_PATH."/modules/imageflow/test_header.php");
       
}

einfügen und die angepassten files aus dem zip aktualisieren. ... backup von den alten bitte vorher, oder umbenennen ...

• frontend.js
• test_header
• view.php

Im großen und ganzen wird einfach nur danach geschaut, ob die Seite die ImageFlow Gallerie benutzt, und wenn
ja, werden die JS Files gleich in den Header geschrieben, je nach Einstellung.

Wer es genau wissen möchte:
gelöscht wg. bug. aktuell siehe unten

Alles noch nicht so ganz ausgereift - aber immerhin sind die Tags erst einmal im Header ....

Regards/Gruß
Aldus

[heinerle]

Ok -- very beta and very unofficial - packs the implanted nessesary js-files inside the header instead of the body.

also ich finds nicht soooooooooooooo "very beta" es klingt in jedem fall logisch im aufbau und na andere lösung sehe ich nicht (ausser ne AJAX-Engine in der frontend.js die ausliest, ob highslide oder lightbox)
man sollte halt nur ne readme unterbringen im Modul, die die Anpassung der register_frontend am anfang beschreibt, denn wenn ein User ein Standard-Template benutzt, würde die Galerie nicht funzen

die AJAX-Lösung wäre die alternative, falls man am orginalen register_frontend festhalten möchte.

[aldus]

Ok - der oben gepostete code hatte noch 'nen bug

Code:

<?php

/**
*
*    @version    0.1.1
*    @date        2008-08-06
*    @author        aldus
*    @package    WebsiteBaker - Modul: Imageflow
*
*
*/

/**
*    Include core functions of WB 2.7 to edit the optional module CSS files (imageflow.css, backend.css)
*/

require_once(WB_PATH.'/modules/imageflow/css.functions.php');
require_once(WB_PATH.'/framework/functions.php');

$database = new database();

$page_info = $database->query ("SELECT section_id from ".TABLE_PREFIX."sections where page_id=".PAGE_ID." and module='imageflow'");
if ($page_info->numRows() > 0) {
    
    /**
    *    The page is in the use of the imageflow-gallery
    *    so we need some additional informations and files ...
    *    
    */
    
    $data = $page_info->fetchRow();
    $additional_info = $database->query("SELECT use_highslide, use_lightbox, high_border from ".TABLE_PREFIX."mod_imageflow_settings where section_id=".$data['section_id']);
    
    $settings = $additional_info->fetchRow();

    include_once ( ($settings['use_highslide'] == 1) ? "inc_imageflow_hs.php" : ( $settings['use_lightbox'] == 1 ? "inc_imageflow_lb.php" : "inc_imageflow.php" ) ); 
}
?>

Wie meinst Du das mit der AJAX engine? Bei der 0.7.3.4 ist "htmlhttprequest" mit dabei für das Backend ...

Gruß
Aldus

[heinerle]

Wie meinst Du das mit der AJAX engine? Bei der 0.7.3.4 ist "htmlhttprequest" mit dabei für das Backend ...
Gruß
Aldus

wo unterscheiden sich die drei dateien? ich hab die leider grad nicht hier.

du machst in der frontend.js mittels nem request die Abfrage, ob highslide oder lightbox aktiviert ist und entsprechend dem rückgelieferten wert lässt du entweder die eine, oder eben die andere js-datei nachladen
mittels document.write('<script .... blabla ...>')
bin leider kein Voll-Profi in Sachen JS, daher Frage:
wird das script auch gleich geladen, wenn ich es mit document.write() in die Datei schreiben lasse? wenn JA, wäre das doch die Lösung, oder?

und um da auf mein eigentliches problem zurückzukommen:
wenn das ganze so funktioniert, wie ich es grad vermutet habe,
auf grund des requestes könnte man den onload in der frontend.js ausführen lassen, jeweils entsprechend der nachgeladenen datei.

ich könnte dann meine eigenen onloads in dieser einen datei hardcodieren und muss nicht gleich 3 dateien editieren.

ich hoffe, ich hab dich nicht zu sehr verwirrt 

[heinerle]

ich habe mal versucht, die JS und CSS mittels AJAX so reinzuladen, damit man nicht das template hardcodieren muss.

in view.php das laden auskommentiert, eine load_frontend.php für den AJAX-Request gemacht und ne frontend.js die die notwendigen Dateien nachlädt.
load_frontend.php (entspricht bis auf eine zeile der datei von aldus)

Code:

require_once('../../config.php');

meine AJAX engine:

Code:

function Ajax() {
  //Eigenschaften deklarieren und initialisieren
  this.url="";
  this.params="";
  this.method="GET";
  this.onSuccess=null;
  this.onError=function (msg) {
    alert(msg)
  }
}

Ajax.prototype.doRequest=function() {
  //Üeberpruefen der Angaben
  if (!this.url) {
    this.onError("Es wurde kein URL angegeben. Der Request wird abgebrochen.");
    return false;
  }

  if (!this.method) {
    this.method="GET";
  } else {
    this.method=this.method.toUpperCase();
  }

  //Zugriff auf Klasse für readyStateHandler ermöglichen 
  var _this = this;
 
  //XMLHttpRequest-Objekt erstellen
  var xmlHttpRequest=getXMLHttpRequest();
  if (!xmlHttpRequest) {
    this.onError("Es konnte kein XMLHttpRequest-Objekt erstellt werden.");
    return false;
  }
 
  //Fallunterscheidung nach Übertragungsmethode
  switch (this.method) {
    case "GET": xmlHttpRequest.open(this.method, this.url+"?"+this.params, true);
                xmlHttpRequest.onreadystatechange = readyStateHandler;
                xmlHttpRequest.send(null);
                break;
    case "POST": xmlHttpRequest.open(this.method, this.url, true);
                 xmlHttpRequest.onreadystatechange = readyStateHandler;
                 xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                 xmlHttpRequest.send(this.params);
                 break;
  } 

  //Private Methode zur Verarbeitung der erhaltenen Daten
  function readyStateHandler() {
    if (xmlHttpRequest.readyState < 4) {
      return false;
    }
    if (xmlHttpRequest.status == 200 || xmlHttpRequest.status==304) {
      if (_this.onSuccess) {
        _this.onSuccess(xmlHttpRequest.responseText, xmlHttpRequest.responseXML);
      }
    } else {
      if (_this.onError) {
        _this.onError("["+xmlHttpRequest.status+" "+xmlHttpRequest.statusText+"] Es trat ein Fehler bei der Datenbertragung auf.");
      }
    }
  }
}

//Gibt browserunabhängig ein XMLHttpRequest-Objekt zurück
function getXMLHttpRequest()
{
  if (window.XMLHttpRequest) {
    //XMLHttpRequest für Firefox, Opera, Safari, ...
    return new XMLHttpRequest();
  } else
  if (window.ActiveXObject) {
    try {   
      //XMLHTTP (neu) für Internet Explorer
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
      try {       
        //XMLHTTP (alt) für Internet Explorer
        return new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e) {
        return null;
      }
    }
  }
  return false;
}
// eingefuegt wegen der Probleme
var flow_type = 123;

function showResponse(txt,xml)
{
    // gibt das Ergebnis aus dem XML in die seite
    document.write(txt);
}

// der request
var url = './modules/imageflow/load_frontend.php';
var myAjax = new Ajax();
myAjax.url = url;
myAjax.onSuccess=showResponse;
myAjax.doRequest();

// nur mit diesem alert bricht der request ab, andernfalls scheint eine endlosschleife zu laufen
alert('Endwert ' + flow_type);

funktioniert im ansatz bei mir, hab aber sehr wahrscheinlich ein Problem mit meiner engine.
hier der test: yoxe.de/wbtest

ich finde meinen fehler in der engine aber nicht. in opera und safari (windows) funktioniert es gar nicht. opera macht gar nichts und safari lädt die dateien nicht korrekt nach.
firefox und IE funktionieren, aber auch nur mit der einschränkung, dass ich einen alert erzeugen muss, damit der request abgebrochen wird.

kann jemand meinen fehler entdecken? einen fehler in meiner engine oder meinem request?

PS @aldus: ich denke, du hast damit recht, dass die reihenfolge des ladens der datei eine rolle spielt. bei meinen spielereien habe ich festgestellt, dass im IE higjslide nicht funzt. IE zeigt sofort nen JS-Fehler 'hs ist undefiniert'

[aldus]

Ich sehe es auch nicht ausser:

in Zeile 8 fehlt ein Semikolon am Ende,

Code:

    alert(msg);

und bei "showResponse" meine ich musst Du erst das Document öffnen und zum schluss auch schließen:

Code:

function showResponse(txt,xml)
{
        document.open();
    // gibt das Ergebnis aus dem XML in die seite
    document.write(txt);
        document.close();
        return true;
}

Tja - und bei dem XMLHttpRequest - Object unter Windows kenne ich
es eigentlich so, das man die ganzen ActiveXObject Versionen durchgehen muss,
von "oben" nach "unten" ... kann mich aber auch da irren.

Code:

try {
        reg = new ActiveXObject("Msxml2.XMLHTTP.5.0");
    }
    catch(e) {
        try {
            reg = new ActiveXObject("Msxml2.XMLHTTP.4.0");
        }
        catch(e) {
            try {
                reg = new ActiveXObject("Msxml2.XMLHTTP.3.0");
            }
            catch(e) {
                try {
                    reg = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {
                    reg = false;
                }
            }
        }
       
    }
    return reg;

Gruß
Aldus

[heinerle]

sag mal aldus, hast du eigentlich herausgefunden, inwiefern die reihenfolge des einbindens der Script-Dateien eine rolle spielt und vor allem in welcher Reiehenfolge eingebunden werden muss?

[aldus]

@Heinerle

Kurz: nein - habe ich nicht.
Die Reihenfolge kannst Du dir in den Files "inc_imageflow_lb" und "inc_imageflow_hs" ansehen,
aber ob das auch so sein muss oder sein kann oder ... kann ich nicht beantworten.
Jedenfalls ist bei mir das einbinden der Files via Javascript/AJAX eine art Lotterie geworden, von der ich
Abstand genommen habe - siehe 0.7.3.7 im englischen Faden ... in der Version muss halt
sichergestellt werden das "fontend.js" vom modul als letztes eingebettet/aufgerufen wird.

Gruß
Aldus

[saiborg]

Hi, ich suche mir die Finger nach der aktuellen Version wund....wo kann ich die denn laden....

Danke Saiborg

www.microott.de

[maverik]

http://www.websitebaker2.org/forum/index.php/topic,10460.msg61622.html#msg61622

[saiborg]

Vielen Dank für die schnelle Antwort,
kann ich die Farbe des Reglers anpassen....wenn ja, wie...ausserdem würde ich gerne die Grösse der Thumbnails anpassen ich denke das ist ebenso mgl...

danke für Euere Hilfe....werde Euch dann das Ergeniss präsentieren
Saiborg

www.microott.de

[aldus]

Vielen Dank für die schnelle Antwort,
kann ich die Farbe des Reglers anpassen....wenn ja, wie...ausserdem würde ich gerne die Grösse der Thumbnails anpassen ich denke das ist ebenso mgl...

danke für Euere Hilfe....werde Euch dann das Ergeniss präsentieren
Saiborg

Regler? Du meinst den Knopf unter der Galerie: das ist ein Bild (png), und den "Strich" kannst Du
über CSS einfärben .... Bei der Größe der Thumbs muss du an das umgebene Div denken, das hat auch
einfluss auf die Darstellung der Thumbs und muss ggf. im Template (und seinem css) noch angepasst werden.

Gruß
Aldus
 

[Stefek]

Entschuldigt, falls ich eine Frage stelle, die an anderer Stelle eventuell bereits beantwortet wurde.
Ich brauche auch nur eine JA/NEIN Antwort.

Das origignale Skript lässt mich vom Bild zu einer URL verlinken (wenn ich einfach mit HTML arbeite).

Ist das hier auch implementiert, dass ich enweder ein Bild vergrößern kann, oder eine URL hinterlege?

Und wenn ja, gibt es eine Mix-Lösung (einige Bilder und einige URLs)?

MfG,
Stefek

[aldus]

  Sorry - ich versteh kein Wort ... Daher (sicherheitshalber): nein - es werden
nur Bilder verlinkt, du kannst aber im Bildbeschreibungste xt natürlich einen Link einbauen ...

Gruß
Aldus

[saiborg]

Kannst du mir genau sagen, wo ich im CSS

1. den Regler einfärben kann
und
2. die Grösse der Thumnails ändern kann

Habe mit Programmierung leider nicht viel am hut....

Ausserdem, weiss jemand, ob es mgl. ist EXIF Daten in der Lightbox auszugeben??

Danke Saiborg

[Stefek]

Sorry - ich versteh kein Wort ... Daher (sicherheitshalber): nein - es werden
nur Bilder verlinkt, du kannst aber im Bildbeschreibungste xt natürlich einen Link einbauen ...

Gruß
Aldus

Danke, Du hast meine Frage beantwortet.

( Damit Du mich trotzdem besser verstehst:Im originalen Script, welche hier zum Modul umgebaut wurde, kann man per HTML eine URL angeben, zu der verlinkt wird.)

Innerhalb der Decrption einen Link machen reicht völlig aus.
MfG,
Stefek

[aldus]

Der Regler ist ein Bild (images/slider.png): also nimm den guten alten Grafikkonverter, Photoshop oder GIMP oder
den Pixelvergexxxxx Deiner Wahl - im CSS kannst du die Regel für #scrollbar modifizieren:

Code:

#scrollbar{
    visibility:hidden;
    position:relative;
    border-bottom:1px solid #FF0099; /** hier **/
    z-index:901;
}

Und bei der Bildangaben weiss ich "garnnichts" - Kann sein, das es ein php-script dafür gibt.

Gruß
Aldus

[saiborg]

Habe einen Kollegen, der Pagegestalltung macht, vielleicht hat der eine Ahnung wie man sowas macht....
werde mich die nächsten Tage wiedermal melden....

Und falls er das hinbekommt hier mal veröffentlichen...

erst mal vielen Dank für die prompten Antworten

Saiborg

[saiborg]

Ach so,
wie kann ich nun die Thumnailgrösse anpassen???

[aldus]

Im Backend gibt's den Punkt: Höhe der Vorschaubilder ... normaler Weise steht da 200 (px);
datt_kannste_auch_v ergurken aber "Speichern & löschen vom cache" nicht vergessen ...

Gruß
Aldus

Edit: Hol Dir mal das gdpicts-addon/modul, da ist ein Ordner "JPEG_TOOLKIT" mit einigen
PHP-Libs drin ... kann sein, das Du damit auch die EXIF info mit auf die Seite bekommst ...

Edit2: An welchen TAG/IFD bist Du denn interressiert? Da gibt's 'ne Menge ...

[saiborg]

Hi Aldus,

danke für Deinen Tipp, wie schon geschrieben bin ich leider keine Leucht mit dem Progr....
kannst du mir vielleicht etwas genauer sagen wo ich das finde...habe mir die Backend.css angeschaut, aber nichts gefunden...wäre super

Danke

[aldus]

Das mit der EXIF lass mal uns implantieren ... bei der Menge wird's rasch unübersichtlich:
daher noch mal die Frage: an welcher IDF bist Du eigentlich interressiert? Alle darstellen macht
so auch keinen Sinn.

Und die CSS von Imageflow ist  "modules/imageflow/imageflow.css", #scrollbar findest Du in Zeile 46 ff.
Solltest Du lieber mit einem Editor (z.B. DashCode) als mit dem Backend-Edit bearbeiten.

Gruß
Aldus

[saiborg]

Hi Aldus,
das mit en EXIF Daten wollte ich auch nicht mache....aber danke für den Tipp...
Was ich anzeigen will: Kameramodell, Belichtungszeit., Blende, Brennweite, ISO, Blitz
Denke das reicht...


Das CSS anpassen, ich glaube wir haben uns da missverstanden, ich will die Thumbnails von Imageflow anpassen und habe keine Ahnung wo....im CSS von Imageflow ist  "modules/imageflow/imageflow.css" kann ich nichts finden...

Danke
Saiborg

[vyni]

Ich glaube, da muss ich mich einmal kurz einmischen!

Wie das geht kannst aber in dem Manual nachlesen.

Weil ich persönlich aber solche antworten hasse, extra noch einmal:
Die Größe der Thumbs werden vom Eltern-div beeinflußt. Die im Backend einzustellende Größe beeinflußt nur die Dateigröße, in der die thumbs gespeichert werden. Nicht die Darstellung.

Es macht also keinen Sinn irgendwie 400 oder 500 px da einzutragen - es werden Dich nur Deine Besucher hassen wegen der Ladezeit.
Wenn Du große Vorschau-Bilder willst, musst Du ein großes div als Container für die Imageflow bereitstellen. Das heißt: im Template ein <div id="imageflow">page-content(X) einfügen</div>  anlegen - am besten gleich nach <body> und im css dieses div dann mit width 100%, z-index und Höhe und so weiter platzieren. Dann kriegst Thumbs die 400 oder 500 px hoch sind. Jetzt kannst zwar sagen Höhe der Vorschaubilder 500px, die Besucher werden Dich trotzdem hassen.

Aber wie erwähnt - das habe ich soooo schön ins Manual geschrieben......ic h frag´ mich wozu?

LG aus Himberg

[aldus]

Und ich frag mich warum wir im Backend unten die "manual" -links hereingekloppt haben ...
Da stehts ... 

Gruß
Aldus