Welcome, Guest. Please login or register.
Did you miss your activation email?
February 12, 2012, 03:07:14 PM

Login with username, password and session length
Search:     Advanced search
Interested in joining the WebsiteBaker team?
For more Information read here or on our new website.
149651 Posts in 21100 Topics by 7539 Members
Latest Member: ionline
* Home Help Search Login Register
Pages: [1] 2 3 ... 7   Go Down
Print
Author Topic: FancyZoom  (Read 22786 times)
Maruk

Offline Offline

Posts: 97


WWW
« on: September 26, 2008, 10:25:08 AM »
Hallo an alle zusammen,

es gibt, wie ich finde, ein tolles Script das sich "FancyZoom" nennt.
Es dient zum Bild-Zoomen innerhalb einer Seite.
Weitere Infos dazu hier:
http://www.cabel.name/draft1/2008/02/fancyzoom-10.html

Ich würde das Script gerne in meiner WB 2.7 Seite einbinden.
Hab schon jede Menge rumprobiert, aber leider ohne Erfolg.

Hat evtl. jemand einen kleinen Tip zum Ansatz hierzu?
Wäre toll!

Gruß

Friedrich
Logged
Stefek
WebsiteBaker Org e.V.

Offline Offline

Posts: 4755
« Reply #1 on: September 26, 2008, 10:59:52 AM »
Hast Du die Schritte 1-2-3 usw. befolgt?

Das beste ist, Du tust die JS Dateien in Dein Templatefolder und verlinkst zu ihnen.
Der Pfad ist dann ähnlich wie zu Deinen CSS Dateien.

Das müsste ein guter Tipp sein  wink

MfG,
Stefek
Logged
"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)
Maruk

Offline Offline

Posts: 97


WWW
« Reply #2 on: September 26, 2008, 11:07:58 AM »
Jepp!.....  grin
Soeben hat's geklappt. Habe geschafft es einzubinden.

Für jeden den es interessiert wie ich es gemacht habe.

1. die 2 Ordner "js-global" und "images-global" in das Template-Verzeichnis kopieren.

2. In den <Head> Bereich der index.php des Templates folgende 2 Zeilen einfügen:
<script src="<?php echo TEMPLATE_DIR; ?>/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="<?php echo TEMPLATE_DIR; ?>/js-global/FancyZoomHTML.js" type="text/javascript"></script>

3. den Body Tag mit onload="setupZoom()" erweitern das er z.B. so aussieht:
<body onload="setupZoom()">

4. Im Verzeichnis "js-global" die Datei "FancyZoom.js" editieren.
Da muss in der Zeile 44 die Verzeichnisangabe zum Ordner "images-global" angepasst werden.

FERTIG!
Logged
Stefek
WebsiteBaker Org e.V.

Offline Offline

Posts: 4755
« Reply #3 on: September 26, 2008, 11:18:32 AM »
 wink

Super!

Jetzt hast Du nur noch ein weiteres Problem (kein wirklich großes Problem, beeinträchtigt aber die Ladezeit).
Nämlich: Die JSs werden jetzt immer, auf jeder Seite geladen.
Wenn Du es so machen möchtest, dass nur dann die JS geladen werden, wenn Du sie brauchst, solltest Du Dir das Modul X-find-Class vom User Aldus anschauen.
Es ist kaum bekannt, aber sehr nützlich für eben solche Anwendungsbeispiele .

MfG,
Stefek
« Last Edit: September 26, 2008, 11:23:45 AM by Stefek » Logged
"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)
Maruk

Offline Offline

Posts: 97


WWW
« Reply #4 on: September 26, 2008, 11:21:10 AM »
Werd ich mir gleich mal ansehen.
Danke für den Tip.
Logged
Maruk

Offline Offline

Posts: 97


WWW
« Reply #5 on: September 26, 2008, 11:25:38 AM »
Ich nochmal,  smiley

hab gerade mal im Forum nach "x-find-class" gesucht, nix gefunden.
Auch in den Addons nicht.

Könntest du mir sagen wo ich es finde?
Danke!
Logged
Stefek
WebsiteBaker Org e.V.

Offline Offline

Posts: 4755
« Reply #6 on: September 26, 2008, 11:31:18 AM »
http://www.websitebaker2.org/forum/index.php/topic,10865.0.html

