Swiss Army - Extra Text?

[Al Fresco]

1) Script Title:Swiss Army Image Slideshow

2) Script URL (on DD):http://www.dynamicdrive.com/dynamici...army/index.htm

3) Describe problem: Fantastic script. Just 2 questions.

1. Is there a way to get some extra text to appear directly under each image? (As in the screen grab below - the red bit) I am already using the "description" tag lower down. The page is at: http://www.craigknowles.com/darren12/commissions.html


2. I have unwanted image borders appearing on my control buttons as they are selected. I've tried all I can think of but can't seem to get rid of them?

[jscheuer1]

Since the other text appears to be the same for all, for the first question, I would be inclined to use the descriptions for the red text, and make some kind of heading for the word 'commissions'.

I found that by using:

#show1 td {
border:none!important;
}

in the style section, that eliminated the border. It isn't really an image border, it is the border of the containing td's being manipulated to give the image buttons the appearance of being depressed when clicked. However, since you've changed a bit about them already, it looks bad. The above style will get rid of it.

Since you seem keen on customizing the look of the slide show, have a look at this post:

http://www.dynamicdrive.com/forums/s...ad.php?t=26953

The interim update of the script mentioned and linked to there may be of considerable use to you.

[Al Fresco]

Thanks John. That first bit works perfectly on the containing td's. Really helped.

I can see what you mean by changing the descriptions and then making a separate heading. But can the interim update allow me to keep the descriptions close to images of different format and size (ie. to alter position with the image)?

[jscheuer1]

With the interim update, using styles and the existing optional scripted properties for Swiss Army, you can get virtually any layout for the slide show that you like. It helps to know your css style though. Here is my favorite reference:

http://www.eskimo.com/~bloo/indexdot...pindex/all.htm

[Al Fresco]

Hi John.
Thanks for the help. I have had a good play with that but I still figure that there is no way to get the description to move with varying image heights. ( as the height of the master needs to be set for the tallest image) Is this right or am I missing something?

ps. thanks for the tip on eskimo.com

[jscheuer1]

Ah yes. I had originally wanted to place the descriptions in with the images, but that was unworkable for a number of reasons. Using the interim update script, find this (around line 333):

if(this.descriptions)
this.go('imgdsc'+this.issid).innerHTML = this.imgs[this.keeptrack()][1];

Change it to:

if(this.descriptions){
this.go('imgdsc'+this.issid).innerHTML = this.imgs[this.keeptrack()][1];
if(this.go('theimg'+this.keeptrack()+'_'+this.issid).offsetHeight)
this.go('imgdsc'+this.issid).style.top=(this.go('theimg'+this.keeptrack()+'_'+this.issid).offsetHeight-this.height)/2+'px';
}

And add this style to the stylesheet:

#imgdsc0 {
position:relative;
z-index:100;
}

That will 'pull up' the description for shorter images by the amount of space between the bottom of the image and the bottom of the image container.

You will probably also need to use the:

slides2.no_added_linebreaks=1;

property, and/or set the style for the description container:

#desc0 {
whatever
}

to fine tune the positioning of the descriptions.

[Al Fresco]

Made my day. Thanks a lot.
That's working great with the varied image heights John.

Is there a way to keep the description tracking the varying WIDTHS as well? Such that it has the appearance of working more like a .....title="". I have tried a few options but to no avail.

[jscheuer1]

The title attribute isn't visible unless you move your mouse over the element (image in this case) and then, it tracks to the mouse pointer. If all you wanted was that, it is an option in the original script:

slides2.use_title=1;

If you just want more control over the horizontal position of the description, I would need to know your criteria for that. How would it need to differ from image to image of different widths, and how would you characterize its orientation to each image? Where would you like what part of it 'pulled to'? By adjusting the css for text-align, width, and the position of the #desc0 selector in the stylesheet, you should be able to get it to fall just about anywhere you like.

[Al Fresco]

Hi again John,
At the moment I have the description tracking the varying image HEIGHTS. That's great. (although just realized its only working occasionally in Safari - sometimes loads in middle of the image?).

I would also like it to track,if possible, the VARYING image WIDTHS. You may be able to see what i mean here: http://www.craigknowles.com/darren16...oreimages.html

I would like to get the description to ALIGN at the BOTTOM RIGHT of EACH as in example 1/17 and in 3/17. But not in 2/17 (too far right). Hope this makes sense. The images will vary in width throughout.

[jscheuer1]

I get it, I think. Now, this was an interim update, and that means I am already working on the next phase. I'm going to include these modifications as optional properties, and they need to degrade gracefully (all other things being equal, appear in its more normal location below bottom, center of the image container) when the dimensions aren't available in the browser. To that end, here is the new code for the code we changed before:

if(this.descriptions){
this.go('imgdsc'+this.issid).innerHTML = this.imgs[this.keeptrack()][1];
if(this.move_desc_up&&(this.tmph=this.go('theimg'+this.keeptrack()+'_'+this.issid).offsetHeight)&&this.tmph>0) //move description up for shorter images - requires position relative for #imgdsc$
this.go('imgdsc'+this.issid).style.top=(this.tmph-this.height)/2+'px';
if(this.desc_pic_width&&(this.tmpw=this.go('theimg'+this.keeptrack()+'_'+this.issid).offsetWidth)&&this.tmpw>0) //set description width to pic width
this.go('desc'+this.issid).style.width=this.tmpw+'px';
}

It replaces:

if(this.descriptions){
this.go('imgdsc'+this.issid).innerHTML = this.imgs[this.keeptrack()][1];
if(this.go('theimg'+this.keeptrack()+'_'+this.issid).offsetHeight)
this.go('imgdsc'+this.issid).style.top=(this.go('theimg'+this.keeptrack()+'_'+this.issid).offsetHeight-this.height)/2+'px';
}

And requires new code here (red):

 . . . bstyle=imgs.border_style;
this.width=imgs.width? imgs.width : width? width : null
this.width=this.width? this.width+this.imgborder*2 : null;
this.height=imgs.height? imgs.height : height? height : null
this.move_desc_up=imgs.move_desc_up;
this.desc_pic_width=imgs.desc_pic_width;
this.height=this.height? this.height+this.imgborder*2 : null;
var ief='', dims='';
if(this.wid . . .

And to be active for a given show, requires that these properties are set for the array:

 . . .
slides.no_auto=1; //use to make show completely user operated (no play button, starts in stopped mode)
slides.image_controls=1;
slides.button_highlight='#FFFFFF';
slides.move_desc_up=1;
slides.desc_pic_width=1;
 . . .

Once you have all that in place, set the style for #desc0:

#desc0 {
text-align:right;
margin:0 auto;
}

and you should be in business. I see you currently have this selector float:right, but that won't do for the effect you are after.