[solved] Default jquery Lightbox ersetzen

[santscho]

Die phpwcms core lightbox (jquery) fuer Bilder ist leider nicht responsive. Das heisst, auf Devices mit kleinem Viewport werden die Bilder zu gross ausgegeben. Wie kann man diese jquery lightbox durch eine responsive jquery lightbox ersetzen?

Zum Beispiel diese:
http://fancyapps.com/fancybox/
http://webdesignandsuch.com/posts/fancy ... fancyBox2/

[santscho]

Niemand?

[Uwe367]

Ich hatte zu diesem Thema selbst vor einiger Zeit mal nachgefragt. Vielleicht kannst du hiermit etwas anfangen:
http://forum.phpwcms.org/viewtopic.php? ... ox#p129094

Ich habs leider noch nicht ausprobiert, wwerd mich aber selbst mal daran setzen.

[santscho]

Aber wo das zu generierende html definieren?Das Auswechseln der Library reicht ja noch nicht.

Code standard Lightbox:

Code: Select all

<a href="content/images/5e19954bc466ef1d60554391c471bd43.jpg" rel="lightbox" target="_blank"><img src="content/images/49979d48ac352b757fa538056f1bed6b.jpg" width="120" height="120" border="0" class="image_img" alt="beefalo.jpg" /></a>

Code Fancybox:

Code: Select all

<a class="fancybox" rel="group632" href="content/images/f85cb65d0e9294d8430976b4be12ff97.jpg" title="Peasant with rice by C. K. Wilde, 2009"><img class="flexible" src="content/images/861ee687024b52141e54ca395d45ee65.jpg" alt="" /></a>

[juergen]

Du kannst den kompletten <a> Tag austauschen, wenn du im frontend_init nach dem

Code: Select all

 rel="lightbox"

suchst.

Die Angaben die benötigt werden sind alle da, die Server heutzutage so schnell dass sie darüber nur schmunzeln werden. Sobald der Tag es hergibt teste ich mal so einen 3 Zeiler.

Resultat wäre ein updatebares System und man kann das script dann löschen wenn eine Lösumg im CORE kommt.

[update]

Die Spannung steigt... Trommelwirbel.....

[juergen]

He ! Wir haben Feiertag ...da geht nur heimlich was

[juergen]

Das Umschreiben der Links funktioniert. Hat jemand mal eine Testumgebung ?

[pepe]

Das mit der Testumgebung war jetzt ein Scherz, oder
Wer von uns wenigen verbliebenen phpwcms-Aktivisten hätte die wohl nicht?

[juergen]

Ma langsam !

In eine laufende Seite wollt ichs jetzt nicht reinnageln, weil dann im prototyp wirklich JEDE Lightbox umgeswitcht wird. Seitdem es andauernd diese netten Neuerungen gibt leg ich mir nichts mehr "auf Lager"

Fertige Lösungen sind eh besser

[santscho]

Du kannst den kompletten <a> Tag austauschen, wenn du im frontend_init nach dem

Code: Select all

 rel="lightbox"

suchst.

Die Angaben die benötigt werden sind alle da, die Server heutzutage so schnell dass sie darüber nur schmunzeln werden. Sobald der Tag es hergibt teste ich mal so einen 3 Zeiler.

Resultat wäre ein updatebares System und man kann das script dann löschen wenn eine Lösumg im CORE kommt.

Meinst Du in der "img.func.inc.php"?

[santscho]

An dem Punkt angekommen, an dem ich am liebsten auf das ganze "responsive" verzichten wuerde.

[santscho]

Voraussetzung Version "Photoswipe" (http://www.photoswipe.com)


Header Scripts/CSS (gemeinsam fuer alle CP's in der geladenen Seite)

Code: Select all

<link rel="stylesheet" type="text/css" href="template/lib/photoswipe/photoswipe.css" />
<script type="text/javascript" src="template/lib/photoswipe/lib/klass.min.js"></script>
<script type="text/javascript" src="template/lib/photoswipe/code.photoswipe-3.0.5.min.js"></script>

Header Script mit unique identifier (#photoswipe{ID}).

Code: Select all

<script type="text/javascript">

	(function(window, PhotoSwipe){
		
			document.addEventListener('DOMContentLoaded', function(){
			
				var
					options = {},
					instance = PhotoSwipe.attach( window.document.querySelectorAll('#photoswipe{ID} a'), options );
			
			}, false);
			
			
		}(window, window.Code.PhotoSwipe));

  </script>

Contentpart mit unique identifier

Code: Select all

<div/ul.... id="photoswipe{ID}">
(<li>....)<a href="content/images/caf7b870ff720c7b3dda91dc5218a99e.jpg"><img src="content/images/6c2c16da3974f154eafcad4ea52f7d96.jpg" alt="" /></a>(</li>....)
</div/ul....>

[santscho]

Voraussetzung Version Fancybox

Header Script/CSS (gemeinsam fuer alle CP's in der geladenen Seite)

Code: Select all

<link rel="stylesheet" type="text/css" href="template/inc_css/specific/fancybox/jquery.fancybox.css" />
<script type="text/javascript" src="template/lib/jquery/plugin/jquery.fancybox.pack.js"></script>

Contentpart mit unique identifier (rel="group{ID}")

Code: Select all

<a class="fancybox" rel="group{ID}" href="content/images/eab7dc96e84f0f61b62374bd81643aff.jpg" title="Caption"><img class="flexible" src="content/images/968c7ffdf58f7be1e7cbd75a7d7080b3.jpg" alt="" /></a>

[juergen]

Hallo responsive Man

Das lässt sich doch sicher in ein Template packen, meine Bilder und deine tempfiles passen nicht