Full width Slidshow ?

[siran]

Hi Egg!
I have thought about your question.
The site seems to be using the first variant of the code and uses this CSS:

.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:

.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?

[Egg Bramhill]

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

[siran]

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

   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";

[Egg Bramhill]

Yes that works fine siran. Thank you for that

[FLySOLO]

Is it possible to stretch from center, too?

Thx,

Fly

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

   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";

[siran]

Yes, center is default. Remove the xw_str_bottom from the placeholder body code (which looks like this):

<div class="xw_stretch xw_str_bottom" style="width: 1120px; overflow: hidden;">
<iframe src="slideshow-2.htm" frameborder="0" width="1120" height="480"></iframe>
</div>

[behzad]

Am I missing something? Was it not a new feature introduced recently by Xara (full width slider/slideshow)?