Image/ Book Flipping: Ich brauche mal Hilfe bitte!

[kukki]

Wie schon mal erwähnt, wollte ich die Zusammenarbeit mit einer anderen Website (mit Flash erstellt) forcieren und habe mich nach dem Versuch der DOM-Manipulation - die nicht möglichst war - der Möglichkeit mittel jQuery-Plugin auf Basis des CP ImageSpezial bemüht ein solches Teil zum laufen zu bekommen. Nach nun zwei Tagen flippe ich langsam aus, nur meine Bilder flippen gar nicht!

Basis für das ganze ist dieses Plugin bzw. auch dieses hier

Mein CP-Template sieht aktuell so aus:

Code: Select all

<!--IMAGES_HEADER_START//-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
<div align=center>
		<input type=button class="buttons" value=prev onclick="clipmeR();" />
		<input type=button class="buttons" value=next onclick="clipmeL();" />
		Speed: <input id=speedButton style="width:30px;" value="15" onchange="pSpeed=parseInt(this.value);" />
		 <select id="flipSelect" style="display:none;"></select>
</div>
<p>&nbsp;</p>
<div id="myBook" style="display:block;">

<!--IMAGES_HEADER_END//-->

<!--IMAGES_ENTRY_START//-->
    <div class="imBookPage" style="background: url('{IMAGE_REL}')"> </div>
<!--IMAGES_ENTRY_END//-->

<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->
<!--IMAGES_FOOTER_START//-->
</div>
[PHP]
    $GLOBALS['block']['css']['slider'] = '';
    $GLOBALS['block']['custom_htmlhead']['slider'] = '<script type="text/javascript" src="include/inc_js/jquery/jquery.imBookFlip-0.6.js"></script>';
[/PHP]
<!--IMAGES_FOOTER_END//-->

In der Annahme, dass es eventuell an der Flip.js-Version lag, habe ich mir eine neuere als die vorgegebene V 05 eingespielt. Ich habe diese mit dem Dateinamen aus dem Template (Copy&Paste) als CP HTML eingeladen, die Daten sind vorhanden und werden auch geladen ... Pfad stimmt also. Die Bilder werden auch angeteigt (kann man in FireBug sich anzeigen lassen!)

Die ganze Sache kann man hier sehen!

Der Quelltext zeigt erst einmal keine Fehler:

<div id="myBook" style="display:block;"> <--- das habe ich auf block gesetzt!
<div class="imBookPage" style="background: url('content/images/4f05ed100b1a5d364f11d9368c2df7a9.jpg')"> </div>
<div class="imBookPage" style="background: url('content/images/3b5e5ed21b56d51a7c85255eea6daf8f.jpg')"> </div>
<div class="imBookPage" style="background: url('content/images/f8da4bc00eaf525aaee834364f569b16.jpg')"> </div>
</div>

In der "grasshopper..." Beschreibung wird noch ein Script aufgeführt,

Code: Select all

$ ( Dokument ) . ready (  Funktion ( )  { 
    $ ( "# myBook" ) . imBookFlip ( { 
	page_class :  'imBookPage' 
    } ) ; 
} ) ;

dass ... ich glaube gar nicht notwendig sein dürfte, oder doch? Ich habe davon weniger Ahnung und hoffe, dass mir jemand den entscheidenden Tipp geben kann, das Teil zum Laufen zu kriegen.

[juergen]

wenn du dir da nicht sicher bist, bau das Beispiel einfach 1:1 nach. Sicher gehört der javascript Aufruf dazu, das setzt ja alles was du brauchst in die Klassen,

[Old Boy]

Ohne das script, weiss doch JQuery garnicht, was zu tun ist! Erst damit steuerst du doch die Ereignisse.
Zudem würde ich darauf achten, dass dort kein Leerzeichen im Namen vorhanden ist!

nicht so:

$(document).ready( function() {
$("# myBook").imBookFlip({
page_class: 'imBookPage'
});
});

sondern:

