Acorn-Egg-Siren slideshow - should I update the code?

[yellowbird]

Hi . I implemented the widescreen slideshow from, acorn, egg, and siren sometime ago. I know there have been discussions on code changes, but they go back and forth-over my head. Attached is the supersite so you can look at the current current coding. The html code body on the placeholder in the main website is:
<iframe src="https://www.cbsi-online.com/autoslider/auto-slider.htm#xl_xr_page_auto-slider" width=100% height=100% scrolling=no frameborder=0 marginheight=0 marginwidth=0></iframe>

Please recommend code changes if any are needed. Thanks.

Nancy

[Acorn]

Hi . I implemented the widescreen slideshow from, acorn, egg, and siren sometime ago. I know there have been discussions on code changes, but they go back and forth-over my head. Attached is the supersite so you can look at the current current coding. The html code body on the placeholder in the main website is:
<iframe src="https://www.cbsi-online.com/autoslider/auto-slider.htm#xl_xr_page_auto-slider" width=100% height=100% scrolling=no frameborder=0 marginheight=0 marginwidth=0></iframe>
Please recommend code changes if any are needed. Thanks. Nancy

Nancy, if this were my customer, this is the start of what I would do:

Main Site Placeholder for slider:

<iframe
  seamless
  src="https://www.cbsi-online.com/autoslider/auto-slider.htm#xl_xr_page_auto-slider"
  name="cbs-slider"
  title="Covering Central Business Systems Inc. core specialisms: A3 Multifunctionals; A4 Multifunctionals; Printers; Business Applications; Computers; Service & Support; Secure Document Destruction Services"
  loading="lazy"
  style="border: none; width: 100%; height: 100%;"
>
  <p>Your browser does not support iframes.</p>
  <p>If it did it would shows slides about Central Business Systems Inc. core specialisms: A3 Multifunctionals; A4 Multifunctionals; Printers; Business Applications; Computers; Service & Support; Secure Document Destruction Services</p>
</iframe>

A lot of your attributes are ignored by HTML5.

Presentation slider:

• Every slide must have a Page Title - they won't show but are essential assistance for screen readers.
• A page description will also assist.
• I would make use of the Image Filename feature if you have it.
• Do include Caption (Alt text) in all main images.
• Every slide should have a White Page background where all the slides' content does not fill the 1150x420px page size - you might otherwise get flashes of colour if the main website does not have a White backdrop.
• I assume you are keeping Scale to Fit Width on as you will have a Variant showing a smaller version. Think of the 3G overhead of doing this.
• Remember if you have more to say on a slide, you can adjust the time, slide by slide (e.g., sDispTimes = [10, 6, 17, 6, 5, 7]; I think as it has been a time...).Page 3 could then have slide-ins for the bottom detail.
• The full stop in Page 4 annoys me.
• The CSS can be pruned and corrected:

<script>
sDispTimes = [10];
function sswitch(){
  var n=xr_curp+1;
  if (n==xr_spapn) n=0;
  xr_spapp(n);
  setTimeout(sswitch,sDispTimes[n%sDispTimes.length]*1000);
}
setTimeout(sswitch,sDispTimes[0]*1000);
</script>

<style>
.zoomThis{
 animation: slideZoom linear 10s;
 animation-iteration-count: 1;
 transform-origin: 50% 50%;
}
@keyframes slideZoom{
  0% { transform: scale(1.00); }
100% { transform: scale(1.50); }
}
#xr_palrt, #xr_pnava {
  display:none !important;
}
</style>

I can see no reason for the .ZoomThis part.

Acorn

[yellowbird]

Nancy, if this were my customer, this is the start of what I would do:

Main Site Placeholder for slider:

<iframe
  seamless
  src="https://www.cbsi-online.com/autoslider/auto-slider.htm#xl_xr_page_auto-slider"
  name="cbs-slider"
  title="Covering Central Business Systems Inc. core specialisms: A3 Multifunctionals; A4 Multifunctionals; Printers; Business Applications; Computers; Service & Support; Secure Document Destruction Services"
  loading="lazy"
  style="border: none; width: 100%; height: 100%;"
>
  <p>Your browser does not support iframes.</p>
  <p>If it did it would shows slides about Central Business Systems Inc. core specialisms: A3 Multifunctionals; A4 Multifunctionals; Printers; Business Applications; Computers; Service & Support; Secure Document Destruction Services</p>
</iframe>

A lot of your attributes are ignored by HTML5.

Presentation slider:

• Every slide must have a Page Title - they won't show but are essential assistance for screen readers.
• A page description will also assist.
• I would make use of the Image Filename feature if you have it.
• Do include Caption (Alt text) in all main images.
• Every slide should have a White Page background where all the slides' content does not fill the 1150x420px page size - you might otherwise get flashes of colour if the main website does not have a White backdrop.
• I assume you are keeping Scale to Fit Width on as you will have a Variant showing a smaller version. Think of the 3G overhead of doing this.
• Remember if you have more to say on a slide, you can adjust the time, slide by slide (e.g., sDispTimes = [10, 6, 17, 6, 5, 7]; I think as it has been a time...).Page 3 could then have slide-ins for the bottom detail.
• The full stop in Page 4 annoys me.
• The CSS can be pruned and corrected:

<script>
sDispTimes = [10];
function sswitch(){
  var n=xr_curp+1;
  if (n==xr_spapn) n=0;
  xr_spapp(n);
  setTimeout(sswitch,sDispTimes[n%sDispTimes.length]*1000);
}
setTimeout(sswitch,sDispTimes[0]*1000);
</script>

<style>
.zoomThis{
 animation: slideZoom linear 10s;
 animation-iteration-count: 1;
 transform-origin: 50% 50%;
}
@keyframes slideZoom{
  0% { transform: scale(1.00); }
100% { transform: scale(1.50); }
}
#xr_palrt, #xr_pnava {
  display:none !important;
}
</style>

I can see no reason for the .ZoomThis part.

Acorn

Hi Acorn - thank you. I was at medical appts yesterday, so didn't get much chance to look at it. I know I already have some questions, but I need to look at it a little closer before I post them.
Nancy

[yellowbird]

Nancy, if this were my customer, this is the start of what I would do:

Main Site Placeholder for slider:

<iframe
  seamless
  src="https://www.cbsi-online.com/autoslider/auto-slider.htm#xl_xr_page_auto-slider"
  name="cbs-slider"
  title="Covering Central Business Systems Inc. core specialisms: A3 Multifunctionals; A4 Multifunctionals; Printers; Business Applications; Computers; Service & Support; Secure Document Destruction Services"
  loading="lazy"
  style="border: none; width: 100%; height: 100%;"
>
  <p>Your browser does not support iframes.</p>
  <p>If it did it would shows slides about Central Business Systems Inc. core specialisms: A3 Multifunctionals; A4 Multifunctionals; Printers; Business Applications; Computers; Service & Support; Secure Document Destruction Services</p>
</iframe>

A lot of your attributes are ignored by HTML5.

Presentation slider:

• Every slide must have a Page Title - they won't show but are essential assistance for screen readers.
• A page description will also assist.
• I would make use of the Image Filename feature if you have it.
• Do include Caption (Alt text) in all main images.
• Every slide should have a White Page background where all the slides' content does not fill the 1150x420px page size - you might otherwise get flashes of colour if the main website does not have a White backdrop.
• I assume you are keeping Scale to Fit Width on as you will have a Variant showing a smaller version. Think of the 3G overhead of doing this.
• Remember if you have more to say on a slide, you can adjust the time, slide by slide (e.g., sDispTimes = [10, 6, 17, 6, 5, 7]; I think as it has been a time...).Page 3 could then have slide-ins for the bottom detail.
• The full stop in Page 4 annoys me.
• The CSS can be pruned and corrected:

<script>
sDispTimes = [10];
function sswitch(){
  var n=xr_curp+1;
  if (n==xr_spapn) n=0;
  xr_spapp(n);
  setTimeout(sswitch,sDispTimes[n%sDispTimes.length]*1000);
}
setTimeout(sswitch,sDispTimes[0]*1000);
</script>

<style>
.zoomThis{
 animation: slideZoom linear 10s;
 animation-iteration-count: 1;
 transform-origin: 50% 50%;
}
@keyframes slideZoom{
  0% { transform: scale(1.00); }
100% { transform: scale(1.50); }
}
#xr_palrt, #xr_pnava {
  display:none !important;
}
</style>

I can see no reason for the .ZoomThis part.

Acorn

