How to create an auto image slider with bullets
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller
How to create an auto image slider with bullets
Hi! I'm new to Livecode and coding, so I'm trying to display a series of images on one of the cards on my mobile app. I would also like to add bullets to the image slider that automatically change to the right slide as the image changes. However, I'm not sure where or how to start this. Does anyone have any idea and would kindly give tips or pointers on how to begin? Thanks a lot!
-
- VIP Livecode Opensource Backer
- Posts: 9579
- Joined: Wed May 06, 2009 2:28 pm
- Location: New York, NY
Re: How to create an auto image slider with bullets
Hi.
I am not sure I get what you are trying to do. What are these "bullets"?
Presenting a series of images can be done either by changing cards, or by showing and hiding the images themselves. Cards can change with numerous visual special effects, including "sliding" gadgetry.
but do you want the images to move, or the windows themselves to "slide" as images change.
Can you explain so even I can understand? This may take some effort.
Craig
I am not sure I get what you are trying to do. What are these "bullets"?
Presenting a series of images can be done either by changing cards, or by showing and hiding the images themselves. Cards can change with numerous visual special effects, including "sliding" gadgetry.
but do you want the images to move, or the windows themselves to "slide" as images change.
Can you explain so even I can understand? This may take some effort.
Craig
Re: How to create an auto image slider with bullets
Hi, thank you for replying. So I wanted to show a slideshow of images that will automatically show the next image, so right beneath the image will be a row of bullets (for example 3 bullets indicating 3 images). It is like a CSS image slider. For example if the card is showing image 1, the first bullet will be highlighted while the rest of the bullets are not. Then image 1 auto changes to image 2 with the second bullet being highlighted while the rest are not and vice versa. Is it possible to implement this just on the image object (that is on one card only) rather than making a slideshow which requires switching to different cards? I apologise if I was being unclear, do let me know if you still don't understand, thank you very much!
-
- Livecode Opensource Backer
- Posts: 9287
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: How to create an auto image slider with bullets
Link removed as updated version available lower down.
ALL on a single card.
Have Fun!
Last edited by richmond62 on Mon Jan 11, 2021 8:50 pm, edited 1 time in total.
-
- VIP Livecode Opensource Backer
- Posts: 9579
- Joined: Wed May 06, 2009 2:28 pm
- Location: New York, NY
Re: How to create an auto image slider with bullets
Ah. I see now.
But what if there are a LOT of images? Those bullets will become unmanageable, no?
So what do they actually do for you, apart from indicating approximately where in the library the current image sits? You do not, I assume, intend that the user select a particular bullet, click on it, and have the associated image appear, do you? In other words, are these bullets just a sort of progress bar?If so, I would use an actual progress bar, so that the relative position of the current image still is indicated, but it does not matter how many there are,.
Craig
But what if there are a LOT of images? Those bullets will become unmanageable, no?
So what do they actually do for you, apart from indicating approximately where in the library the current image sits? You do not, I assume, intend that the user select a particular bullet, click on it, and have the associated image appear, do you? In other words, are these bullets just a sort of progress bar?If so, I would use an actual progress bar, so that the relative position of the current image still is indicated, but it does not matter how many there are,.
Craig
-
- VIP Livecode Opensource Backer
- Posts: 9579
- Joined: Wed May 06, 2009 2:28 pm
- Location: New York, NY
Re: How to create an auto image slider with bullets
Richmond.
I could not download your stack. I got a message that ".Livecode" files cannot be downloaded.
Craig
I could not download your stack. I got a message that ".Livecode" files cannot be downloaded.
Craig
-
- Livecode Opensource Backer
- Posts: 9287
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: How to create an auto image slider with bullets
You need to download it as the ZIP files rather than get DropBox to look inside the ZIP file.
And, while I am here: I did NOT implement clicking on the individual 'bullets'.
I agree with your remarks about the bullets, and, frankly I think the whole thing is a bit silly,
and wonder if things might not be better by displaying numbers in a text box.
And, while I am here: I did NOT implement clicking on the individual 'bullets'.
I agree with your remarks about the bullets, and, frankly I think the whole thing is a bit silly,
and wonder if things might not be better by displaying numbers in a text box.
-
- VIP Livecode Opensource Backer
- Posts: 9579
- Joined: Wed May 06, 2009 2:28 pm
- Location: New York, NY
Re: How to create an auto image slider with bullets
sc12.
Well, silly or not, can you tell us what your intent with the bullets are? Usually they indicate the actual "page" or tab that is currently displayed. The user can also use them to navigate forward or backward by clicking on any of them. As i mentioned, they become unwieldy if there are more than just a handful or so.
You can have any sort of "progress" bar, though, perhaps one that shows the actual image number. And you can have that progress bar throw some sort of selection gadget that allows the user to either move forward or backward, or explicitly select a destination.
If you really work at this, you can have thumbnails appear along the length of the bar. How about that for fun?
Craig
Well, silly or not, can you tell us what your intent with the bullets are? Usually they indicate the actual "page" or tab that is currently displayed. The user can also use them to navigate forward or backward by clicking on any of them. As i mentioned, they become unwieldy if there are more than just a handful or so.
You can have any sort of "progress" bar, though, perhaps one that shows the actual image number. And you can have that progress bar throw some sort of selection gadget that allows the user to either move forward or backward, or explicitly select a destination.
If you really work at this, you can have thumbnails appear along the length of the bar. How about that for fun?
Craig
-
- Livecode Opensource Backer
- Posts: 9287
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: How to create an auto image slider with bullets
I'm not sure I'm feeling that kinky right now.How about that for fun?
-
- VIP Livecode Opensource Backer
- Posts: 9579
- Joined: Wed May 06, 2009 2:28 pm
- Location: New York, NY
Re: How to create an auto image slider with bullets
Richmond.
You need to trim those thumbnails.
Craig
You need to trim those thumbnails.
Craig
-
- VIP Livecode Opensource Backer
- Posts: 7215
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: How to create an auto image slider with bullets
Images can also be changed using only a single image object by updating its content. That can save a lot of space since you don't need to have multiple cards or images in the stack.
If you have more bullets than space under the image, I've seen examples where there are small arrows at the sides that allow users to move to the next set. Usually these are thumbnails though, see for example how eBay does it.
If you have more bullets than space under the image, I've seen examples where there are small arrows at the sides that allow users to move to the next set. Usually these are thumbnails though, see for example how eBay does it.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
-
- Livecode Opensource Backer
- Posts: 9287
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: How to create an auto image slider with bullets
Cripes what was I thinking?
Click on the thumbnails . . .
https://www.dropbox.com/s/924539j5u7s9i ... e.zip?dl=0
Last edited by richmond62 on Mon Jan 11, 2021 8:51 pm, edited 1 time in total.
-
- Livecode Opensource Backer
- Posts: 9287
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: How to create an auto image slider with bullets
Indeed: but I have a fixation on the backGroundPattern of graphic objects.Images can also be changed using only a single image object by updating its content.
Re: How to create an auto image slider with bullets
I might add that the "bullets" could also be put in a group box.
For instance, if there were only say, 10 bullets / pics, the groupbox would show all the bullets. more than 10, the groupbox would either have a scrollbar, or a slider or other indicator that more bullets were not visible at the moment.
The effect actually works very well in some cases.
For instance, if there were only say, 10 bullets / pics, the groupbox would show all the bullets. more than 10, the groupbox would either have a scrollbar, or a slider or other indicator that more bullets were not visible at the moment.
The effect actually works very well in some cases.
-
- Livecode Opensource Backer
- Posts: 9287
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: How to create an auto image slider with bullets
It might work even better if you uploaded that stack so we could play with the bullets.The effect actually works very well in some cases.
-