LightBox Prev/Next verbinden bzw. erweiterte Version

If you've problems with unsupported - non official ;-) - functionalities use this forum please.
flax
Posts: 57
Joined: Fri 20. Jan 2006, 10:06

LightBox Prev/Next verbinden bzw. erweiterte Version

Post by flax » Thu 4. Aug 2011, 20:21

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
Posts: 847
Joined: Sun 27. Apr 2008, 23:22

Re: LightBox Prev/Next verbinden bzw. erweiterte Version

Post by nameless1 » Thu 4. Aug 2011, 22:47

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
Last edited by nameless1 on Fri 5. Aug 2011, 09:47, edited 1 time in total.

User avatar
juergen
Moderator
Posts: 4550
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

Re: LightBox Prev/Next verbinden bzw. erweiterte Version

Post by juergen » Fri 5. Aug 2011, 06:19

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
Posts: 57
Joined: Fri 20. Jan 2006, 10:06

Re: LightBox Prev/Next verbinden bzw. erweiterte Version

Post by flax » Fri 5. Aug 2011, 10:00

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

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: LightBox Prev/Next verbinden bzw. erweiterte Version

Post by flip-flop » Fri 5. Aug 2011, 10:29

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
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

User avatar
juergen
Moderator
Posts: 4550
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

Re: LightBox Prev/Next verbinden bzw. erweiterte Version

Post by juergen » Fri 5. Aug 2011, 10:57

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.

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: LightBox Prev/Next verbinden bzw. erweiterte Version

Post by pepe » Fri 5. Aug 2011, 18:50

Prima Knut, nun klappts :D

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.

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: LightBox Prev/Next verbinden bzw. erweiterte Version

Post by flip-flop » Sun 7. Aug 2011, 09:48

Geändert :idea:

Danke

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

User avatar
purg
Posts: 54
Joined: Wed 13. Sep 2006, 21:16

Re: LightBox Prev/Next verbinden bzw. erweiterte Version

Post by purg » Fri 21. Sep 2012, 13:50

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

User avatar
Oliver Georgi
Site Admin
Posts: 9475
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: LightBox Prev/Next verbinden bzw. erweiterte Version

Post by Oliver Georgi » Wed 3. Oct 2012, 11:39

dafür eigent sich z.B. die Fancybox oder jQuery Cycle. Dann müssen nur alle Contentparts, die zusammengefasst werden sollen, entsprechende Templates erhalten.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Kleintierpraxis am Georgengarten

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: LightBox Prev/Next verbinden bzw. erweiterte Version

Post by pepe » Wed 3. Oct 2012, 14:35

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 :D

User avatar
update
Moderator
Posts: 6380
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: LightBox Prev/Next verbinden bzw. erweiterte Version

Post by update » Wed 3. Oct 2012, 15:19

Aha! Und für Doofe? ;)
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: LightBox Prev/Next verbinden bzw. erweiterte Version

Post by pepe » Wed 3. Oct 2012, 15:38

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!

User avatar
Oliver Georgi
Site Admin
Posts: 9475
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: LightBox Prev/Next verbinden bzw. erweiterte Version

Post by Oliver Georgi » Wed 3. Oct 2012, 15:47

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 : "");
        }
     });
});
-->
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Kleintierpraxis am Georgengarten

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: LightBox Prev/Next verbinden bzw. erweiterte Version

Post by pepe » Wed 3. Oct 2012, 15:51

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

Post Reply