Linking to Dropbox images from FancyBox

Question

I have a Fancybox slideshow set up which is working perfectly for local images. Eventually when the site goes live, I want the client I am working for to be able to upload images to their Dropbox which will then be shown in the gallery.

I made stipulations that they must adhere to: the images to be contained in the first gallery must be named A1.jpg, A2.jpg, A3.jpg, etc... so my code can stay the same. All they have to do to update an image is replace A1.jpg with the a different image with the same name.

However this is not working. I have copied the link to the image for example:

https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg

Ive then read that the www needs to be replaced by dl to create a direct link to the image. This works fine when put into the Fancybox code:

  <a class="fancybox-thumb" rel="fancybox-thumb" 
href="https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg" title="image">
  <img src="https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg" alt="" />

All works well up to this point, but if I copy and paste this code and replace 'a1.jpg' with 'a2.jpg' it wont link to the image. Duplicating the method above to get the direct link to the a2 image gives the following:

  <a class="fancybox-thumb" rel="fancybox-thumb" 
href="https://www.dropbox.com/sh/blahblah/uDPPXt8Uyl/a2.jpg" title="image">
  <img src="https://www.dropbox.com/sh/blahblah/uDPPXt8Uyl/a2.jpg" alt="" />

If you notice the file name changes in the last directory before the image name (even though the two images are next to each other in the same folder in Dropbox). Im presuming this is a safety feature in dropbox to prevent unscrupulous types just changing the filename and being able to access all the images in the directory, but its proving to be a pain in the butt for me! Any ideas how I can rectify this?

Answer 1

Well no sooner had I posted this question, the answer came up!

On the Dropbox help page, it says the public folder was no longer created automatically on new accounts - instead theyve made it so you can share the link to any single file if you want to. This doesnt help as Dropbox also add some encryption to the link so that the problem I described in the original post occurs.

It turns out all you have to do is enable a public folder in the account (Dropbox still make this easy to do) and then the URL to the images are in a much more orderly fashion, such as:

https://dl.dropboxusercontent.com/u/264305025/a1.jpg
https://dl.dropboxusercontent.com/u/264305025/a2.jpg
https://dl.dropboxusercontent.com/u/264305025/a3.jpg

Changing any of these with an image of the same name updates the image linked to by fancy box. Simple!