Hi Acorn. I have a few questions/comments so far:
1. First I apologize for not having the page titles/descriptions, images etc done as I had inquired sometime ago if I needed them in the slideshow and did not get it done.
2. I changed the code the way you instructed, changed the Transition effect to crossfade with a transition time of 5 secs so you actually see it, and decreased the sDisplayTimes lower so the the time isn't so long with the longer transition - works good on preview.
3. I do need to change the sDisplayTimes longer on some pages. I tried code in the HTML code header on the web properties page tab, but I don't know which code to make it work. I tried
<script>
sDispTimes=[6];
</script> with the time changed all the way up to 15, made no difference. I tried all of the code in the HTML head website tab on the page tab, then all the timings are off. Please advise.
4. I'm going to work on changing my main web page variants from 960 and 420, to 1440 and 720 as suggested by you and also haven't gotten done - (in the last year health issues have been interferring). What size do you suggest for the supersite slideshow width in that case? The main web page is set to scale to fit width, and max would be set to 1600.
5. I currently have a seperate supersite for the variant in the main page mobile variant. (I think I couldn't get it to work when I tried to have a variant in the main supersite slider.)

I appreciate your help. Nancy

[Acorn]

Nancy, you are juggling with timings for switching slides, transitioning within a slide and read all the detail.

For your original, where the Slide on Page 3 is the busiest, I set the switching time to be:

<script>
sDispTimes = [12, 10, 15, 10, 10, 10];
function sswitch() {
  var n=xr_curp+1;
  if (n == xr_spapn) n=0;
  xr_spapp(n);
  setTimeout(sswitch,sDispTimes[n%sDispTimes.length]*1000);
}
setTimeout(sswitch,sDispTimes[0]*1000);
</script>

This is in the Website Head for this Presentation design.
I increasing the first Slide's time as a viewer will also be looking at the rest of the page.

I put the hiding of the presentation controls in the Website Body:
[CDTE]<style>
#xr_palrt, #xr_pnava {
display: none !important;
}
</style>
[/CODE]
I think the IFRAME Placeholder could be set to 1280px width.

Acorn

[yellowbird]

Nancy, you are juggling with timings for switching slides, transitioning within a slide and read all the detail.

For your original, where the Slide on Page 3 is the busiest, I set the switching time to be:

<script>
sDispTimes = [12, 10, 15, 10, 10, 10];
function sswitch() {
  var n=xr_curp+1;
  if (n == xr_spapn) n=0;
  xr_spapp(n);
  setTimeout(sswitch,sDispTimes[n%sDispTimes.length]*1000);
}
setTimeout(sswitch,sDispTimes[0]*1000);
</script>

This is in the Website Head for this Presentation design.
I increasing the first Slide's time as a viewer will also be looking at the rest of the page.

I put the hiding of the presentation controls in the Website Body:
[CDTE]<style>
#xr_palrt, #xr_pnava {
display: none !important;
}
</style>
[/CODE]
I think the IFRAME Placeholder could be set to 1280px width.

Acorn

Thanks Acorn! I see now that I change the different page display times in the website html head code like an array. I was thinking I had to change the display times in the code on each individual page. I will place the hiding of the presentation controls in the website body as shown. In your opinion, how many slides do you think it should be limited to? thanks.

Nancy

[Acorn]

Nancy, that's between designer and customer.

Do not put the slider on every page; that is a killer.
However, if you are using the Presentation Slides to hyperlink into other main site pages then you'll need as many Slides with Links that map into all the pages.

I usually flesh out a site navigation chart to check off that all pages and links, menu & presentation, actually exist and work.

Acorn

[yellowbird]

Hi Acorn. I commented out the title="Covering Central Business Systems Inc. core specialisms: A3 Multifunctionals; A4 Multifunctionals; Printers; Business Applications; Computers; Service & Support; Secure Document Destruction Services" in the main site placeholder because the title pops up when the slider starts, anyway around that? I had to take off the [CDTE] [/CODE] from around the code below in the slider website html body code or it showed on the screen when the slider first loaded.
[CDTE]<style>
#xr_palrt, #xr_pnava {
display: none !important;
}
</style>
[/CODE]

Thanks. Nancy

[Acorn]

Nancy, it should have been

<style>
#xr_palrt, #xr_pnava {
display: none !important;
}
</style>

The CODE wrapper is for TalkGraphics presentation only. It wraps around the actual CSS.
The Title was just to show that you were able/allowed to create hover text; some like having this level of detail and control.

Acorn

[yellowbird]

Thanks Acorn for the explanation. Another Question, does it matter that I have a seperate supersite that displays in the placeholder in the main website mobile variant? Is there any speed or transition difference if I had just one supersite with a variant? I plan to do a lot of changing on the slides, with the variants formatted quite differently. It is more work to have two seperate, but if I work on one or the other and something goes wrong and it doesn't display/function right when I publish it, it doesn't affect the other while I try to fix it. Thanks Nancy