SPA image modal gallery
This example builds on the previous Simple image modal example.
It is possible to turn that example into a popup gallery, with navigation buttons inside the modal to cycle through the images, just by using Active CSS. For this, we use something called hash routing, as it relies on the value of the hash in the url to work out what to draw on the page.
By employing the SPA @pages syntax for hash routing, we can make the popped-up pages bookmarkable, and fully responsive to the browser navigation buttons, such as the back arrow, forward arrow, previous history and refresh buttons, even when clicked on randomly. It should also keep you inside your SPA after fresh page reloads on any page. The SPA routing technology in Active CSS is a bit easier to learn than having to use an MVC framework to do the same thing on the front-end. It works perfectly with static HTML, for the optimum in performance, but will still work with dynamic pages, generated on-the-fly by your server code.
To get the browser navigation to work with hash "events", this is the basic concept:
1) Switch pages to draw the underlying page when a page link is clicked on.
2) Now that the underlying page has drawn, trigger the event which will open the modal.
Very A to B. Internally the ACSS core does the complex stuff behind the scenes. You only need to write the simple routing declarations in your config.
Active CSS hash routing works in much the same way as the regular page routing used in @pages. It relies on having the data in memory necessary to open up the modal once the underlying page has been drawn.
So to make this work, you need to:
- Ensure that your underlying page is declared in @pages. This underlying page declaration needs to be in site-wide config, not inline config. This is important in order to get your page links working. So all the main page (non-hash) declarations need to be available at all times. If you've already got these set up for a non-hash SPA, then you've already done this step. To understand how this step works, it is covered fully in the SPA section of the docs and this tutorial. Read those carefully if you haven't already.
- Ensure that the element that the user would normally interact with to open the modal is available on the underlying page when it loads. This should be obvious, but I'm mentioning it in case it isn't.
- Add a hash event in a @pages declaration which will trigger the modal once the page has been drawn. This is worked out and written by looking at which event will open the modal. The hash @pages declaration can either be within any inline config declaration on the underlying page, or in your site-wide config declarations. It doesn't matter, because the core will only trigger the hash event once the page is fully loaded, so the event can be inline and making it inline will make it unique to that page.
Have a look at the example code for this, and play around with the browser buttons. I've not put this in the code editor, so that you can see the effects on the URL when you navigate around.