I’m having an issue with getting a Scriptyfader slideshow to work as I’d like. I’ve tried a number of different configurations without the desired result.
I’ve created a HTML box inline where I want the slideshow to appear. It is 1px larger in width and height than the slideshow images (SF Panes). With the HTML box’s handles showing
I drew a Graphic Box over the top of the HTML box. I created a number of duplicate Graphic boxes into which I imported the slideshow image and applied the SF Pane Action. I placed the SF Panes on the pasteboard.
Configuration 1 - I imported a graphic image into the first Graphic Box and applied the ScriptyFader Action to the Box and set the Autofade interval to 5. When I published the site only the image in this box would show. It appeared that the image as trying to fade but couldn’t.
Configuration 2 - I left the first Graphic Box empty and applied the ScriptyFader Action to the Box and set the Autofade interval to 5. When I published the site it took about 5 seconds before the first SF Pane showed (about the time that each image was visible until it faded to the next). Then the SF Pane images would cycle through the slideshow cycle until the start and again no image would show for its cycle.
Configuration 3 - I imported a graphic image into the first Graphic Box and applied the ScriptyFader Action to the HTML Box and set the Autofade interval to 5. When I published the site the image in the first Graphic box showed about 100px lower than it should have (outside the HTML box). The slide show would cycle with the SF Panes showing in the proper locations until the cycle reached the start, where the image in the first Graphic box showed outside the HTML box as at the start.
Configuration 4 - I applied the ScriptyFader Action to and empty HTML Box and set the Autofade interval to 5. I also created a layered Graphic Box directly underneath the HTML box. In this Graphic Box I imported the image that I want to show at the start of the slide show (“the Start Image”). With this configuration, the image in the first Graphic box shows when the page loaded and the slideshow cycles correctly with the SF Panes showing in the proper locations. The only thing that I do not like about this configuration is that the Start Image shows during the SF Panes fading cycles. This is the configuration that is currently uploaded to the site.
What I’d like to see is the first image of the slideshow appearing when the page loads (in the correct location) and a seamless transition as the SF Panes cycle through the fading intervals (from start to finish to start again.
Is this possible? Have I done something incorrectly?
I applied the ScriptyFader Action to an empty HTML Box
Why empty? Apply the SF action to the html container and I would apply the first image as a background image (or insert a graphic box)
David
Hi David,
Your suggestion appears to by what I tried in Configuration 3.
I just read the link that Walt posted about designing sites: https://medium.com/design-ux/168074e9575 and the related links about using carousels on landing pages.
Given what I read I’m rethinking the layout of the landing page. Even if I go with a slideshow/carousel, I’m going to make it fully user interactive rather than automatic.
Your suggestion appears to by what I tried in Configuration 3.
Your config4 was closer to the mark but with the unnecessary “I also created a layered Graphic Box directly underneath the HTML box”
1 - Create a layered html container the correct size for your images. Use the inspector to apply a bg image, centre, centre. Name it meaningfully. Apply sf action.
2 - Duplicate html item, remove sf action and apply sf option action (make sure that Target is original html item). Change bg image to next image in slideshow. Name ‘pane2’ or similar.
3 - Duplicate pane2 however many times there are images left to display - then all you need do to pane3, pane4 etc. is change the bg to the correct (next) image in the show.
Your suggestion appears to by what I tried in Configuration 3.
Your config4 was closer to the mark but with the unnecessary “I also created a layered Graphic Box directly underneath the HTML box”
1 - Create a layered html container the correct size for your images. Use the inspector to apply a bg image, centre, centre. Name it meaningfully. Apply sf action.
2 - Duplicate html item, remove sf action and apply sf option action (make sure that Target is original html item). Change bg image to next image in slideshow. Name ‘pane2’ or similar.
3 - Duplicate pane2 however many times there are images left to display - then all you need do to pane3, pane4 etc. is change the bg to the correct (next) image in the show.
D
Thanks Dave,
When I use the configuration you suggested, when published the bg image in the SF html box drops down about 100px (outside the box). The SF Pane images show up where they should. Note: when I import a GB image into the initial html container (that I apply the SF Action to), Inspector doesn’t give me the option to centre, centre, only align left or right and top or bottom??
I have redesigned the landing page to illustrate the effect that I’m looking to create: http://test.advancedbarefoot.com/ I have used Rollover and Target/Show Hide Layer Actions to create the effect, but the page takes too long to load. I want the images to change in the feature container when you hover over the tabs, then if you click on the tab it takes you to the relevant page.
I was hoping that I could use the ScriptyFader Action so that the page will load faster.
Note that the images only fade when you hover over the tabs (on the right “Exercise & Optimal Foot Health” etc.). And at the same time the text under the image changes at the same time. If you click on the tab you are taken to a relevant page.
As I indicated, this was created using Rollover and Target Show/Hide Layer Actions. It works as I want but takes longer to load.