$(document).ready( function() {
$("#myBook").imBookFlip({
page_class: 'imBookPage'
});
});

Sonst wird möglicherweise die ID garnicht erkannt?

[kukki]

Danke Euch für die Hilfestellung und das Schulterklopfen

wenn du dir da nicht sicher bist, bau das Beispiel einfach 1:1 nach. Sicher gehört der javascript Aufruf dazu, das setzt ja alles was du brauchst in die Klassen,

Ohne das script, weiss doch JQuery garnicht, was zu tun ist! Erst damit steuerst du doch die Ereignisse.
Zudem würde ich darauf achten, dass dort kein Leerzeichen im Namen vorhanden ist!
....
Sonst wird möglicherweise die ID garnicht erkannt?

Ja stimmt, im Praxishandbuch "jQuery" habe ich mal gelesen, dass erst dieses Script die ganze Sache mit jQuery zum Laufen bringt. Jetzt, wo Ihr das so schreibt ... Schöön, was dazu gelernt, bzw. in der Praxis erprobt. Ich habe es erst einmal als CP HTML drangehängt, das ganze funktioniert jetzt erst einmal - irgendwie - aber eben noch nicht ganz so, wie es sein soll.
Die "Überschrift" -Bottons... die funktioniern überhaupt noch nicht.

Ich werde das ganze noch einmal mit dem dieser Vorlage ! umbauen.

[kukki]

Sooooooo,ich habe alles noch einmal umgebaut und mich auf dieses (bessere Script) konzentriert! Auch wenn nicht unbeding notwendig, es gibt da sogar einen IE6-Supprt!

Die ganze Sache habe ich ziemlich ursprünglich aufgebaut, damit ich unmittelbar Fehler finden konnte! Siehe dazu die tolle Beschreibung für dieses Script ... und alles OHNE ein CP-Template
1. Im Bereich Basisinformation habe ich die Scripte für dieses Booklet geladen
2. dann habe ich einfach ein Anfangs-DIV erstellt mit dem CP-HTML

Code: Select all

<div class="booklet" id="mybook">

3. ff. erstellte ich einfach Content mit CP Text mit Bild, Bilder und Text ...
4. Dann habe ich das Ganze von (2.) mit

Code: Select all

</div> 

abgeschlossen.

Dann STRG+F5 und das jQuery rubelte sofort ohne Fehler los.

Eine Sache ist mir aufgefallen: Wenn man mit Frontned-Edit arbeitet, schiebt sich eine Leerseite noch dazwischen. In einem neuen Browser gehts einwandfrei. Das Schöne, die Funktionen wie Bildvergrößerungen etc. funktionieren wie gehabt!

Diese Vorgehensweise erinnerte mich mal an ein Akkordionscript(?) von pepe, der auch einfach die CPs mit einem DIV ummantelt hatte und schon lief die ganze Show wie gewollt ab!

Und nun gehts ans Eingemachte, die Dokumentation gibt eine Menge her, getestet werden müssen noch Dateienen (PDF, Videos etc,) müßte ja eigentlich auch iohne Probleme so klappen!

[Old Boy]

Angeregt durch deinen Vorschlag, habe ich mir mal das booklet Paket heruntergeladen und experimentiert.

Das klappt ja wunderbar und schon beim ersten Versuch mit Erfolg

Dazu habe ich den Contentpart Register (Tabs) verwendet, um damit das Booklet aufzubauen und die notwendigen Dateien in den HTML-Code einzuschleusen.
Den eigentlichen Inhalt füge ich dann entweder in den WYSIWYG-Bereich oder (bei mehreren Inhaltsarten) auch mittels ReplacementTag { SHOW_CONTENT:CP,12,345,67 } ein.

Das entpackte Script-Paket habe ich für die ersten Tests einfach komplett in den Ordern template/lib geschoben!

Hier mein Template für den CP Register (Tabs):

Code: Select all

<!--TABS_START//-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TABS_ENTRIES]
<div id="myBook-{ID}">
   {TABS_ENTRIES}
