LightBox Prev/Next verbinden bzw. erweiterte Version

[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

[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

[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

[flax]

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

[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

[juergen]

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.

[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.

[flip-flop]

Geändert

Danke

Knut

[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

[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.

[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

[update]

Aha! Und für Doofe?

[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!

[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 : "");
        }
     });
});
-->

[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