Browse through infinity scroll portfolio images at full size?

5 replies · opened Nov 28, 2019

PPaulNov 28, 2019

For an infinity scroll portfolio, clicking a thumb will show the image(s) for that item in a lightbox.

All our portfolio items are single images.

Is there a way to permit left/right navigation within the full size modal lightbox once the visitor clicks a thumb?

If that's possible, it would be infinity scroll combined with slider, except the slider would be for the entire portfolio instead of just one item.

Thanks in advance!

SSemicolon WebSTAFFNov 29, 2019

Hello,

Yes, this is Definitely Possible! Consider following these steps:

  1. Add the data-lightbox="gallery" Attribute to the main .portfolio Container.

  2. Replace the data-lightbox="image" Attribute within the Portfolio Items with data-lightbox="gallery-item" Attribute.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PPaulDec 1, 2019

Hello SemiColonWeb,
Thank you... your support is outstanding.
This fix worked, except that the full-size browse will browse through the entire set of photos, not just the sub-category selected in the portfolio filter bar.
It may be too difficult to get the full-size browse to limit itself to the selected portfolio category... but if you can think of a way, let me know!
Thanks again,
Paul

SSemicolon WebSTAFFDec 1, 2019

Hello,

Thank You so much for the Kind Words! :)

Unfortunately, this is currently not supported out of the box and is tricky to implement according to the Hidden Portfolio Items. You can consider finding the following code in the js/functions.js File inside the lightbox: function() Function Block:

delegate: 'a[data-lightbox="gallery-item"]',

and replace it with:

delegate: 'a[data-lightbox="gallery-item"]:not(:hidden)',

This should work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PPaulDec 2, 2019

Oh, you guys are too good! I changed that line in two locations in lightbox: function () { }, and it works!
We're going live tomorrow, and I also plan on writing a review of this theme.
Thanks again,
Paul

SSemicolon WebSTAFFDec 2, 2019

Hello,

Thank You so much for the Kind Words!

Very Happy to Help! :)

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard