Zurück   Web to Date - SIQUANDO Forum >

Web to Date - Data Becker
> Web to Date 7.0

Antwort
 
LinkBack (17) Themen-Optionen Thema durchsuchen Ansicht
Alt 29.01.2011, 09:26   13 links from elsewhere to this Post. Click to view. #1 (permalink)
Erfahrener Benutzer
 
Benutzerbild von Manni-T-xX2006Xx
 
Registriert seit: 31.12.2010
Ort: Deutschland
Beiträge: 112
Manni-T-xX2006Xx befindet sich auf einem aufstrebenden Ast
Standard TUTORIAL | Lightbox für Absatzbild

So ich fang mal mit den ersten Möglichkeiten der von mir genutzten Lightbox an.

!!! Bevor ihr gleich damit anfangt macht ein Backup von eurem Design Ordner !!!

Absatzbild in Lightbox öffnen

1. ich braucht dazu das Script PrettyPhoto v.3.0.1
2. entpackt das Verzeichnis
3. in dem Verzeichnis sucht ihr nun folgende Dateien: jquery.prettyphoto.js , prettyphoto.css
4. kopiert diese Dateien in das common Verzeichnis von W2D7
5. jetzt fügen wir diese Dateien gleich ins Design (euer Design) ein, geht dazu in euer Design Verzeichnis und öffnet die global.ccml
6. ihr tragt hier unter den ersten <cc:asset Zeilen folgenden Code ein

<cc:asset src="jquery.prettyphoto.js" dst="jquery.prettyphoto.js" obj="jphoto" common="1" noparse="1">
<cc:asset src="prettyphoto.css" dst="prettyphoto.css" obj="sphoto" common="1" noparse="1">


achtet darauf das euer Design folgenden Eintrag in der global.ccml beinhaltet

<cc:asset src="jquery.js" dst="jq.js" obj="jquery" common="1" noparse="1">

7. jetzt brauchen wir die Verlinkung der Dateien in der Seite selbst, öffnet dazu eure navigation.ccml
8. vor dem </head> TAG tragt ihr nun folgende Zeilen ein

<link rel="stylesheet" type="text/css" href="<cc:print value="&sphoto.url">" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script type="text/javascript" src="<cc:print value="&jphoto.url">" ></script>


jetzt noch vor dem schliessenden </body> TAG dies hier einfügen

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'});
});
</script>


9. speichert die global.ccml & navigation.ccml ab
10. nun bauen wir die Funktion ein das, dass Absatzbild per Ein/Aus Option in der Lightbox angezeigt wird bzw. die Standard Ausgabe von W2D7 verwendet wird
11. Dazu öffnen wir die config.ccml, am Ende der Datei sind die sogenannten erweiterten Design-Eigenschaften definiert. Diese sind an folgenden Code zu erkennen
<cc:property id="....
12. unter diesen Design-Eigenschaften fügen wir eine neue Zeile und tragen folgenden Code ein

<cc:property id="design.paragraph.piczoom.lightbox" caption="Bild in Lightbox öffnen (ZOOM)" folder="Lightbox" targettype="paragraph" targetsubtype="" type="boolean" default="0">

13. speichert die navigation.ccml ab
14. jetzt müssen wir W2D7 mitteilen, wo wir wann welches Bild in der Lightbox öffnen wollen.
15. dazu öffnen wir nun die page.ccml und suchen folgenden Code

<cc:if cond="&para.sidepicture.zoom.ispicture">
<cc:picture uid="&para.sidepicture.zoom.uid" obj="hugepic">
<a href="<cc:printpictureurl obj="hugepic">" target="_blank" title="<cc:print value="&para.sidepicture.text">"><cc:printpicture class="picture" xhtml="1" obj="parapic_200"></a>
</cc:if>


den kopieren wir uns und tragen ihn in eine neue *.txt Datei ein um ihn nicht zu löschen, da wir den Code noch ändern müssen, dazu weiter unten mehr
16. So wir haben den Code gesichert und können nun mit dem Befehl anfangen. Dort wo der gesicherte Code vorher stand schreiben wir nun folgenden Code

<cc:if cond="&para.properties.design.paragraph.piczoom.li ghtbox">

machen 2 neue Zeilen so das wir eine freie Zeile haben und tragen diesen Code ein

<cc:else>

wieder eine neue Zeile, jetzt kommt der gesicherte Code unverändert wieder an dieser Stelle rein und machen anschließend wieder eine neue Zeile um den Befehl zu beenden mit folgendem Code

</cc:if>
euer Befehl sollte nun wie folgt aussehen

<cc:if cond="&para.properties.design.paragraph.piczoom.li ghtbox">

<cc:else>
<cc:if cond="&para.sidepicture.zoom.ispicture">
<cc:picture uid="&para.sidepicture.zoom.uid" obj="hugepic">
<a href="<cc:printpictureurl obj="hugepic">" target="_blank" title="<cc:print value="&para.sidepicture.text">"><cc:printpicture class="picture" xhtml="1" obj="parapic_200"></a>
</cc:if>
</cc:if>

17. Jetzt ändern wir den gesicherten Code für das Lightbox Script ab. Wir brauchen einen Container mit der Klasse "gallery clearfix", das machen wir am besten mit einem <p></p> TAG dies sieht dann so aus <p class="gallery clearfix"></p> zwischen diesem TAG muss die Ausgabe des Bildes erfolgen.
Wir kopieren nun <p class="gallery clearfix"> und setzen dies vor dem Code <a href="<cc:printpictureurl obj="hugepic">" target="_blank" title="<cc:print value="&para.sidepicture.text">"><cc:printpicture class="picture" xhtml="1" obj="parapic_200"></a> und dahinter wird </p> eingefügt.
18. Jetzt sollte es so aussehen
<p class="gallery clearfix"><a href="<cc:printpictureurl obj="hugepic">" target="_blank" title="<cc:print value="&para.sidepicture.text">"><cc:printpicture class="picture" xhtml="1" obj="parapic_200"></a></p>
19. um dem script anzuweisen was es mit dem Bild machen soll brauchen wir den Code rel="prettyPhoto
" diesen Code tragen wir dort ein wo jetzt noch das hier steht target="_blank" wir ersetzen also das target Attribute mit dem rel Attribute.
20. es sollte nun so aussehen
<p class="gallery clearfix"><a href="<cc:printpictureurl obj="hugepic">" rel="prettyPhoto" title="<cc:print value="&para.sidepicture.text">"><cc:printpicture class="picture" xhtml="1" obj="parapic_200"></a></p>
21. unser gesicherter Code sind im ganzen nun so aus

<cc:if cond="&para.sidepicture.zoom.ispicture">
<cc:picture uid="&para.sidepicture.zoom.uid" obj="hugepic">
<p class="gallery clearfix"><a href="<cc:printpictureurl obj="hugepic">" rel="prettyPhoto" title="<cc:print value="&para.sidepicture.text">"><cc:printpicture class="picture" xhtml="1" obj="parapic_200"></a></p>
</cc:if>
22. diesen neuen Code tragen wir in der freien Zeile ein, in eurer page.ccml habt ihr nun aus dem alten Code

<cc:if cond="&para.sidepicture.zoom.ispicture">
<cc:picture uid="&para.sidepicture.zoom.uid" obj="hugepic">
<a href="<cc:printpictureurl obj="hugepic">" target="_blank" title="<cc:print value="&para.sidepicture.text">"><cc:printpicture class="picture" xhtml="1" obj="parapic_200"></a>
</cc:if>

diesen neuen Code gemacht
<cc:if cond="&para.properties.design.paragraph.piczoom.li ghtbox">
<cc:if cond="&para.sidepicture.zoom.ispicture">
<cc:picture uid="&para.sidepicture.zoom.uid" obj="hugepic">

