New blog post: Exploring gallery components in Google Web Designer

[Jaz]

Hello Google Web Designer Community!

In this week's blog post, Software Engineer Jeremy explores some of the advanced features of our Carousel and Swipeable galleries!  Follow along as he explores auto play options, multiple gallery use and more! Check out the article below and let us know what you think in the blog comments!

Exploring gallery components in Google Web Designer

thx!
jaz

[Jonnie Grieve]

Hi there,

In the latest blog, I think we're missing code for the 5th and final event? Or am I getting this wrong and it automatically stops the auto play?

[Jeremy (GWD Engineer)]

Hi Jonnie,

Are you referring to the final "frame tap" event? 

• Target: gwd-swipegallery_1 
• Event: Swipeable Gallery: Frame tap 
• Action: Custom 
• Custom Action: gwd.stopAutoplayAndSyncCarousel 

If so, the reason no code is specified is that you don't actually need to enter any new code while adding this event. The "frame tap" event handler requires the same action as "mouse over a frame" handler above it. Instead of selecting "Custom -> Add custom action", like we do for the previous events, we need to select "Custom -> gwd.stopAutoplayAndSyncCarousel", to reuse the custom action we created for the previous event. Or, if you wanted to customize them individually later, you could copy the code from that event manually:

• Code: 

                                this.stopRotation(); 

                                document.getElementById( 

                                          'gwd-carouselgallery_1').goToFrame(event.detail.id); 

If that's not what you meant, let me know and I'll be happy to clarify further.

Thanks for reading!

Cheers,

Jeremy

[Jonnie Grieve]

Hi Jeremy,

I think I understand now, thanks!

But I'm still struggling to complete the tutorial.

Having added the first lot of code, for the fadeOtherFrames function I keep getting the error returned "failed to serialize events" which might explain why the 2 carousels were never syncing. Here's my latest copy of the file, up to that point. 

[Jeremy (GWD Engineer)]

Hi Jonnie,

Oops. There was a typo in the blog post, causing that error for you. The code for fadeOtherFrames was missing a "}" character, highlighted below:

• Code:

                             var frames = this.querySelectorAll('.frame'); 

                             var activeFrame = this.getFrame(event.detail.id); 
                             for (var i = 0; i < frames.length; i++) { 

                                 if (frames[i] == activeFrame) { 

                                    frames[i].style.opacity = 1.00; 

                                 } else { 

                                    frames[i].style.opacity = 0.25; 

                                 }

                             } 

Thanks for pointing this out. We're correcting the blog post now. To fix your document at this point, it may be necessary to go into code view, find the old code, and manually insert the new "}" character.

Sorry for the confusion.

- Jeremy

[Jonnie Grieve]

Thanks for getting back to me.

What I'll probably do now is try again with a fresh file and let you know how it goes  :)