Re: Full width Slidshow ?
Thanks Gary, but as I mentioned Acorn has done the thinking. I just struggled with this damn IFRAME not wanting to be clipped. ;)
Maybe I should have mentioned that the slideshow allows to define the display time per slide. In the site head code
Code:
<script>
sDispTimes=new Array(10,8,9,11);
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>
in the line
sDispTimes=new Array(10,8,9,11);
the time a slide is displayed is defined in seconds (including the transition time). If you want all slides be displayed for the same time you only need to put one number there...
The mechanism is that if you have more slides than the number of numbers specified there then it begins to read from start again (slide 1, 5, 9 displayed for 10 seconds, slide 2,6,10 displayed for 8 seconds...).
Re: Full width Slidshow ?
Hi Siran
Many thanks for taking the time to work on this - I will try your solution out - no doubt I will have some more questions, hope you don't mind!
Re: Full width Slidshow ?
Happy to help, just ask please.
1 Attachment(s)
Re: Full width Slidshow ?
Quote:
Originally Posted by
siran
Happy to help, just ask please.
Hi Everyone, haven't posted for ages.
I have used your code but the slider takes a long while to load even with as few as four images sized at 1400 px wide. It loads to half the screen first which I dont like and nor probably the client.
I can put a nice note in the placeholder but , is there a fix ? See attached.Attachment 114629
RedTel
Giving a choice on Crete.
Re: Full width Slidshow ?
Hi RedTel,
Without reading the whole thread again I believe Siran's slideshow is loaded into an iframe on the main site. Your slideshow doesn't appear to use this method, so I wouldn't expect that bit of code to work as expected.
siran, is there a way to have the images loaded top centre or bottom?
Re: Full width Slidshow ?
What a great idea for Xara to build into their first upgrade for 365 or not?
Re: Full width Slidshow ?
Hi RedTel,
you could try to add an extra
Code:
<script>xw_stretch();</script>
to the page body. So that the first stretching is executed before most of the other initialization.
Hi Egg,
could you further explain your question to a dumb German? ;) Which images do you want to place where?
Re: Full width Slidshow ?
Hi Egg!
I have thought about your question.
The site seems to be using the first variant of the code and uses this CSS:
Code:
.xw_stretch {left:50% !important;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
}
This moves the placeholder to the right. This effect is immediately visible before all the init stuff is done.
That effect can be compensated by adding margin-left=-50%; so that it looks like:
Code:
.xw_stretch {left:50% !important;
margin-left:-50%;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
}
Is that what you meant?
2 Attachment(s)
Re: Full width Slidshow ?
Sorry siran, I was refering to loading the slider into a placeholder as per the last coding you supplied. Using RedTel's images I produced the following. However the place holder is set to 480px high and as the browser stretchs the image to fit, the bottom part of the image is lost (the ducks for example). I understand the reason this has to happen. In Xara's stretchy images the origin of the image can be set at top, centre or bottom. I was wondering if there was a similar code to achieve the same results.
LINK
1 Attachment(s)
Re: Full width Slidshow ?
Hi Egg,
I have extended the code to support that. But I am not very good with IFRAMEs. Maybe there are better ways to do it.
To tell the code from where to stretch you might have to add another classname inside of the placeholder (separated by space).
The default now is to stretch from the center.
If you want to stretch from the bottom (as in the example) add xw_str_bottom
If you want to stretch from the top add xw_str_top
The code still is at the page head and I have only added these lines of
Code:
var i=e.firstElementChild;
var o=0;
if (e.className.indexOf("xw_str_top")<0){
o=(h-i.height);
if (e.className.indexOf("xw_str_bottom")<0){
o/=2;
}
}
i.style.marginTop=o+"px";