<p class="gallery clearfix"><a href="<cc:printpictureurl obj="hugepic">" rel="prettyPhoto" title="<cc:print value="&para.sidepicture.text">"><cc:printpicture class="picture" xhtml="1" obj="parapic_200"></a></p>
</cc:if>
<cc:else>
<cc:if cond="&para.sidepicture.zoom.ispicture">
<cc:picture uid="&para.sidepicture.zoom.uid" obj="hugepic">
<a href="<cc:printpictureurl obj="hugepic">" target="_blank" title="<cc:print value="&para.sidepicture.text">"><cc:printpicture class="picture" xhtml="1" obj="parapic_200"></a>
</cc:if>
</cc:if>

23. speichert nun die page.ccml ab
24. eine letzte Änderung jetzt noch in der paragraph_picture.ccml
sucht dort auch wieder den Codeblock
<cc:if cond="&para.sidepicture.zoom.ispicture">
und ändert ihn so um das ihr wieder euren Befehl habt wie in der page.ccml
sichert den Code, erstellt wieder den Container und ersetzt das target Attribute mit dem rel Attribute, danach speichert ihr die
paragraph_picture.ccml
25. wenn ihr nun euer W2D7 startet, euer Projekt auswählt und in die erweiterten Absatz-Eigenschaften schaut, habt ihr dort die Möglichkeit die Lightbox ein/aus zu schalten.
26. zu Abschluss und nachdem ihr eure Seite neu hochgeladen habt, geht bitte mit einem FTP Programm auf eurem Webhost und öffnet dort den Ordner images eurer Seite, dort ladet ihr den Ordner prettyPhoto hoch der im Entpackten Verzeichnis liegt.


Wer sich schon ein bischen mit HTML usw. auskennt sollte sich mal die README vom Lightbox Script anschauen oder die Seite besuchen. Denn dort ist erklärt wie man damit sogar ne Slideshow erstellt.

Ich hoffe ihr kommt mit dem Tutorial zurecht. Wenn nicht schreibt mir ne PM

Viel Spass damit, das nächste Turioal kommt in den nächsten Tagen. Wie man den Mediaplayer in der Lightbox öffnet.

__________________
Meine erste Mod´s:

W2D 7.0 || www.Josephine-frco.de

W2D 8.0s || finance-coach.at

Geändert von Manni-T-xX2006Xx (25.02.2011 um 23:25 Uhr)
Manni-T-xX2006Xx ist offline   Mit Zitat antworten
Alt 29.01.2011, 09:35   #2 (permalink)
Erfahrener Benutzer
 
Benutzerbild von Manni-T-xX2006Xx
 
Registriert seit: 31.12.2010
Ort: Deutschland
Beiträge: 112
Manni-T-xX2006Xx befindet sich auf einem aufstrebenden Ast
Standard AW: TUTORIAL | Lightbox für Absatzbild

Doch und zwar wenn andere arbeiten, ich arbeite wenn andere schlafen, so kann ich in Ruhe arbeiten weil die schlafenden die arbeitenden nicht stören können. =D

Bin halt ne Nachteule *gg*
__________________
Meine erste Mod´s:

W2D 7.0 || www.Josephine-frco.de

W2D 8.0s || finance-coach.at
Manni-T-xX2006Xx ist offline   Mit Zitat antworten
Alt 29.01.2011, 11:21   #3 (permalink)
Erfahrener Benutzer
 
Registriert seit: 28.11.2009
Ort: Cottbus/Spreewald
Beiträge: 3.499
Paulemann wird schon bald berühmt werden
Standard AW: TUTORIAL | Lightbox für Absatzbild

Wo hast Du die Grafiken für Pretty gelassen?
__________________
Never change a running system - wenn etwas läuft, soll man nichts ändern.

Design-Anpassungen und mehr....
----------------
Support zu meinen Anpassungen....
Paulemann ist offline   Mit Zitat antworten
Alt 29.01.2011, 14:08   #4 (permalink)
Neuer Benutzer
 
Registriert seit: 23.06.2009
Ort: Dormagen
Beiträge: 28
edvjojo befindet sich auf einem aufstrebenden Ast
Standard AW: TUTORIAL | Lightbox für Absatzbild

