How Do I Add Responsive Image Slider...

Mar 24th, 2020 at 03:02 PM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,596 posts
Online Now

Here is a link to a short video, about adding the "Orbit" slider to a project.
First is just the BASIC Orbit with no styling second is the same orbit slider WITH styling.

It is a demonstration only to give you an idea and show what can be achieved using the Orbit slider that comes with the FOUNDATION framework in Site Designer. There is I believe also something available in the Bootstrap framework, but I don't use bootstrap.

https://youtu.be/LYJ1LOLcq8s

STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials
https://mawarputih.coffeecup.com/forms/contact-wayan/
Apr 4th, 2020 at 01:11 PM
User 1869666 Photo

Carolyn Borjon
Registered User
229 posts

Are there directions somewhere in Coffee Cup for how to add the text that slides in over each of the photos in the Orbit component?
Apr 5th, 2020 at 05:36 AM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,596 posts
Online Now

Carolyn Borjon wrote:
Are there directions somewhere in Coffee Cup for how to add the text that slides in over each of the photos in the Orbit component?


There is a video winging it's way to Alsaka
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials
https://mawarputih.coffeecup.com/forms/contact-wayan/
Aug 23rd, 2020 at 02:35 AM
User 116462 Photo

Astropilot
Registered User
130 posts

Wayan Jaya Space Cadet wrote:
Here is a link to a short video, about adding the "Orbit" slider to a project.
First is just the BASIC Orbit with no styling second is the same orbit slider WITH styling.

It is a demonstration only to give you an idea and show what can be achieved using the Orbit slider that comes with the FOUNDATION framework in Site Designer. There is I believe also something available in the Bootstrap framework, but I don't use bootstrap.

https://youtu.be/LYJ1LOLcq8s


Hi Wayan,
Any chance you could post that video again?
Thanks!
Berthold
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
ED V4, SD V5
Aug 23rd, 2020 at 11:09 PM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,596 posts
Online Now

Beastro wrote:
Wayan Jaya Space Cadet wrote:
Here is a link to a short video, about adding the "Orbit" slider to a project.
First is just the BASIC Orbit with no styling second is the same orbit slider WITH styling.

It is a demonstration only to give you an idea and show what can be achieved using the Orbit slider that comes with the FOUNDATION framework in Site Designer. There is I believe also something available in the Bootstrap framework, but I don't use bootstrap.

https://youtu.be/LYJ1LOLcq8s


Hi Wayan,
Any chance you could post that video again?
Thanks!
Berthold


First Of all my most sincere apologies, I forgot to delete that post, with the link,
The video is no longer there
I am however in the throws of including video demonstrations on my new temporary site, when I have done that (which will be later today (Java time) I will let you know

Sorry again
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials
https://mawarputih.coffeecup.com/forms/contact-wayan/
Aug 24th, 2020 at 05:03 AM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,596 posts
Online Now

Hi Wayan,
Any chance you could post that video again?
Thanks!
Berthold


Ok I have got 3 video demonstrations on the site
2 are using the "Reveal" component, the bottom one is the Using the Orbit component,
Go to my site (link in my signature)
Once the first splash screen has disappeared hit the "open" button

What you then get is another example of the Orbit slider styled (a very versatile component that is)
keep hitting the "Next" button until you reach "Video Tutorials" (the others don't work yet :)

There you will see the demo videos that I have placed.
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials
https://mawarputih.coffeecup.com/forms/contact-wayan/
Aug 24th, 2020 at 06:30 AM
User 116462 Photo

Astropilot
Registered User
130 posts


Ok I have got 3 video demonstrations on the site
2 are using the "Reveal" component, the bottom one is the Using the Orbit component,
Go to my site (link in my signature)
Once the first splash screen has disappeared hit the "open" button

What you then get is another example of the Orbit slider styled (a very versatile component that is)
keep hitting the "Next" button until you reach "Video Tutorials" (the others don't work yet :)

There you will see the demo videos that I have placed.

Hi Wayan,
Thanks! Looks beautiful!
What I am doing is a self playing hero section on my opening page and I have been modifying the Orbit component in SD for that matter. Everything is fine and working, but I am wondering whether SD includes the motion-ui libraries, as I cannot get the fade effects to work.

I have Responsive content Slider installed, but never used it and considering that it is probably rather outdated, I guess Orbit is the way to go, correct?

Kind regards
Berthold
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
ED V4, SD V5
Aug 24th, 2020 at 06:30 AM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,596 posts
Online Now

Wayan Jaya Space Cadet wrote:
Hi Wayan,
Any chance you could post that video again?
Thanks!
Berthold


Ok I have got 3 video demonstrations on the site
2 are using the "Reveal" component, the bottom one is the Using the Orbit component,
Go to my site (link in my signature)
Once the first splash screen has disappeared hit the "open" button

What you then get is another example of the Orbit slider styled (a very versatile component that is)
keep hitting the "Next" button until you reach "Video Tutorials" (the others don't work yet :)

There you will see the demo videos that I have placed.


UPDATE
Now there are 2 demo videos for the orbit component
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials
https://mawarputih.coffeecup.com/forms/contact-wayan/
Aug 24th, 2020 at 06:55 AM
User 116462 Photo

Astropilot
Registered User
130 posts

Beastro wrote:

Hi Wayan,
Thanks! Looks beautiful!
What I am doing is a self playing hero section on my opening page and I have been modifying the Orbit component in SD for that matter. Everything is fine and working, but I am wondering whether SD includes the motion-ui libraries, as I cannot get the fade effects to work.

I have Responsive content Slider installed, but never used it and considering that it is probably rather outdated, I guess Orbit is the way to go, correct?

Kind regards
Berthold


I'll try the Out of view trick applied to the slide containers. Still wondering whether the original Foundation Orbit transitions are available as described in https://get.foundation/sites/docs/orbit.html
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
ED V4, SD V5
Aug 24th, 2020 at 07:20 AM
User 2699991 Photo

Wayan (Reetami's Dad)
Registered User
5,596 posts
Online Now

Beastro wrote:
Beastro wrote:

Hi Wayan,
Thanks! Looks beautiful!
What I am doing is a self playing hero section on my opening page and I have been modifying the Orbit component in SD for that matter. Everything is fine and working, but I am wondering whether SD includes the motion-ui libraries, as I cannot get the fade effects to work.

I have Responsive content Slider installed, but never used it and considering that it is probably rather outdated, I guess Orbit is the way to go, correct?

Kind regards
Berthold


I'll try the Out of view trick applied to the slide containers. Still wondering whether the original Foundation Orbit transitions are available as described in https://get.foundation/sites/docs/orbit.html

Out of view doesnt work on the sliders even though one can't see them they are technically not out of view as far as browsers are concerned. I have some custom transitions which work well. You can apply some transitions to the slider but it requires some fiddle with positioning widths and displays. Inger has on her site sharing thingy a component she made using those attributes but I can't remember what it's called.
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials
https://mawarputih.coffeecup.com/forms/contact-wayan/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.