Different Slideshows for Different...

User 486215 Photo


Registered User
79 posts

I'm posting this as a solution to Mansour's problem about how to show a different number of slides at various screen widths.

My idea of user slide invisibility would not really work even with the Freezing issues problems having been fixed in Version 1.1. Sorry about the bad problem solving on my part. In fact, entire slides cannot be made invisible as that option is no longer there in V1.1!

The only way I could think of solving the problem of a different set of slides at different screen widths is to use different slideshows in a frame and select one of them dynamically on the basis of the usable screen width. The different slideshows must be in different folders from the web page folder and must be built as standalone slideshows.

The website page is a very simple page built with Responsive Site Designer. The script in the HTML Element will only execute once when the page loads. If you manually change the initial window size in your web browser on a laptop, desktop, or tablet, you will have to refresh or reload the page so that the bigger or smaller size is detected. I assume that you want the effect to happen automatically on physically different size devices so that the above may not be an issue. I tested the website on a laptop (as above) and on an Android smartphone.

The website is at: http://toms-site.coffeecup.com/Different%20Slideshows/

Look at the page source for this page to see the HTML code. Feel free to change the screen width in this code. Be sure to change the frame height and, of course, the slideshows according to your own needs.

User 486215 Photo


Registered User
79 posts

Webmaster wrote:

The website page is a very simple page built with Responsive Site Designer. The script in the HTML Element will only execute once when the page loads. If you manually change the initial window size in your web browser on a laptop, desktop, or tablet, you will have to refresh or reload the page so that the bigger or smaller size is detected. I assume that you want the effect to happen automatically on physically different size devices so that the above may not be an issue. I tested the website on a laptop (as above) and on an Android smartphone.

The website is at: http://toms-site.coffeecup.com/Different%20Slideshows/

Look at the page source for this page to see the HTML code. Feel free to change the screen width in this code. Be sure to change the frame height and, of course, the slideshows according to your own needs.

I relieved the need to manually refresh or reload the page when the window is resized on a large device by adding event handlers in the script. The website above has been updated.

The code appears to work on all Windows 7 web browsers and at least on my Android smartphone.

I hope it fulfills a need.:)
User 103173 Photo


VP of Software Development
0 posts

One possible way you could accomplish this is to add multiple HTML Elements to your RSD project for your sliders. Each HTML Element would then contain the unique slider that you only want to appear for certain display sizes. Then on those breakpoints, set the Display to None for the HTML Element that you do not want to appear.

Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2088758 Photo


Senior Advisor
3,086 posts

Yup that works for sure. If you want to see it live in action check this site I did for one of my clients.

http://limelightwraps.com/

This is not content slider but it will work the same way.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 187934 Photo


Senior Advisor
20,181 posts

Steve, aren't both of your slide shows are the same?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2088758 Photo


Senior Advisor
3,086 posts

They are the same but the images are different... look closely and you will see we have a smaller image, same content, but aligned differently for when it gets to mobile size. When we left the long horizontal images in the writing became so small so we went from desktop version:

http://misterwebguy.com/images/Banner%201.jpg

to this mobile version:

http://misterwebguy.com/images/Banner%201mobile.jpg
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 232214 Photo


COO
827 posts

Steve wrote:
They are the same but the images are different... look closely and you will see we have a smaller image, same content, but aligned differently for when it gets to mobile size. When we left the long horizontal images in the writing became so small so we went from desktop version:

You can use the Picture element in Responsive Content Slider to change images at breakpoints for smaller versions. Since only the applicable version will be downloaded this is a good practice that can speed up the viewing experience for mobile viewers. And yea, you can also present them with an entirely different image if desired :P
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2088758 Photo


Senior Advisor
3,086 posts

Bob Visser wrote:
Steve wrote:
They are the same but the images are different... look closely and you will see we have a smaller image, same content, but aligned differently for when it gets to mobile size. When we left the long horizontal images in the writing became so small so we went from desktop version:

You can use the Picture element in Responsive Content Slider to change images at breakpoints for smaller versions. Since only the applicable version will be downloaded this is a good practice that can speed up the viewing experience for mobile viewers. And yea, you can also present them with an entirely different image if desired :P


I will for sure Bob. This site was built before content slider came out. I will definitely do what you suggested for future sliders.

RIP WOW Slider!!!
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 486215 Photo


Registered User
79 posts

Scott Swedorski wrote:
One possible way you could accomplish this is to add multiple HTML Elements to your RSD project for your sliders. Each HTML Element would then contain the unique slider that you only want to appear for certain display sizes. Then on those breakpoints, set the Display to None for the HTML Element that you do not want to appear.


That would be a way to do it, I guess.

I thought I had tried that and couldn't make an HTML element Display - None in RSD, but I will have to go back and check again as I'm not on my development computer right now. In any case it still requires two or more slideshows because:

The problem was that Mansour wanted a different number of slides at different views. At the smallest size - 6 slides and at the largest size - 2 slides. There was (is) no way to skip slides at any particular view with the same slideshow.

You should realize that my example was only for illustration and that, in reality, the two or more slideshows would have similar slide contents, just organized differently by combining the contents of some slides into a smaller number of slides and with any desired formatting changes.

Maybe skipping slides at each view could be a feature in an upcoming RCS(?).:P
User 187934 Photo


Senior Advisor
20,181 posts

Steve wrote:
They are the same but the images are different... look closely and you will see we have a smaller image, same content, but aligned differently for when it gets to mobile size. When we left the long horizontal images in the writing became so small so we went from desktop version:

http://misterwebguy.com/images/Banner%201.jpg

to this mobile version:

http://misterwebguy.com/images/Banner%201mobile.jpg

But users are still loading all the content. Also the user was asking for a different number of slides in each.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

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.