Ich hatte das Pech, den Artikel via RSS zu bekommen. Tut es euch nicht an, das gibt Augenkrebs. ;-) Das liegt aber nicht an dir sondern an dem grauen Forum hier. Auf jeden Fall DANKE. Werde mir mal ein paar regnerischen Stunden damit aufwerten. Nochmals Danke!
edvjojo ist offline   Mit Zitat antworten
Alt 29.01.2011, 17:35   #5 (permalink)
Erfahrener Benutzer
 
Benutzerbild von inselpiraat
 
Registriert seit: 12.03.2010
Ort: Nordhorn
Beiträge: 465
inselpiraat befindet sich auf einem aufstrebenden Ast
Standard AW: TUTORIAL | Lightbox für Absatzbild

Zitat:
Zitat von Paulemann Beitrag anzeigen
Wo hast Du die Grafiken für Pretty gelassen?
Moin Bernd, bei mir liegen die im designordner - aber ich habe einen etwas anderen weg gewählt. So liegt die *js auch nicht im common sondern ebenfalls im Designordner.

Habe es in Seyffenbrand eingebaut.

Bei Bedarf schicke ich dir den Ordner gerne rüber.

VG
Michael
inselpiraat ist offline   Mit Zitat antworten
Alt 29.01.2011, 18:22   #6 (permalink)
Erfahrener Benutzer
 
Registriert seit: 28.11.2009
Ort: Cottbus/Spreewald
Beiträge: 3.499
Paulemann wird schon bald berühmt werden
Standard AW: TUTORIAL | Lightbox für Absatzbild


Bin auch schon länger am Ball. Brauchst also nicht Micha. Danke
Habe ebenfalls alles im Design.
---------------------------
Mir ging es nur darum, das augenscheinlich in dem Tut oben etwas fehlt.
__________________
Never change a running system - wenn etwas läuft, soll man nichts ändern.

Design-Anpassungen und mehr....
----------------
Support zu meinen Anpassungen....

Geändert von Paulemann (29.01.2011 um 22:01 Uhr)
Paulemann ist offline   Mit Zitat antworten
Alt 29.01.2011, 20:10   #7 (permalink)
Erfahrener Benutzer
 
Benutzerbild von Manni-T-xX2006Xx
 
Registriert seit: 31.12.2010
Ort: Deutschland
Beiträge: 112
Manni-T-xX2006Xx befindet sich auf einem aufstrebenden Ast
Standard AW: TUTORIAL | Lightbox für Absatzbild

Fehler Korrektur !!!

Punkt 8. und Punkt 26. srorry für die Fehler
__________________
Meine erste Mod´s:

W2D 7.0 || www.Josephine-frco.de

W2D 8.0s || finance-coach.at
Manni-T-xX2006Xx ist offline   Mit Zitat antworten
Alt 29.01.2011, 21:38   #8 (permalink)
Administrator
 
Benutzerbild von voodoo36
 
Registriert seit: 17.04.2009
Ort: Regensburg
Beiträge: 4.595
voodoo36 befindet sich auf einem aufstrebenden Ast
Standard AW: TUTORIAL | Lightbox für Absatzbild

Sind die Fehler in deinem Beitrag behoben? Davon gehe ich mal aus!

Hier... ist auch noch ein Fehler... zwischen Punkt 22. und 23.
...
diesen neuen Code gemacht
<cc:if cond="&para.properties.design.paragraph.piczoom.li ghtbox">
__________________
Grüße aus Bayern

Geändert von voodoo36 (29.01.2011 um 21:46 Uhr)
voodoo36 ist offline   Mit Zitat antworten
Alt 29.01.2011, 21:46   #9 (permalink)
Erfahrener Benutzer
 
Benutzerbild von Manni-T-xX2006Xx
 
Registriert seit: 31.12.2010
Ort: Deutschland
Beiträge: 112
Manni-T-xX2006Xx befindet sich auf einem aufstrebenden Ast
Standard AW: TUTORIAL | Lightbox für Absatzbild

Zitat:
Zitat von voodoo36 Beitrag anzeigen
Sind die Fehler in deinem Beitrag behoben? Davon gehe ich mal aus!
Ja, =D


