Reply To: Controlling the order of gallery in-line content

Your Account / Forums / Easy FancyBox Pro / Controlling the order of gallery in-line content / Reply To: Controlling the order of gallery in-line content

January 28, 2016 at 11:08 pm #6045

Hi Robert, I see the issue and it can be explained like this:

FancyBox will base its gallery order on the order in which the links appear in the source, not on how they appear to the end user. If you look at the page source by opening the page in your browser and hitting Ctrl+U (in most cases) and you search with Ctrl+F for “resource-” you’ll find the blocks of html that are responsible for both the links and the popup content (hidden divs). You’ll notice the first one you find is number “ten”, then comes “six” then”two” then “nine” then “five” and so on…

Notice how this corresponds with the FancyBox order on one hand while on the other hand with the visual order top to bottom (first COL1 then COL2 etc.)

There are two problems with this:
1. There is no way to tell the plugin that you want a different order.
2. Screen readers (for the visually impaired) and search engines will also only see the html source order, not the visually rendered order.

So the best way to fix this is to change the source order to the actual post order and to change the method of rendering these items on the screen.

Are you able to change the loop that actually creates these html blocks? If so, you might want to make it use “orderby=date” (or id) and “order=desc”.

Next step will be to make the browser render the items (1) in the correct order and (2) in a nice way, like they are now. The first is easy: just get rid of the table and row/column tags. But the second is more difficult…

You might try a CSS only approach with the CSS3 rule flexbox, or you might want to use masonry.js like the Illustratr theme does for example.

Let me know if you need help with that 🙂