Swipable gallery with buttons (custom navigation) - no loop after reaching end
213 views
Skip to first unread message
Andrzej Jakubczyk
unread,
Nov 17, 2017, 2:16:09 AM11/17/17
Reply to author
Sign in to reply to author
Forward
Sign in to forward
Delete
You do not have permission to delete messages in this group
Copy link
Report message
Show original message
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
to Google Web Designer beta
I have a swipable gallery component with "external" or "custom" buttons controlling GoForwards and GoBackwards actions. When the gallery reaches its end it does not react on "reachrightend" action. But everything is ok, when there is no custom navigation button (swipe only). Is there a way to make gallery go to the first frame when it reaches the last one in that case?
Greetings,
Kent Myers
unread,
Nov 20, 2017, 12:08:14 PM11/20/17
Reply to author
Sign in to reply to author
Forward
Sign in to forward
Delete
You do not have permission to delete messages in this group
Copy link
Report message
Show original message
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
to Google Web Designer beta
I don't know if this is possible with swiping, but we can create looping galleries using next & previous buttons (swiping disabled). To do that we add custom code to the buttons. We keep track of which item is being shown and use logic to invoke the goFowards/goBackwards actions for the middle items and the goToFrame action for the first & last items. For example clicking "next" on the last item should call goToFrame(1) and appears to be a looping gallery. You may be able to use this same technique with swiping. We don't use swiping in our dynamic ads with swipegalleries b/c it interfered with the exits.
Hope that helps,
Kent
Google Web Designer team
Andrzej Jakubczyk
unread,
Nov 20, 2017, 1:32:05 PM11/20/17
Reply to author
Sign in to reply to author
Forward
Sign in to forward
Delete
You do not have permission to delete messages in this group
Copy link
Report message
Show original message
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
to Google Web Designer beta
Thanks! Would you be so kind and share your code please?
Kent Myers
unread,
Nov 20, 2017, 4:48:37 PM11/20/17
Reply to author
Sign in to reply to author
Forward
Sign in to forward
Delete
You do not have permission to delete messages in this group
Copy link
Report message
Show original message
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
to Google Web Designer beta
Sure, although there are few functions that work together so depending on your environment, you may need to customize. You can see a working sample in the new Web Designer v.2.0.0.1116:
File > New from template...
Dynamic remarketing for AdWords
Dynamic Remarketing with Headline and Single CTA Button
scot...@gmail.com
unread,
Jun 19, 2018, 4:57:54 PM6/19/18
Reply to author
Sign in to reply to author
Forward
Sign in to forward
Delete
You do not have permission to delete messages in this group
Copy link
Report message
Show original message
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
to Google Web Designer beta
Hey Kent can this be done with an ad that isn't dynamic? (e.g. uses local image loaded into the Swipeable Gallery component).
Kent
unread,
Jun 19, 2018, 5:51:13 PM6/19/18
Reply to author
Sign in to reply to author
Forward
Sign in to forward
Delete
You do not have permission to delete messages in this group
Copy link
Report message
Show original message
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
to Google Web Designer beta
Yes that same code should work in non-dynamic ads, however AdWords has additional restrictions on custom functionality in case you are using that network.
scot...@gmail.com
unread,
Jun 20, 2018, 12:21:02 PM6/20/18
Reply to author
Sign in to reply to author
Forward
Sign in to forward
Delete
You do not have permission to delete messages in this group
Copy link
Report message
Show original message
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
to Google Web Designer beta
Thanks for the response Kent and in the last 4-5 years I think you're the closet anyone has come to getting this functional on this forum. I'm finding it doesn't work when the images are pulled in locally (not exactly able to identify why it' requiring the dynamic feed however).
If you ever have some room to test this and possibly provide working sample files please let me know! (thank you for getting it this far)
Kent
unread,
Jun 20, 2018, 1:06:22 PM6/20/18
Reply to author
Sign in to reply to author
Forward
Sign in to forward
Delete
You do not have permission to delete messages in this group
Copy link
Report message
Show original message
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
to Google Web Designer beta
I see. The 2 functions required are galleryFrameShown() and updateArrowDisplay(index) both in the file common/custom.js from the template I referenced. The problem is they reference dynamic properties in the gallery. One approach would be to first hard code constants like numFramesPerPage = 2 and itemsLength = 6, and then remove the dynamic dependencies in that file which will be the hard part. Another approach is to start a new non-dynamic file, add those custom events and functions, and proceed in this fashion.