Ist etwas "ansruchsvoller".

Es kann auch sein, dass Du die JS Datei etwas anpassen musst, sodass das, was in den Body Tag reinkommt <.... onload=blabla> von der JS Datei kommt.

Solltest Du auf Probleme stoßen, werde ich versuchen, Dir zu helfen innerhalb deses Threads.
Anschließendposten wir hier die Lösung. Einverstanden?

Das was eigentlich schade ist, ist dass dieses Script eine nicht GPL kompatible Lizenz hat.
Sonst wäre es noch interessanter.

MfG,
Stefek

EDIT:
Hier eine GPLVariante (allerdings etwas schwieriger in der Handhabung)
http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/
« Last Edit: September 27, 2008, 02:53:04 AM by Stefek » Logged
"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)
Maruk

Offline Offline

Posts: 97


WWW
« Reply #7 on: September 26, 2008, 11:36:50 AM »
OK, so machen wir es!
Werd mich nachher mal damit beschäftigen.
Meld mich dann wieder und tue Kund ob ich da durchblicke oder nicht.  smiley
So wahnsinnig viel Ahnung hab ich ehrlich gesagt nicht.
Immer nach dem Motto: "Try and See"

Bis dann.

Friedrich
Logged
Maruk

Offline Offline

Posts: 97


WWW
« Reply #8 on: September 26, 2008, 01:00:04 PM »
Puhhhh.......
ich glaube da bin ich doch ein ganzes Stück überfordert. Blick da nicht im geringsten durch.
So weit reichen da meine Fähigkeiten denn wohl doch nicht. HIIILLLFFFEEE!!!  smiley

Hab übrigens noch ein Problemchen entdeckt.
Dadurch das sich die Beeinflussung auf ganz normale Bildverlinkuns-Tags bezieht gibt's Probleme wenn man gleichzeitig auch eine Fotogallerie installiert hat.
Kann man das irgendwie tricksen?
Logged
Stefek
WebsiteBaker Org e.V.

Offline Offline

Posts: 4755
« Reply #9 on: September 26, 2008, 01:07:28 PM »
Quote from: Maruk on September 26, 2008, 01:00:04 PM
Kann man das irgendwie tricksen?
Vor allem dafür wäre x_find_class gut.
Weil Du wahrscheinlich auf der Galleryseite dieses Script nicht brauchst, würde es nicht geladen und die Gallery prallt nicht mit dem Ding zusammen.

Was die Einbindung angeht.
Entschuldige mich. Ich hoffe es hat Zeit. Bin grade im Planungs"stress".

Wenn es ein-zwei Tage warten kann, versuche ich es zu machen.

MfG,
Stefek
Logged
"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)
Maruk

Offline Offline

Posts: 97


WWW
« Reply #10 on: September 26, 2008, 01:14:38 PM »
Natürlich hat es Zeit.
Rom ist auch nicht an einem Tag gebaut.  smiley

Finde es überhaupt schon ganz super toll wenn du dich dieser Sache annimmst.

DANKE!!!!!!!!!
Logged
vyni

Offline Offline

Posts: 566
« Reply #11 on: September 26, 2008, 02:07:04 PM »
Hi,
na und wie man da tricksen kann!

Das ist nun ein Paradebeispiel für die erweiterte simplepagehad / news Kombination die wir erst kürzlich besprochen haben.
Man müßte das vielleicht noch im Modul Manual machen und das dann dafür verwenden.

Aber auch das news geht damit - ein bisserl vielleicht in der view.php "stricken". Aber kann man das news-modul 2 mal aktivieren - also 2 unabhängie Seiten News? Hab´ ich noch nicht probiert. - Ich geh´ das jetzt an.....

LG aus Himberg bei Wien
Logged
PS: Falls jemand eine Idee hat was zu tun ist und mir das erklären könnt - geh bitte davon aus dass ich ahnungslos bin, was php und so betrifft. Ich kann grad was lesen, kopieren und einfügen,  ungefähr verfolgen und glauben.
Maruk

Offline Offline

Posts: 97


WWW
« Reply #12 on: September 26, 2008, 02:21:29 PM »
Hi vyni,