</div>[/TABS_ENTRIES]
<!-- JS-Dateien laden -->
<!-- JS: template/lib/booklet/jquery-1.7.2.min.js -->
<!-- JS: template/lib/booklet/jquery-ui-1.8.21.custom.min.js -->
<!-- JS: template/lib/booklet/jquery.easing.1.3.js -->
<!-- JS: template/lib/booklet/jquery.booklet.1.4.0.min.js -->
<!-- JS: 
        $(function() {
           $('#myBook-{ID}').booklet({ 
              width:"100%", height:"500px", 
              name:"Booklet zum Blättern", 
              tabs:true, 
              previousControlText:"zurück", nextControlText:"weiter", 
           });
        });
-->
<!-- CSS: template/lib/booklet/jquery.booklet.1.4.0.css -->
<!-- CSS: 
        .booklet { border:1px solid #ccc; } 
-->
<!--TABS_END//-->


<!--TABS_ENTRY_START//-->
	[TABTITLE]{TABTITLE}[/TABTITLE]
	[TABCONTENT]<div class="myBookPage-{ID}">
		[TABHEADLINE]<h3>{TABHEADLINE}</h3>[/TABHEADLINE]
		[TABTEXT]{TABTEXT}[/TABTEXT]
	</div>[/TABCONTENT]
<!--TABS_ENTRY_END//-->

Natürlich ist das nur mein 1. Labormuster und den eigenen Vorstellungen anzupassen und zu optimieren!

[update]

Könntest Du für mich Newbie auch den CP Tabs kurz zeigen, bitte?

[Old Boy]

Der CP Register (Tabs) ist ja nichts Besonderes.

Jede Seite des Booklets bekommt einen eigenen Registerbereich.
Im WYSIWYG Teil der Registerbereiche setze ich dann per SHOW_CONTENT die jeweils anzuzeigenden Contentparts ein.
Die Contentparts wiederum sind abgelegt in einem Customblock ohne eigenes Ausgabeziel im Haupttemplate.

Das ist alles.

[kukki]

Spannend wird die Sache, wenn mann dann noch PDF-Dateien oder/und Videodateien .... einbinden kann, diese als Thumbnail zu sehen und vergrößerbar, abspielbar sind. Ich komme vielleicht heute dazu, mich der Sache weiter zu widmen.

Der CP Register (Tabs) ist ja nichts Besonderes. ....
Das ist alles.

Einfach zeigen, bitte!

[Old Boy]

Da gibt es nichts zu zeigen.
In meinen 2 vorstehenden Beiträgen steht wirklich alles erforderliche drin

[santscho]

Sowas habe ich auch schon mal gemacht.

Hier (einfach runter scrollen):
http://www.aaronsphotocraft.com/index.p ... s-the-book

Falls Interesse besteht, kann ich es ja mal auf GIT-Hub stellen.

[nameless1]

gibt es einen grund warum nicht mit css3 und ohne den extra einsatz von js?

click

[kukki]

@santscho: Na klar doch würde mich interessieren, vor allem, weil bei Dir die Verkleinerung des Textes (aotomatisch ) lauft.

@nameless1: Ja und nein -
nein: wenn der IE aus dem Rennen genommen wird, dann könnte man komplett auf CSS3 umstellen, solange IE6,7,8 & Co. noch im Rennen sind, muss eine solche Lösung herhalten.
ja: da Flash uninteressant, ist JScript häufiger im Einsatz und für SEO besser, auf die Gefahr hin, das das abgeschaltet ist ... 3% vielleicht laut miener PIWIK-Statistik, ist JScript eine gute Alternative.
Danke aber für den Link, ist sehr interessant, habe ich bisher noch nicht entdeckt

[nameless1]

wenn der IE aus dem Rennen genommen wird

ach ihr und eure ie-ängste

[santscho]

wenn der IE aus dem Rennen genommen wird

ach ihr und eure ie-ängste

I LIKE