Mit 2 Bildern verschiedener Größen je nach Bildschirmgröße mit fancybox

Question

Ich versuche fancybox als Leuchtkasten zu verwenden, um Bilder auf einer Website anzuzeigen.

Ich entwerfe die Website als 960px Site mit fester Breite. Ich möchte den Leuten Bilder zeigen, aber auch größere Bilder, wenn der Bildschirm sie zeigen kann.

ein bisschen wie Facebook liefern verschiedene Größen Bilder an den Benutzer.

Fancybox wird die Bilder verkleinern, wenn das Fenster zu klein ist, um sie in voller Größe anzuzeigen, also habe ich überlegt, wie ich fancybox mit 2 Bildern verwenden kann.

ein Bild wäre 960px breit und für die Nutzer, die einen Bildschirm 960px und kleinere (verkleinerte von fancybox) haben

und ich würde ein anderes Bild, das ist haben 1200+ breit für Bildschirme über 960px

Wenn Ihr Bildschirm 1100 Pixel anzeigen kann, wird das größere Bild verkleinert.

Der Grund dafür ist, dass kleinere Bildschirmbenutzer das große Bild nicht herunterladen müssen. mit diesem Bar-Set, ich Bilder setzen konnte, die 1500 breit usw.

sind

auch http://floatboxjs.com/demo bei floatbox sieht ich hatte entschieden, aber dass einige der Features von fancybox sind besser abgesehen von einer Sache, hat floatbox ein Feature um ein Bild zu vergrößern, wenn es nicht in voller Größe angezeigt wird. Sehen Sie sich die Erdbilddemo an oder öffnen Sie eines der anderen Bilder in einem kleinen Fenster. Kann fancybox das tun? Ich weiß, dass Sie das mit einem Knopf tun können, aber ich fragte mich, wie es funktioniert, wie es bei Floatbox der Fall ist. während der Benutzer das Bild speichern kann.

Ich habe andere Wege gesucht, dies mit CSS zu tun, Bilder austauschen usw. aber die Art, wie ich den Inhalt auf eine Seite bekommen, wird dies nicht funktionieren. Auch wenn Sie das Bild speichern möchten, speichert es das kleinere aus irgendeinem Grund. - http://csswizardry.com/2011/07/responsive-images-right-now/

Dank

Answer 1

Wenn Sie fancybox v2.x verwenden, dann können Sie das gleiche große Bild haben „skaliert“ passen in das Ansichtsfenster für was auch immer Auflösung, die Sie haben und verwenden Sie dann den buttons Helfer um das Bild zu erweitern seine ursprüngliche (große) Größe.

überprüfen Sie die Demo auf http://fancyapps.com/fancybox/#docs erweiterte Funktionalität ==> Button Helfer (vergessen Sie nicht das JavaScript-Register zu überprüfen)