[spxxxx]

I have installed a floating slideshow into my website but am having a couple of coding problems......

The reason I want to alter the show is the original has a maximum image height of 395px - small for portrait orientation - this solution allows for larger pictures WITHOUT altering the look of the site.

1. when I used Jalbum with Bananalbum I could set the x/y co-ordinates to sh/2 (screen height) so the show was always centred regardless of the viewers screen size.

2. also the fade transitions I have got seem a little harsh and am wondering if I've got this code wrong

The sample page is gallery

select wedding gallery I

and the script code is as follows: ANY help will be very appreciated and have to be at a very basic level

PHP Code:

/ Set slideShowSpeed (milliseconds):
var slideShowSpeed = 6000

// Duration of crossfade (seconds) for IE:
var crossFadeDuration = 3

// Set the positioning variables, below:
// Negative numbers are relative to right (whereX) or bottom (whereY)
// Positive numbers are relative to left (whereX) or (whereY) top
// Experiment with values to get positioning exact, and allow
// for the dimensions of the image in the positioning

var whereX = -610;
var whereY = 50;

// Specify the image files:
var Pic = new Array() // don't touch this!
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'client albums/one/0012.jpg'
Pic[1] = 'client albums/one/0018.jpg'
Pic[2] = 'client albums/one/0018a.jpg'
Pic[3] = 'client albums/one/0026.jpg'
Pic[4] = 'client albums/one/0041.jpg'
Pic[5] = 'client albums/one/0247.jpg'
Pic[6] = 'client albums/one/0216a.jpg'
Pic[7] = 'client albums/one/0199.jpg'
Pic[8] = 'client albums/one/0093.jpg'
Pic[9] = 'client albums/one/0182.jpg'
Pic[10] = 'client albums/one/0210.jpg'
Pic[11] = 'client albums/one/0277.jpg'
Pic[12] = 'client albums/one/0211.jpg'
Pic[13] = 'client albums/one/0124a.jpg'
Pic[14] = 'client albums/one/1636.jpg'
Pic[15] = 'client albums/one/0213a.jpg'
Pic[16] = 'client albums/one/0193.jpg'
Pic[17] = 'client albums/one/1689.jpg'
Pic[18] = 'client albums/one/0136.jpg'


// =======================================
// Do not edit *anything* below this line!
// =======================================