schön das sich noch jemand zu dieser ilusteren Runde dazu gesellt.  smiley
Wenn ich dich richtig verstanden habe willst du FancyZoom an das News-Modul binden.
Ist sicher ne super Sache, ich persönlich würde es aber besser finden wenn man es unabhängig von irgendeinem Modul im ganzen CMS bei Bedarf nutzen kann.
Am aller primasten natürlich wenn man FancyZoom als echtest WB-Modul einbauen könnte.

Gruß

Friedrich
Logged
aldus

Offline Offline

Posts: 1238
« Reply #13 on: September 26, 2008, 02:22:58 PM »
Hallo
bei der Gelegenheit gleich erst einmal ein Update eingespielt - Version von "x_find_class" ist
nun 0.1.7 ... auch bei AMASP.

Und ich weiss: »Programmierer und Dokumentation(-en)«. (Da fass ich mich auch an die eigenen Nase).

Eigentilich ist es ganz einfach:
- Modul installieren
- im Template oben den Codeschnippsel einfügen
- dann z.B. auf einer Code/Code2 Seite halt den Tag mit der Klasse einfügen ...

Bei "PrintPretty" hatten wir es im Beispiel halt mit einem "pre"-tag und der class "printpretty" gemacht.
Ab Du kannst genauso ein einfaches "p" und als class halt "wiki_zitat" oder "dir11_lingo" oder was auch
immer suchen lassen. Und nur dann, wenn es im Page-Content auftraucht, werden auch die angegebenen
JavaScripte und/oder CSS-Datein eingebaut - nur dann. Bei allen anderen Seiten ändert sich nichts.

Gruß
Aldus
Logged
Maruk

Offline Offline

Posts: 97


WWW
« Reply #14 on: September 26, 2008, 02:35:42 PM »
Hallo Aldus,

ich glaube ich kann deiner Ausführung nicht wirklich folgen. Bin ich wohl ein bissel zu dusselig dazu.
Modul einspielen, ok.
Dann gehts aber schon los. welchen Codeschnipsel?
Der Rest verstehe ich auch nicht so wirklich... sad

LG Friedrich
Logged
Stefek
WebsiteBaker Org e.V.

Offline Offline

Posts: 4755
« Reply #15 on: September 26, 2008, 02:41:10 PM »
Es geht um den Codeschnippsel, der in dem Thread vorgestellt wird, wo auch das Modul gedownloaded werden kann.
Diese kommt ins Template.

Wie dem auch sei.
Ich schaue, dass ich mich heute oder morgen daran mache.

Dann bauen wir mal Rom fertig. Wird mal wieder Zeit, wenn man sich die olle Stadt mal anschaut  grin
Das Sprichwort müsste heißen "Wat? Rom wurde bis heute nicht fertiggestellt."

VG,
Stefek
Logged
"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)
vyni

Offline Offline

Posts: 566
« Reply #16 on: September 26, 2008, 02:41:48 PM »
Quote from: Maruk on September 26, 2008, 02:21:29 PM
ich persönlich würde es aber besser finden wenn man es unabhängig von irgendeinem Modul im ganzen CMS bei Bedarf nutzen kann.
grin Hast ja selber gemerkt dass dann diverse Galerien nicht gehen. Dazu musst das JS neu schreiben. Ich kann das ned. Ich bin nur ein "Probierer".
Das mit´n Modul is so a Sach - vielleicht machts ja einer - aber bis dahin gibt´s die Sofortlösung über´s news. Da hat einer eine kleine Änderung gemacht, damit man ein JS bei Bedarf im header laden kann. Gilt dann für genau diese Seite.
Na und was ist das Problem, wenn man die Seite auf der man das einsetzen will als news-Seite anlegt? Und dann per direkt-Link aufruft? Wozu also ein Modul ?

@Mr. Aldus
Für Dich ist es ganz einfach. Für mich nicht. Für mich ist nichteinmal einfach zu verstehen wovon Du gerade redest.

Das Problem ist ganz einfach, das JS im header. Schon seit langem hab´ ich das "Problem" ein JS in den header zu kriegen, wenn ich es auf einer Seite haben will. - Dass ich dann auf genau dieser Seite andere JS (Imageflow oder dgl.) nicht verwenden kann versteht sich von selbst - ist ja auch garnicht nötig.

LG Vyni
Logged
PS: Falls jemand eine Idee hat was zu tun ist und mir das erklären könnt - geh bitte davon aus dass ich ahnungslos bin, was php und so betrifft. Ich kann grad was lesen, kopieren und einfügen,  ungefähr verfolgen und glauben.
Maruk

