How to build a carousel (scroller) for images

Moderators: LCNeil, heatherlaine, kevinmiller, elanorb

Post Reply
charms
Posts: 122
Joined: Mon Feb 10, 2014 6:21 pm
Location: Singapore
Contact:

How to build a carousel (scroller) for images

Post by charms » Sun Mar 23, 2014 8:04 pm

Hi there,

Another question. Is it possible to modify the grid layout to scroll through images horizontally? Or what would you do to achieve this functionality? I would like to have a single row with images in columns that I can scroll to the left and the right. I need to choose the images and drag them over to a second row. Through dragging I want to be able to re-position the order of the images.

If you could point out a few hints how to start it would be great.

Thanks,
Chris

LCNeil
Livecode Staff Member
Livecode Staff Member
Posts: 1223
Joined: Wed Oct 03, 2012 4:07 pm

Re: How to build a carousel (scroller) for images

Post by LCNeil » Mon Mar 24, 2014 2:07 pm

Hi Chris,

I believe you would need to implement a native mobile scroller for this functionality.

The following lesson explains how to do this with a text field with vertical scroll and should give a point to get started with-

http://lessons.runrev.com/s/3527/m/4069 ... ll-a-field

It should just be the case of replacing the field with the content you want to scroll and making the scroll horizontal instead of vertical.

I have made these adjustments to the sample script and attached this below. Please not that native mobile scrollers do not work in the desktop environment-
Scroller Example.livecode.zip
(12.51 KiB) Downloaded 96 times
Kind Regards,


Neil Roger
--
RunRev Support Team ~ http://www.runrev.com
——

charms
Posts: 122
Joined: Mon Feb 10, 2014 6:21 pm
Location: Singapore
Contact:

Re: How to build a carousel (scroller) for images

Post by charms » Tue Mar 25, 2014 12:09 am

Hi Neil,

Thanks for the example. It will be a good start as I currently need it only on mobile. But eventually I'll also want it on Windows and MacOS. I assume I can do that by building a custom control.

Thanks,
Chris

LCNeil
Livecode Staff Member
Livecode Staff Member
Posts: 1223
Joined: Wed Oct 03, 2012 4:07 pm

Re: How to build a carousel (scroller) for images

Post by LCNeil » Tue Mar 25, 2014 11:19 am

Hi Chris,

Using the existing group of images along with some desktop specific script should be enough to get you up and running with this feature on Mac and OSX.

Elanor has create a fantastic revOnline example that should be able to assist you with this-

http://revonline2.runrev.com/stack/606/Scrolling-Group

Kind Regards,


Neil Roger
--
RunRev Support Team ~ http://www.runrev.com
——

charms
Posts: 122
Joined: Mon Feb 10, 2014 6:21 pm
Location: Singapore
Contact:

Re: How to build a carousel (scroller) for images

Post by charms » Mon Mar 31, 2014 9:28 pm

Hi Neil,

Thanks, that looks good. I'll give it a try.

Kind regards,
Chris

Post Reply

Return to “idea2app and Coding School”