Page 1 of 3
LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Thu 4. Aug 2011, 20:21
by flax
Hallo!
Ich möchte eine Seite mit verschiedenen Content-Parts mit Bildern machen, die per Lightbox vergrößerbar sein sollen und die alle miteinander über die prev/next-Buttons sozusagen in einer Lightbox anschaubar sein sollen.
Bsp.
1. CP: Bilder <div> als Bild mit umlaufendem Text
2. CP: Bilder <div> als Bildleiste mit mehreren Bildern (mehrspaltig und evtl. auch mehrzeilig angeordnet.
Wenn ich das How-To-Wiki richtig interpretiere sollte
http://www.phpwcms-howto.de/wiki/doku.p ... -verbinden eigentlich genau das leisten.
Ich habe das Script rt_lighbox_prev_next_all01.php nach template/inc_script/frontend_render/ kopiert, in der config.inc.php $phpwcms['allow_ext_render'] = 1; eingeschaltet, inder Vorlage <!-- content-begin //-->{CONTENT}<!-- content-end //--> gekennzeichnet und natürlich die Bilder zum Vergrößern und für die Lightbox markiert. Die phpwcms Version ist 1.4.1
In jedem Contentpart einzeln für sich funktioniert die Lightbox, aber die Verknüpfung geht nicht.
Hat jemand eine Idee, was noch fehlt?
Viele Grüße
Britta
Re: LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Thu 4. Aug 2011, 22:47
by nameless1
hallo britta,
sollte es partou nicht mit der von knut aufgezeigten variante realisierbar sein wäre es am einfachsten -und deinem kenntnissstand wahrscheinlich am entsprechensten- die verlinkungstags (<a>) selbst aufzubauen statt dynamisch generieren zu lassen und damit für ein einheitlichen rel-tag zu sorgen.
im groben und aus dem kopf würdest du dann halt
<a href="{replacmenttag_zum_bild}" ref="lightbox[allesgleich]"><img src="{replacementtag_zur_preview}" /></a>
in die entsprechenden templates der contentparts schreiben. wobei das augenmerk auf dem identischen rel-tag liegt!
gruß
nml
Re: LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Fri 5. Aug 2011, 06:19
by juergen
Wie Knut schon schreibt:
Im Bereich === CUSTOM INPUT === des RTs kann angegeben werden, für welche Kategorien und ob Artikelköpfte und/oder CPs und/oder Gallery-Script und/oder Custom-Scripte dieses Verhalten gewünscht ist.
Wenns nicht funktioniert verbleiben 2 Restrisiken:
1.) Version zu alt, vermag ich nicht zu beurteilen
2.) User uneinsichtig.
Irgendwoher muss das System schon wissen WAS es zusammenbringen soll
Re: LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Fri 5. Aug 2011, 10:00
by flax
DF6IH wrote:Wie Knut schon schreibt:
Im Bereich === CUSTOM INPUT === des RTs kann angegeben werden, für welche Kategorien und ob Artikelköpfte und/oder CPs und/oder Gallery-Script und/oder Custom-Scripte dieses Verhalten gewünscht ist.
Wenns nicht funktioniert verbleiben 2 Restrisiken:
1.) Version zu alt, vermag ich nicht zu beurteilen
2.) User uneinsichtig.
Irgendwoher muss das System schon wissen WAS es zusammenbringen soll
zu 1.)
Genau das hätte mich aber interessiert. Ist nämlich ne Kundenwebseite, so dass ich das Update - mit allen Unwägbarkeiten was so schiefgehen kann - nicht einfach just for fun machen möchte....
zu 2.)
im How-to steht aber:
"Ist das Array leer $_categories = array( );, wird jede Kategorie auf die Verwendung der LightBox überprüft, unabhängig von der Einstellung die in $inc_categories getroffen wurde. "
Also bin ich davon ausgegangen, dass man es leer lassen kann.
ABER:
Ich habe jetzt gerade spaßeshalber doch die Cat ID eingetragen und siehe da jetzt geht's (vielleich sollte man das im How-To vermerken?)
Trotzdem Danke für die Hilfe.
Tschüss
Britta
Re: LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Fri 5. Aug 2011, 10:29
by flip-flop
Hi,
ersetze im Script:
Code: Select all
$cat_id = $content['cat_id']; // current category ID
durch
Code: Select all
$cat_id = $content['cat_id']; // current category ID
if (count($_categories) == 0 ) $_categories[0] = $cat_id; // Update 05.08.2011 KH: If no category is specified in the array
Dieser Teile fehlte ... ""Ist das Array leer ......
Oder lade das Script noch einmal herunter.
Knut
Re: LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Fri 5. Aug 2011, 10:57
by juergen
flax wrote:
zu 1.)
Genau das hätte mich aber interessiert. Ist nämlich ne Kundenwebseite, so dass ich das Update - mit allen Unwägbarkeiten was so schiefgehen kann - nicht einfach just for fun machen möchte....
der Kunde sollte wissen, dass nur aktuelle Versionen das Rüstzeug für aktuelle Probleme an Bord haben.
Re: LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Fri 5. Aug 2011, 18:50
by pepe
Prima Knut, nun klappts
Vielleicht sollte man noch dazu sagen, dass auch
mehrere Ausgabebereiche und/oder CustonBlocks mit dem Befehl "eingefasst" werden können und nicht nur der CONTENT-Bereich alleine, wie das Beispiel so manchen glauben machen könnte.
Re: LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Sun 7. Aug 2011, 09:48
by flip-flop
Geändert
Danke
Knut
Re: LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Fri 21. Sep 2012, 13:50
by purg
Hallo!
auch ich möchte eine Seite mit verschiedenen Content-Parts mit Bildern machen, die per Lightbox vergrößerbar sein sollen und die alle miteinander über die prev/next-Buttons in der Lightbox anschaubar sein sollen und habe es, wie hier beschrieben ausgeführt.
In jedem Contentpart einzeln für sich funktioniert die Lightbox, aber die Verknüpfung geht nicht.
Liegt es womöglich an der Version - ich benutze phpwcms 1.5.4.1
Dank für jeden Tipp, Purg
Re: LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Wed 3. Oct 2012, 11:39
by Oliver Georgi
dafür eigent sich z.B. die Fancybox oder jQuery Cycle. Dann müssen nur alle Contentparts, die zusammengefasst werden sollen, entsprechende Templates erhalten.
Re: LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Wed 3. Oct 2012, 14:35
by pepe
Habe gerade mal mit der FancyBox2 getestet... geht ohne Probleme, wenn man für die diversen Temples als
zusammenfassende Gruppe einfach die selbe a-tag Klasse verwendet, etwa nach diesem Schnittmuster:
Code: Select all
data-fancybox-group="fancyBoxGroup-artikelweit"
Klick auf ein Bild öffnet nun die
fancyBox2 mit dem "richtigen", aktuellen Bild und die Zählernummer entspricht exakt der, innerhalb des kompletten Artikelverlaufs...
das war aber jetzt leicht
Re: LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Wed 3. Oct 2012, 15:19
by update
Aha! Und für Doofe?
Re: LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Wed 3. Oct 2012, 15:38
by pepe
OK, mein Freund, wenn du mich so quälst:
Ich habe das Template abgelegt in .../template/inc_cntpart/images/pepes-fancyBox2-Diapult-artikelweit_alt.tmpl:
Code: Select all
<!--IMAGE_SETTINGS_START//-->
; EINSTELLUNGEN funktioniert leider erst AB Version r402???
;
; this is formatted like WIN.INI
; do not use comments for value lines
; settings will overwrite CP settings
width = 232
;height = 100
;crop = 0
; fuer die Anzeige nur eines Vorschaubildes : col = 0
; fuer die Anzeige aller Vorschaubilder : col = 999
col = 0
; Spacer = Abstand rundum in px
space = 2
zoom = 1
lightbox = 0
;nocaption = 0
; 0 = no center, 1 = horizontal/vertical, 2 = horizontal, 3 = vertical
center_image = 1
<!--IMAGE_SETTINGS_END//-->
<!--IMAGES_HEADER_START//-->
[TITLE]
<h3>{TITLE}</h3>[/TITLE][SUBTITLE]
<h4>{SUBTITLE}</h4>[/SUBTITLE]
<div class="fancyBox2-Diapult">
<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//-->
<div class="imageEntry-Diapult">
<a class="fancybox-buttons" data-fancybox-group="fancyBoxGroup-artikelweit" href="{IMAGE_REL}" title="{CAPTION}[COPYRIGHT] - (c) {COPYRIGHT}[/COPYRIGHT]"><img src="{THUMB_REL}" alt="{CAPTION}" /></a>
</div>
<!--IMAGES_ENTRY_END//-->
<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->
<!--IMAGES_FOOTER_START//-->
<div style="clear:both;"></div>
</div>
[TEXT]
<div class="text-Diapult">{TEXT}</div>[/TEXT]
[PHP]
$GLOBALS['block']['custom_htmlhead']['fancyBox-JS'] = '
<script type="text/javascript" src="template/lib/fancybox/lib/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="template/lib/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="template/lib/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="template/lib/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="template/lib/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>';
$GLOBALS['block']['custom_htmlhead']['fancyBox-Einstellungen-Buttons'] = ' <script type="text/javascript">
$(document).ready(function() {
$("a.fancybox-buttons").fancybox({
openEffect : "none",
closeEffect : "none",
prevEffect : "none",
nextEffect : "none",
closeBtn : false,
helpers : {
title : {
type : "inside"
},
buttons : {}
},
afterLoad : function() {
this.title = "Bild " + (this.index + 1) + " von " + this.group.length + (this.title ? " : " + this.title : "");
}
});
});
</script>';
$GLOBALS['block']['custom_htmlhead']['fancyBox-CSS'] = '
<link rel="stylesheet" type="text/css" href="template/lib/fancybox/source/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="template/lib/fancybox/source/helpers/jquery.fancybox-buttons.css" />
<link rel="stylesheet" type="text/css" href="template/lib/fancybox/source/helpers/jquery.fancybox-thumbs.css" />
<link rel="stylesheet" type="text/css" href="template/lib/fancybox/source/jquery.fancybox.css" />';
$GLOBALS['block']['custom_htmlhead']['fancyBox-CSS-Korrektur_Diapult'] = '
<style type="text/css">
<!--
.imageEntry-Diapult { float:left; /*background: #eee; margin:{SPACE}px; padding:4px; border:1px solid #ccc; */ }
.imageEntry-Diapult img { float:left; background:#eee; margin:{SPACE}px; padding:4px; border:1px solid #ccc; }
.text-Diapult { margin-top:{SPACE}px; padding-top:5px; border-top:3px double #999; }
-->
</style>';
[/PHP]
<!--IMAGES_FOOTER_END//-->
Ist meine
Arbeitskopie (die aber reibungslos funktioniert) ...
also mach was draus!
Was und wo alles hin kopiert werden muss, siehst du ja aus den Dateipfaden...
Alle Bildgruppen eines Artikels, die nun mit diesem Template verknüpft werden, werden zusammengefasst in einer fancyBox2 wiedergegeben!
Re: LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Wed 3. Oct 2012, 15:47
by Oliver Georgi
was soll das PHP Pepe? Das ist schlicht unnütz:
Code: Select all
<!-- CSS: template/lib/fancybox/source/jquery.fancybox.css -->
<!-- CSS: template/lib/fancybox/source/helpers/jquery.fancybox-buttons.css -->
<!-- CSS: template/lib/fancybox/source/helpers/jquery.fancybox-thumbs.css -->
<!-- CSS:
.imageEntry-Diapult { float:left; /*background: #eee; margin:{SPACE}px; padding:4px; border:1px solid #ccc; */ }
.imageEntry-Diapult img { float:left; background:#eee; margin:{SPACE}px; padding:4px; border:1px solid #ccc; }
.text-Diapult { margin-top:{SPACE}px; padding-top:5px; border-top:3px double #999; }
-->
<!-- JS: initJSLib -->
<!-- JS: mousewheel.min -->
<!-- JS: template/lib/fancybox/source/jquery.fancybox.pack.js -->
<!-- JS: template/lib/fancybox/source/helpers/jquery.fancybox-buttons.js -->
<!-- JS: template/lib/fancybox/source/helpers/jquery.fancybox-thumbs.js -->
<!-- JS:
$(function() {
$("a.fancybox-buttons").fancybox({
openEffect : "none",
closeEffect : "none",
prevEffect : "none",
nextEffect : "none",
closeBtn : false,
helpers : {
title : {
type : "inside"
},
buttons : {}
},
afterLoad : function() {
this.title = "Bild " + (this.index + 1) + " von " + this.group.length + (this.title ? " : " + this.title : "");
}
});
});
-->
Re: LightBox Prev/Next verbinden bzw. erweiterte Version
Posted: Wed 3. Oct 2012, 15:51
by pepe
Ich wusste ja, das du meckern würdest... Aber,
wie verhinderst du denn,
1. dass bei Mehrfacheinsatz des selben Temples in einem Artikel, die JS- und CSS-Dateien mehrfach im HTML-Code erscheinen??? Ich habe keinen Schimmer, wie?
2. was machst du bei älteren Installationen???
und:
Ist meine Arbeitskopie (die aber reibungslos funktioniert) ... also mach was draus!
und:
pepes-fancyBox2-Diapult-artikelweit_alt.tmpl