Offline Offline

Posts: 97


WWW
« Reply #17 on: September 26, 2008, 02:52:41 PM »
Ohje ohje... mir qualmt die Birne. smiley
Ich glaub ich muß noch ne ganze Menge lernen.
Werd mit dem Thema weiter rumprobieren, aber in erster Linie sicher den Geistesblitz von Stefek abwarten, damit Rom noch ansehnlicher wird. smiley
Logged
Stefek
WebsiteBaker Org e.V.

Offline Offline

Posts: 4755
« Reply #18 on: September 26, 2008, 03:07:18 PM »
Quote from: vyni on September 26, 2008, 02:41:48 PM
Das Problem ist ganz einfach, das JS im header. Schon seit langem hab´ ich das "Problem" ein JS in den header zu kriegen, wenn ich es auf einer Seite haben will. - Dass ich dann auf genau dieser Seite andere JS (Imageflow oder dgl.) nicht verwenden kann versteht sich von selbst - ist ja auch garnicht nötig.

Genau dasx-find-class ist die Lösung für Dein Problem, Vyni.
Spiel damit herum.

Es wird das Script oder das gewpnschte CSS nur dann geladen, wenn ein bestimter TAG mit einer bestimmten CLASS auf irgendeiner Seite auftaucht - SONST NICHT.
Das ganze kommt ins Template (index.php) usw... gar nicht schwer.

LG,
Stefek

@Vyni
Installiere Dir mal das :
http://www.websitebaker2.org/forum/index.php/topic,10898.0.html
Ist ein gutes Beispiel der Funktionsweise von x-find-class (es sucht die Seite nach einer Klasse durch und wenn sie vorhanden ist, werden die JS und CSS in den Header eingebunden / verlinkt)
Logged
"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)
Stefek
WebsiteBaker Org e.V.

Offline Offline

Posts: 4755
« Reply #19 on: September 27, 2008, 03:45:04 PM »
Hallo Maruk!

Im Anhang findest Du x_find_class mit der Fancy-Zoom Erweiterung.
(Bitte die Lizenz beachten für kommerziellen Einsatz)

Wie Du es installierst:

Als erstes:
Öffne die index.php Deines Templates und füge das folgende ein
Code:
<?php  if (function_exists("find_my_class") )
{
     $path_to_js = WB_URL."/modules/x_find_class/fancy-zoom/FancyZoom.js";
     $path_to_css = WB_URL."/modules/x_find_class/none.css";
      
      ob_start();
        page_content();
        $content = ob_get_contents();
    ob_end_clean();
    
    find_my_class($content, "p", "nixhier", $path_to_css, $path_to_js);
  }

Als nächstes:
Entpacke die ZIP x_find_class.zip
gehe zum Ordner fancy-zoom und öffne die Datei FancyZoom.js
Finde die Zeile 44
var zoomImagesURI   = 'http://localhost/wb-27/modules/x_find_class/fancy-zoom/zoompics/'; 
// Location of the zoom and shadow images
und passe hier die komplette URL zum zoompics ordner an (das ist das einzige, wo ich nicht wusste, wie ich es besser anpassen könnte)

Zippe x_find_class wieder und installiere es über das Backend >> Erweiterungen >> Module
WENN BEREITS EINE INSTALLATION VON x_find_class VORHANDEN IST:
Sollte das nicht gemacht werden, weil dann der andere Einsatz überschrieben wird.
Aldus allein scheint zu wissen, wie man x_find_class für mehrere Anwendungen gleichzeitig nutzbar macht.  grin

Dann:
Die Seite, wo Du es einsetzen möchtest. Mache einfach so viele Bilder wie Du es gerne wünscht und wie Du wünscht ABER Du musst eine zusätzliche Section auf dieser Seite haben (vom Typ Code).
In diese Section gibst Du ein:
echo '<p class="nixhier">&nbsp</p>'

Dieser Schritt ist wichtig. WARUM? Weil nur so x-find-class zum Einsatz kommt: es sucht nämlich nach dem TAG "p" mit der CLASS "nixhier".

Viel Spass.

Übrigens habe ich ein ähnliches Script gefunden, welches auf der GPL rausgegeben wurde.
Es bedient sich der Bibliothek JQuery und ist für jene, die in ihrer Seite JQuery ohnehin verwenden wahrscheinlich interessant.