ich schreib schon das nächste Tutorial. Für den Einsatz der Lightbox an dem Mediaplayer =D
__________________
Meine erste Mod´s:

W2D 7.0 || www.Josephine-frco.de

W2D 8.0s || finance-coach.at
Manni-T-xX2006Xx ist offline   Mit Zitat antworten
Alt 29.01.2011, 21:53   #10 (permalink)
Administrator
 
Benutzerbild von voodoo36
 
Registriert seit: 17.04.2009
Ort: Regensburg
Beiträge: 4.595
voodoo36 befindet sich auf einem aufstrebenden Ast
Standard AW: TUTORIAL | Lightbox für Absatzbild

Super, ich hatte die PrettyPhoto schon in Einsatz... super Lightbox, aber ich freu mich!!

Frage: Hast du eine Ahnung wie ich die Line oberhalb des Absatzes ins Bellerophon bekomme!

page.ccml
<cc:if cond="&para.properties.design.paragraph.hr"><div class="line"></div></cc:if>

config.ccml
<cc:property id="design.paragraph.hr" caption="Linie oberhalb des Absatzes" folder="Design" targettype="paragraph" type="boolean" default="0">

Was Fehlt da noch??
__________________
Grüße aus Bayern
voodoo36 ist offline   Mit Zitat antworten
Antwort

Lesezeichen

Themen-Optionen Thema durchsuchen
Thema durchsuchen:

Erweiterte Suche
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


LinkBacks (?)
LinkBack to this Thread: http://www.webtodateforum.de/forum/web-to-date-7-0/3239-tutorial-lightbox-fuer-absatzbild.html
Erstellt von For Type Datum Hits
Jquery Lightbox Zoom | jQuery Lightbox This thread Refback 22.07.2012 14:44 1
Prettyphoto Typo3 | jQuery Gallery This thread Refback 13.05.2012 13:57 1
Jquery Tutorial Deutsch Pdf | jQuery Menu This thread Refback 11.05.2012 10:31 4
Lightbox Für Alben Visual LightBox This thread Refback 17.01.2012 16:26 1
Zoom Gallery Lightbox Größe Ändern Visual LightBox This thread Refback 17.01.2012 16:26 1
Lightbox Ladet Nicht Visual LightBox This thread Refback 17.01.2012 16:25 1
Jquery Gallery Date | jQuery Gallery This thread Refback 13.09.2011 19:42 1
Jquery Gallery Zoom | jQuery Gallery This thread Refback 25.04.2011 00:32 1
Web to Date Forum This thread Refback 12.02.2011 14:31 2
Web to Date Forum This thread Refback 10.02.2011 15:05 1
Web to Date Forum - Tipps und Tricks This thread Refback 10.02.2011 11:05 1
Web to Date Forum This thread Refback 10.02.2011 10:24 1
Web to Date Forum This thread Refback 09.02.2011 15:08 1
Web to Date Forum This thread Refback 04.02.2011 21:13 1
Web to Date Forum This thread Refback 04.02.2011 18:18 1
Web to Date Forum This thread Refback 29.01.2011 21:01 1
Web to Date Forum This thread Refback 29.01.2011 11:42 1

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Absatzbild vergrößern.... schließt nicht axelw Web to Date 7.0 11 23.11.2010 16:02
Position Absatzbild Mendax Web to Date 6.0 1 30.07.2010 16:27
Absatzbild wahlweise links oder rechts Goran Web to Date 6.0 5 17.07.2010 14:49
Absatzbild anpassen masterseye Web to Date 6.0 0 24.06.2010 14:46
Leuchttisch-Funktion in Absatzbild möglich? Rocky6052 Web to Date 6.0 3 07.06.2009 20:07


design kontextspalte pythagoras sidebar

Alle Zeitangaben in WEZ +2. Es ist jetzt 13:52 Uhr.
Powered by vBulletin® Version 3.8.2 (Deutsch) - Copyright ©2000 - 2016, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.3.0 PL2
Seite generiert in 0,21826 Sekunden mit 19 Datenbankabfragen

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16