Topic: Retina display support

I'm trying to get my website updated for retina displays, and Juicebox is the only part that is not.  Is there a way to support retina displays with Juicebox or will there be a future update.  If it could pull the full size image from Flickr for retina that would work.

Re: Retina display support

If you have a Flickr Pro account, you could set flickrImageSize="ORIGINAL" to pull your original images from Flickr into your Juicebox-Pro gallery.
Please see the description of the flickrImageSize configuration option in the Flickr Pro Options section of the Config Options page for more information.

Re: Retina display support

But I'd really like to serve just larger size images to retina displays but not all the time.  Is there any way to check for a high dpi display and serve a Large 2048 sizes for retina instead of the full size?

Re: Retina display support

I don't know exactly how Juicebox is pulling the images from Flickr. I tried looking at the Flickr API to see if there was a way to use the Large 2048 version of the image instead of just Large but couldn't figure it out.  Also, I believe even if you had juicebox use the original size image, which is very slow, Juicebox would need to use scale_down or the image wouldn't fit the gallery and I don't think that after Juicebox scaling it would show more resolution on the Retina display.  I know if you scale an image to 50% using css that it will show full resolution on retina displays.  Let me know if that is incorrect.  So I think if there was a way to pull in the Large 2048 version of the images from Flickr, then scale them using css to fit the gallery that might work on high dpi displays.  But I don't know how to do this.  Thanks.

Re: Retina display support

Is there any way to check for a high dpi display and serve a Large 2048 sizes for retina instead of the full size?

Juicebox-Pro supports only a single folder of main images. You could perhaps create two different Juicebox galleries (with different main images), perform a check (using JavaScript) to determine what device the gallery is being displayed on and then display the appropriate Juicebox gallery depending on the result.

I tried looking at the Flickr API to see if there was a way to use the Large 2048 version of the image instead of just Large but couldn't figure it out.

The Juicebox-Pro flickrImageSize configuration option does not support a value to select Flickr's 'Large 2048' image size and, from the look of this web page, Flickr has not yet added the 'Large 2048' image size to their API.

Also, I believe even if you had juicebox use the original size image, which is very slow, Juicebox would need to use scale_down or the image wouldn't fit the gallery

That is correct. No matter what the pixel density of the user's display is, Juicebox will look at the resolution of the image (e.g. 1024 x 768) and scale it appropriately depending on the imageScaleMode used. For example, if using the default imageScaleMode of 'SCALE_DOWN', a larger image (e.g. 2048 x 1536) will be scaled down and will be displayed in its entirety (just like a smaller 1024 x 768 image) within the image area.
If using imageScaleMode="NONE", you would see more of the 1024 x 768 image than the 2048 x 1536 image within a small image area but, depending on the size of the user's browser window, there is no guarantee that even the 1024 x 768 image would be displayed in its entirety using this imageScaleMode.

Re: Retina display support

It sounds like there is really no easy way to do this. Maybe it can be in the next version, because I would think this would be a very important feature now that so many displays are going highdpi.  Especially ones photographers would be using.

Re: Retina display support

I second this request. For now I will make do with 2 separate gallery folders (1 for 72dpi,  the other for 140dpi images, both sets with images of 1024p wide x 768p high).

Since bandwidth is increasing in leaps and bounds, and mobile usage set to eclipse desktop usage by 2016, I'm hoping this is a temporary headache, and that the day will come when I can just use one hi-res gallery for all devices, and ye olde lo-res phones, etc will load these in a blink versus the current choke-and-hang experience. This doesn't negate the need for a more elegant solution than the duplicate galleries+js workaround suggested above.

Re: Retina display support

I think your confused if you think changing the dpi will do anything.   It's all about resolution, dpi is for printing.  A 1024x768 is always that, you would have to use a double resolution image if you want to support retina.

9 (edited by dlydiard 2013-05-13 00:00:16)

Re: Retina display support

you can use https://github.com/ten1seven/jRespond and create different galleries, that's how i plan to do this unless Juicebox beats me to it...

the hardest part to deal with would be device rotation or screen resizing and reloading the same page the user was on before the resize event.