http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/

MfG,
Stefek
Logged
"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)
Maruk

Offline Offline

Posts: 97


WWW
« Reply #20 on: September 27, 2008, 04:33:45 PM »
Hallo Stefek,

super super toll das du die Sache so zügig gelöst hast.
Ein Problemchen hab ich aber anscheinend noch.
Du hast geschrieben "Eine zusätzliche Sektion vom Typ Code"
Du meinst sicher "Abschnitt" gell?
Hab also der betreffenden Seite oberhalb einen Code-Abschnitt verpasst und den Code "echo '<p class="nixhier">&nbsp</p>'" reingepackt.
Alles andere genau wie beschrieben gemacht. Funzt nicht. sad
Das große Bild wird normal im Fenster angezeigt.

Gruß

Friedrich
Logged
Stefek
WebsiteBaker Org e.V.

Offline Offline

Posts: 4755
« Reply #21 on: September 27, 2008, 05:38:23 PM »
Ja, genau. Einen Abschintt vom Typ Code.
Da kommt das rein:
echo '<p class="nixhier">&nbsp</p>';

(Habe das Semikolon / Punktstrich vergessen.)

Oder Du installierst vorher das Module "Code2" von Chio.
Hier zu finden

Machst Dann eine neue Sektion/Abschitt vom Typ Code2 und wählst dann in den optionen HTML


Dann gibst Du ein:
<p class="nixhier">&nbsp</p>

Und fertisch.

MfG,
Stefek
Logged
"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)
Maruk

Offline Offline

Posts: 97


WWW
« Reply #22 on: September 27, 2008, 05:58:23 PM »
Super! Klappt. smiley

War selbst aber auch nicht ganz untätig.
Nachdem ich deine geänderte FancyZoom.js gesehen habe bin ich auf folgende Idee gekommen:
Man braucht hierzu keine Template index.php anpassen und braucht auch nicht x_find_class.

1. Die angehängte zip-datei runterladen und entpacken.

2. Im Ordner FancyZoom_WB aus der entpackten Datei in der Zeile 44 der Datei FancyZoom.js den Absolutpfad zum Bilderverzeichnis anpassen

2. Ordner FancyZoom_WB in das WB-Verzeichnis auf dem Server kopieren.

3. der Seite auf der FancyZoom eingesetzt werden soll einen Abschnitt vom Typ HTML hinzufügen.

4. In diesen Abschnitt folgende 2 Zeilen einfügen:

Code:
<script src="http://www.Deine_URL/wb/FancyZoom_WB/FancyZoom.js" type="text/javascript"></script>
<script src="http://www.Deine_URL/wb/FancyZoom_WB/FancyZoomHTML.js" type="text/javascript"></script>

Sollte doch auch klappen, oder?

FERTIG!
Logged
Stefek
WebsiteBaker Org e.V.

Offline Offline

Posts: 4755
« Reply #23 on: September 27, 2008, 07:12:15 PM »
Wenns klappt, dann wunderbar.
Ja, das macht das ganze wahrscheinlich sogar noch schneller.


Freut mich, dass bei Dir das Suchen nach neuen Wegen im WB ausgebrochen ist  tongue

VG,
Stefek
Logged
"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)
Maruk

Offline Offline

Posts: 97


WWW
« Reply #24 on: September 27, 2008, 07:23:06 PM »
Ja, funktioniert auch prima. smiley
Werde jetzt mal mein ganzes Hirn zusammenraufen und versuchen ein Modul draus zu machen das man in der gewünschten Seite nur noch mit "InitFancyZoom()" oder ähnlich aktivieren muss.
Wird aber bei meinem Wissensstand über Module PHP u.s.w. ein Weilchen dauern.
Aber wie habe ich schon mal zitiert?! "Rom ist auch nicht an einem Tag gebaut!" smiley

Schönes Wochenende noch.

Friedrich
Logged
Pages: [1] 2 3 ... 7   Go Up
Print
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.16 | SMF © 2011, Simple Machines Valid XHTML 1.0! Valid CSS!
Impressum & Datenschutz | powered by WebsiteBaker. ©2004–2010 by Website Baker Org e.V. , all rights reserved | Legal Notice & Privacy Policy