How to make a gallery like in Muse?

I made my client a website in Adobe Muse.
The program is over and I have to make corrections in the gallery on this page. http://www.monikagalek.pl
Is it possible to create a new page from Sparkle, but with the gallery and effects as it is on this page?

1 Like

@GRAFKOM, You can get close to it with the thumbnails, but Sparkle doesn’t yet support image lightbox navigation where you can move onto the next image without leaving the lightbox.

I did the test in Sprakle and almost everything can be done just like in Muse, but there is indeed a problem in image lightbox navigation - it doesn’t go to the next image.
But I think the bigger problem is that if I have, for example, 40 photo thumbnails and would like to add a photo between, for example, 17 and 18 thumbnails, I would have to transfer all other thumbnails manually - massacre.
My client often wanted to rearrange the thumbnails so that they were displayed in the correct order.
At Muse, it was easy, but there is no muse.
How should I deal with it?

@GRAFKOM, This is where it becomes difficult because of how you have been doing it in Muse.

Adobe Muse left the Adaptive design (fixed width breakpoints) framework and moved across to Responsive design (fluid width breakpoints), where Sparkle is Adaptive design which is all the same and just as good but you just have to think different about it.

I would separate those images onto their own page to start with because there is just too many images for the one page - this will allow things to be a bit more manageable for you when it comes to updates.

I would try the image gallery with the thumbnail setting ticked and see how that works for you. You could use three image galleries on a page categorising the images even more, and again this will allow you to manage the images better and quicker when you need to update it.

Or instead of the user clicking so many thumbnails just enlarge the thumbnails to a good sized image so there is no need for any popups or lightbox. Like I said, you just have to think different and not over complicate things.

It looks a lot to work through at first but once you get your head around it you will most likely come up with a far better solution and one that allows you to maintain it better as well.

There are third party options for creating a lighbox gallery, but they are not easy to implement. Things would be easier if sparkle had a custom onclick event where you could attach a small piece of code to a thumbnail image that would activate a third party gallery.

I use a JS option for such galleries and it works very well. You can see an EXAMPLE HERE. This was created in Sparkle and involves adding some code to the page through the code option in sparkle and adding a folder of full-size images to your output project. Things then get a little tricky because an onclick action must be applied to each of the thumbnails The code is: onclick=“return viewer.show(0)”. Whilst sparkle does have a number of built in onclick actions, there isn’t one for adding your own custom code (maybe I’ll suggest to @duncan that he adds this feature in a future release). The only way around the issue is to add the onclick function to the output HTML page after publishing. This can be a bit of a pain, but if it’s something that is needed, it has to be done. The nice thing about this JS option is that the gallery works seamlessly across different devices - all you have to do is rearrange the thumbnails to suit different screen sizes - the gallery will just go along for the ride.

Of course, the best option would be for sparkle to have a lightbox that allowed for stepping through a gallery of images. This would involve allocating images to a named gallery - sadly, this option isn’t with us yet.

If you don’t mind doing a bit of hand coding, I can supply you with the JS file and the code you need to add to your page. Just let me know.

3 Likes