Page 1 of 1
responsive rotating banner - how?
Posted: Sun Jul 08, 2018 12:19 pm
by longman
Hi guys,
I was able to have a rotating banner by using the following code in the HTML:
Code: Select all
<script type="text/javascript">
function banner() { } ; b = new banner() ; n = 0
b[n++]= "<a rel='nofollow' href='www.domain.com'><img src='www.domain.com/image1.jpg'></a>"
b[n++]= "<a rel='nofollow' href='www.domain.com'><img src='www.domain.com/image2.jpg'></a>"
i=Math.floor(Math.random() * n) ;
document.write( b[i] )
</script>
But I need my image to be responsive, to shrink when the browser window gets smaller. I can make a none-rotating standard image responsive by going to Flexbox > Flex shrink > add 1 value. but how do i do it with the images inside the above HTML code?
I selected the HTML, in its Flexbox I added 1 value for Flex shrink, but it was not applied to the images inside the html code.
All I want is to have a rotating banner, inside my flex container/grid.
Is there a way to make it possible?
PS - by rotating i mean display one banner at a time, randomly.
Thanks!
Re: responsive rotating banner - how?
Posted: Sun Jul 08, 2018 12:38 pm
by Pablo
Why not use the built-in Slide show? it also supports 'random' mode.
Re: responsive rotating banner - how?
Posted: Sun Jul 08, 2018 1:52 pm
by longman
I tried but the image gets big inside the flexgrid.
Moreover, I want one image randomly to be displayed by each time the page is opened/refreshed.
Re: responsive rotating banner - how?
Posted: Sun Jul 08, 2018 3:27 pm
by Pablo
I do not think the slideshow can be inside a flex grid. A slideshow is a JavaScript controlled element, so it will override the flexgrid properties.
However, it should work with layout grids or full width on the page itself.
Moreover, I want one image randomly to be displayed by each time the page is opened/refreshed.
Please see the help.
Re: responsive rotating banner - how?
Posted: Mon Jul 09, 2018 4:41 am
by longman
Hi Pablo,
Do you mean this Help page?
http://www.wysiwygwebbuilder.com/slideshow.html
I see no mention or option for the photos to be displayed randomly (each time the page is visited). I see it has only the option of animation, after seconds the other images will be shown, which is not my aim.
Moreover, I used Layout grid, it worked but the image did not shrink. I went to image flexbox, add value 1 to Flex shrink, i previewed and it did not shrink.
Re: responsive rotating banner - how?
Posted: Mon Jul 09, 2018 5:45 am
by Pablo
I see no mention or option for the photos to be displayed randomly (each time the page is visited).
No, I meant the help (F1)
Random
The images will be displayed in random order. If you set the 'Pause time' to 0 (zero) then the SlideShow can be used to display a random image each time you visit the website.
Moreover, I used Layout grid, it worked but the image did not shrink. I went to image flexbox, add value 1 to Flex shrink, i previewed and it did not shrink.
Please set full width to 'true'
Re: responsive rotating banner - how?
Posted: Mon Jul 09, 2018 7:06 am
by longman
Thanks! worked nicely! Wish it was possible to add Slide Show to Flexgrids too, I have sidebar banners in flexboxes (can't use layout grid for sides) then i could make sidebar banners rotating too.
Re: responsive rotating banner - how?
Posted: Mon Jul 09, 2018 8:10 am
by longman
once it worked, images was shown randomly by each refresh, now it does not work.
I can't figure out what's wrong?
I have attached example file here
https://expirebox.com/download/256ab1cd ... 450e7.html
appreciate your help!
Re: responsive rotating banner - how?
Posted: Mon Jul 09, 2018 8:57 am
by Pablo
The image file name is invalid.
https://www.wysiwygwebbuilder.com/forum ... f=10&t=131
Also, I think you will need to add more images.
Re: responsive rotating banner - how?
Posted: Mon Jul 09, 2018 9:11 am
by longman
it was the number of images. it does not work with two photos, but more than two photos.
Is there a reason for it? or a bug? I wanted to have two banners rotating...
Re: responsive rotating banner - how?
Posted: Mon Jul 09, 2018 11:58 am
by Pablo
I think this is a limitation of the random algorithm of JavaScript.