var nn=(navigator.appName.indexOf("Netscape")!=-1);
var t;var j=0;var p=Pic.length;var preLoad=new Array();
for (i=0;i<p;i++){preLoad[i]=new Image();preLoad[i].src = Pic[i];}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();}
if (document.all || document.getElementById){document.images.SlideShow.src = preLoad[j].src;}else{
document.FloatSlideShow.document.images["SlideShow"].src = preLoad[j].src;}
if (document.all){document.images.SlideShow.filters.blendTrans.Play();}
j=j+1;if (j>(p-1))j=0;t=setTimeout('runSlideShow()', slideShowSpeed);}
var dD=document,dH=dD.html,dB=dD.body,px=dD.layers?'':'px';
function floatSS(iX,iY,id){
var L=dD.getElementById?dD.getElementById(id):dD.all?dD.all[id]:dD.layers[id];        
this[id+'O']=L;if(dD.layers)L.style=L;L.nX=L.iX=iX;L.nY=L.iY=iY;
L.P=function(x,y){this.style.left=x+px;this.style.top=y+px;};L.Fss=function(){var pX, pY;    
pX=(this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth;    
pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;    
if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight;    
this.nX+=.1*(pX+this.iX-this.nX);this.nY+=.1*(pY+this.iY-this.nY);this.P(this.nX,this.nY);
setTimeout(this.id+'O.Fss()',33);};return L;}
floatSS(whereX,whereY,'FloatSlideShow').Fss();
</script>

<!-- END FLOATING SLIDE SHOW CODE //--> 


Cheers

Simon

[Steve]

I am very poor at JS but looking through that code and at your gallery it seems that the image height issue has been resolved but the positioning for the horizontal images is currently too height (only viewing in FF so can't comment about other browsers). The only control I see in that codes is the X, Y co-ordinates but they appear to be from the center of the images not the lower left corner...if they had been from the latter it would have been a snip to alter.

The second issue of the fade...besides the setting near the top of the code, there is another one lower down...

PHP Code:

document.images.SlideShow.style.filter="blendTrans(duration=2)"; 


I would also alter that and see if it gives you better results. If not you can always return it to default. No harm in trying

[spxxxx]

Originally Posted by Steve

I am very poor at JS but looking through that code and at your gallery it seems that the image height issue has been resolved but the positioning for the horizontal images is currently too height (only viewing in FF so can't comment about other browsers). The only control I see in that codes is the X, Y co-ordinates but they appear to be from the center of the images not the lower left corner...if they had been from the latter it would have been a snip to alter.

The second issue of the fade...besides the setting near the top of the code, there is another one lower down...

PHP Code:

document.images.SlideShow.style.filter="blendTrans(duration=2)"; 


I would also alter that and see if it gives you better results. If not you can always return it to default. No harm in trying

Cheers for looking Steve - I'm sure there is an easy fix for the experts....... it's just trying to find it..

The transition thing is liveable with to get the larger images and altering the second value seems to have no effect whatsoever

[Markulous]

Was going to say similar to Steve (even to my rubbish java!) tho' I'd comment out the top line of the two which is redundant and just might be interfering (tho transitions look OK here - IE7)

document.images.SlideShow.style.filter="blendTrans (duration=2)";
document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuration)";

Positioning is controlled via the co-ordinates starting in any corner but there is no "centre" as such - but it is justified left/right and top/bottom, whatever the screen size

[spxxxx]

Originally Posted by Markulous

Was going to say similar to Steve (even to my rubbish java!) tho' I'd comment out the top line of the two which is redundant and just might be interfering (tho transitions look OK here - IE7)

document.images.SlideShow.style.filter="blendTrans (duration=2)";
document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuration)";

Positioning is controlled via the co-ordinates starting in any corner but there is no "centre" as such - but it is justified left/right and top/bottom, whatever the screen size

I think the fade is targeted at IE - so it does fade?

Is there no way of determining the centre point of either axis.....

I had been given the following info but have no idea where to put it

grab the browser's height from whatever browser they user is using.

document.documentElement. clientHeight/Width

would grab that info for you, so you can do something like:

var browHeight = document.documentElement. clientHeight
var browWidth = document.documentElement. clientWidth

then where you need to make the X/Y coordinates if you want the height so you have it centred vertically (it's semi tricky as you have either portrait or landscape so you need to choose which way you want it to look centred I'm going to do portrait as the sample)

so here's the info you know you can get:
your image is going to be 600px high
you can get the client's browser size let's pretend it's 1000px high just for easy numbers

so what you want to do is make a new little equation

var myHeight = (browHeight - 600)/2

so you're taking the browsers height minus your picture's height then dividing by 2 so you have the same space top and bottom, so with my sample numbers it'd drop the pic down 200

[Steve]

The theory you have there is sound but in practice its more complicated. You need more variables as you will need to grab both the browser windows size, the offset co-ordinates to the spot where you want to display the image and then manipulate those variables with the ever changing image size variables...

the JS code that appears to be doing all that is this section...

PHP Code:

function floatSS(iX,iY,id){
var L=dD.getElementById?dD.getElementById(id):dD.all?dD.all[id]:dD.layers[id];        
this[id+'O']=L;if(dD.layers)L.style=L;L.nX=L.iX=iX;L.nY=L.iY=iY;
L.P=function(x,y){this.style.left=x+px;this.style.top=y+px;};L.Fss=function(){var pX, pY;    
pX=(this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth;    
pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;    
if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight;    
this.nX+=.1*(pX+this.iX-this.nX);this.nY+=.1*(pY+this.iY-this.nY);this.P(this.nX,this.nY); 


As to how to alter it to recalculate a 'base' point so that portrait images extend upwards from the left bottom corner rather than from the center (needed to fix a starting point for both landscape and portrait orientation) I really don't know.

Sorry

[Steve]

Could you not do a simple work round?

Instead of battling with JS, why not make the gallery display in a floating 'div' absolutely positioned in the bottom left corner?

With a little playing around with X,Y co-ordinates for the div you should get your required results. A lot will depend on how the rest of your site was coded though...