[solved] Default jquery Lightbox ersetzen

[santscho]

Für CP Bilder zum Beispiel gibt es kein Template. Für CP Bilder(Spezial) habe ich ja meine eigene Lightbox. die eigene Lightbox soll aber cms global über den Schalter "Lightbox" aktiviert werden können. Somit auch für Bilder im Artikel-Kopf zur Verfügung stehen.

[juergen]

Also brauchen wir einen "Wechselschalter"

[santscho]

...oder ein cleveres PHP-Koepfchen.

[Oliver Georgi]

Ist doch gar nicht nicht so schwer:
phpwcms-fancyBox.zip

Voraussetzung jQuery 1.6+
Swipe-Support, auch deaktivierbar im Frontend Render Script

[santscho]

Das ist so cool! Danke, danke Oliver! Das fegt richtig!

[Oliver Georgi]

Und wir beginnen mal mit GitHub für phpwcms, werde schrittweise dorthin umziehen…
https://github.com/slackero

Du kannst also forken, ergänzen…

[santscho]

die responsive lightbox mit swipe-effekt geht wunderbar. jetzt muss ich nur noch rausfinden, wie man die navi- und schliess-buttons trotz swipe-effekt einblenden kann. (fuer desktop computer).

[Oliver Georgi]

das ist ganz simpel:

Code: Select all

var hasTouch = 'ontouchstart' in window;

Also genügt:

Code: Select all

/**
 * fancyBox with Swipe support for phpwcms
 * November 11, 2012, <oliver@phpwcms.de>
 **/

// initialize fancyBox with Swipe enabled
$(function() {
	
	// select all items based on lightbox selector
	var fancyBoxImages		= $("a[rel^='lightbox']");
	var fancyBoxImagesCount	= fancyBoxImages.length;
	
	if(fancyBoxImagesCount) {
		
		// for all options visit http://fancyapps.com/fancybox/#docs
		var hasTouch = 'ontouchstart' in window;
		
		// more than 1 fancyBox Item means we enable Swipe support
		if(hasTouch && fancyBoxImagesCount > 1) {
			
			var fancyBoxOptions = {
				// openEffect	: 'none',
				// closeEffect	: 'none',
				closeBtn: false,
				arrows: false,
				afterShow: function() {
					$('.fancybox-wrap').swipe({
						swipe: function(event, direction) {
							if (direction === 'left' || direction === 'up') {
								$.fancybox.prev( direction );
							} else {
								$.fancybox.next( direction );
							}
						}
					});
				}
			};
		
		// only 1 fancyBox Item means Swipe support not needed
		} else {
			
			var fancyBoxOptions = {
				// openEffect	: 'none',
				// closeEffect	: 'none'
			};
		
		}
		
		fancyBoxImages.fancybox(fancyBoxOptions);
	}

});

Oliver

[santscho]

Ja, jetzt ist es perfekt! in dektop browser mit navi und auf mobile device ohne (+ touch swipe).

Fuer Interessierte:
Den obigen code mit dem Code in "jquery.fancybox.initSwipeOn.js" austauschen.

[macangelo]

Ihr seid die Coolsten!

Ich habe noch das kleine Problem, dass es nicht swiped. Im Quelltext sehe ich, dass ich vermutlich irgendeinen jquery overload fabriziert habe: ich lade von Hand über das Template die fancybox.pack.js und die jquery-1.8.min.js danach wird dann ajax/libs/jquery/1.6/jquery.min.js und die slimbox geladen ...

Was könnte ich falsch machen?

Besten Dank

[juergen]

Die Reihenfolge, so sie denn so ist wie im Text könnte zu Problemen führen. Die Bibliothek sollte mal als erstes da sein.

[Oliver Georgi]

Nichts manuell laden. Das Frontend Render Script bringt alles mit, was benötigt wird.

[macangelo]

Super, hat funktioniert!

… nächste Frage: kann man den Rand des gezoomten Bildes in der Lightbox (über css?) beeinflussen?

Besten Dank
macangelo

[Oliver Georgi]

Lies dir die Dokumentation durch. Dort wird das Padding behandelt.

[juergen]

News - Inhalte fallen aus der Änderung raus. Greift da das frontend_render nicht `?