PDA

View Full Version : Swiss Army - Extra Text?



Al Fresco
12-13-2007, 02:38 AM
1) Script Title:Swiss Army Image Slideshow

2) Script URL (on DD):http://www.dynamicdrive.com/dynamicindex14/swissarmy/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
12-13-2007, 06:44 AM
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/showthread.php?t=26953

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

Al Fresco
12-13-2007, 07:22 AM
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
12-13-2007, 07:45 AM
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/css/propindex/all.htm

Al Fresco
12-13-2007, 09:46 AM
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
12-13-2007, 05:57 PM
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
12-14-2007, 11:26 AM
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
12-14-2007, 12:08 PM
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
12-14-2007, 01:02 PM
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/somemoreimages.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
12-14-2007, 03:33 PM
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.

Al Fresco
12-15-2007, 02:48 PM
Hi again John.
Those changes are now working perfect in both Firefox and NS. Thanks.

The updated page is: http://www.craigknowles.com/da10/somemoreimages.html

A couple of problems.
Firstly: and most importantly an issue with Safari. The description is showing CENTRAL WITHIN THE IMAGE (not below). This happens on most images. When you 'run through' a second time the problem seems to be rectified. I can't see a reason for this? Any ideas?

Secondly: is there any hook to send the counter to the top maybe like 'counter_top'? I would like to take the counter up directly under the 'prev'+'next' image buttons.

Thirdly: in Opera the curser does not change when placed over the image buttons. Strange?

Other than that all is great.
Thanks a lot for you help here as I am aware that the script is still in the process of being updated.

jscheuer1
12-15-2007, 04:38 PM
Safari 3 Win doesn't have that problem, and no browser that recognises the boolean property of complete for image objects should. However, the behavior you describe is acceptable from my point of view for those browser that don't support this property. It is a standard javascript property, and will, as time moves forward, continue to be added to new versions of browsers that currently don't support it.

Even in browsers that don't support it, optimizing the images for smallest byte size and preloading them wholesale (rather than incrementally as is done with this script) would probably fix this, or at least minimize its duration to an image or two in the non-supporting browser. Preloading incrementally is a feature of the script though, that allows it to start up faster in browsers that support the property, so I'm not sure of the best way to proceed with that, probably a test to see if the boolean property is available, then doing the wholesale preload if it is not. When I have code on that, I will get back to you.

In regard to that, what kind (how fast) of a connection to the internet do you have? This sort of problem would be much more noticeable on a slower connection.

The cursor in Opera is just Opera's way of doing input buttons. You can override that with:


#controls0 input {
cursor:pointer;
}

You may move the counter anywhere you like, ex:


#counter0 {
position:relative;
top:-535px;
}

Now, your server is exhibiting a bug of this script that I had forgotten about. In some browser/server combinations the space between the incrementing image count and the word 'of' gets dropped. I've just fixed it in the interim script, but since you've already edited your copy elsewhere, I'll give the fix to you here:


inter_slide.prototype.cntrl=function(){
this.cpad=this.imgs.length.toString().length;
document.write('<div id="counter'+this.issid+'" align="center">Viewing Image: <b><span id="thecnt'+this.issid+'"><\/span><\/b>&nbsp;of<span style="font-size:1ex;">&nbsp;</span>&nbsp;<b>'+this.imgs.length+'<\/b><\/div>');
}

It simply consists of substituting the &nbsp; entity (red in the above) for that space in the above function.

Al Fresco
12-19-2007, 01:24 PM
Hi John.
Apologies for the delay in answering your questions.
The rest of the site seems to be running great. THANKS.


Even in browsers that don't support it, optimizing the images for smallest byte size and preloading them wholesale (rather than incrementally as is done with this script) would probably fix this, or at least minimize its duration to an image or two in the non-supporting browser. Preloading incrementally is a feature of the script though, that allows it to start up faster in browsers that support the property, so I'm not sure of the best way to proceed with that, probably a test to see if the boolean property is available, then doing the wholesale preload if it is not. When I have code on that, I will get back to you.
In regard to that, what kind (how fast) of a connection to the internet do you have? This sort of problem would be much more noticeable on a slower connection.


This makes sense. Now that the site is online: http://www.craigknowles.com/darren1/commissions.html
almost all the descriptions are landing in the CENTER OF THE IMAGE. It seems that anyone running Safari (mac) 1.3.2 will have this hitch. I believe this is the furthest upgrade for users on OSX 3.9 ? (maybe Daniel will correct me)

The images run at about 50kb optimized.

My connection is about 1500kbps. Broadband in Oz is a little antiquated! Would that speed be affecting things?

I look foward to that code if you get it.
Till then many, many thanks for all your help on this code.

jscheuer1
12-19-2007, 02:31 PM
Your images, the two I checked, are more like 70K. They should be able to be like 30K if truly optimized. You would likely need a dedicated image optimizing program to get that though. 70K is still a bit big for those, even with free online optimizers you should be able to get 50 or 40 on them.

Hmm, I have 54Mbps. 1500kbps shouldn't really be that much of a problem though. It would slow down the initial appearance of the images, until they are cached, but as the script caches ahead, this will often be noticeable only for the first image - in those browsers that support the boolean complete property for image objects.

I have no idea about what Safari version is supported by Apple on which of their OS systems. Usually the browser can be upgraded on older systems unless those systems are too old to be considered 'supported' by the manufacturer. This is especially true when (as in this case) both browser and OS are by the same company.

I was thinking of putting together this workaround code a few times since I posted my last message, but got distracted by other things, partly because I'm not sure if the test I would use would have any validity on a browser that doesn't react as expected to this boolean property to begin with, and I have no test environment for it.

So, you can be my test environment, let's start with using:


if(this.descriptions){
this.go('imgdsc'+this.issid).innerHTML = this.imgs[this.keeptrack()][1];
if(typeof (this.tmppic=this.go('theimg'+this.keeptrack()+'_'+this.issid)).complete=='boolean'){
if(this.move_desc_up&&(this.tmph=this.tmppic.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.tmppic.offsetWidth)&&this.tmpw>0) //set description width to pic width
this.go('desc'+this.issid).style.width=this.tmpw+'px';
}
}

in place of:


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';
}

If the problem is really as I suspect, and the browser involved knows that it doesn't support the complete property, this should at least force the descriptions to where they otherwise would normally be rather than attempt to position them on the basis of the image dimensions.

Use the above code, clear your cache completely, then test and report back.

Al Fresco
12-19-2007, 03:04 PM
Fantastic! Fantastic!
Well that works great. I tried it in this old Safari thing and it places the text to the bottom right. Opera, Firefox + NS work as intended originally.

Thanks a heap.

Whilst I have your attention John (hopefully not pushing my luck too far - not sure if I should post this as a fresh lead?)
I have redesigned my own site because I much prefer the Swiss Army code. http://craigknowles.com/cr2
Just one query fade wise:

at "10" in the first setting the image does not fade completely and at "20" it does fade all the way but it flickers in NS (mac). I cant seem to get combination that will work. Any Ideas?

I have tried changing all of the following:

inter_slide.prototype.fadepic=function(){
if (this.fade&&this.degree<100){
this.faded=0
this.degree+=10 ( tried from 2 to 20)

this.fadeclear=setInterval(function(){fadeobj.fadepic()},50) (tried from 10 to 50)

this.fade=!imgs.nofade;
if(this.fade)
this.degree=0 //initial opacity degree (10%)

Any Ideas?

jscheuer1
12-19-2007, 03:32 PM
What do you mean by 'fade completely', fade completely in or fade completely out?

Anyways, older NS (7.2, perhaps higher, and below) and some other browsers that support opacity (either opacity or -moz-opacity, or both) cannot go to 100% opacity from partial opacity without flicker, so that is why we have in four places:


this.degree/101

Changing the increment to 20:


this.degree+=20

would make the final value over 100, hence the flicker. You might be able to get a better result by changing all 4 instances of:


this.degree/101

to:


Math.min(this.degree/100, .9999)

But that may still flicker, if it does, use:


Math.min(this.degree/100, .99)

You may or may not also get some slight improvement by changing both instances of:


this.degree=10

to:


this.degree=0

All that would do is to make sure that the image is totally transparent at the start of any fade cycle. It too (not likely) might cause flicker in NS though, so try each idea out separately before combining them.

Al Fresco
12-19-2007, 03:49 PM
It doesn't quite fade out. It shows a faint shadow of the previous image.
Anyway I shall give these all a try at get back.
Thanks.

Al Fresco
12-19-2007, 04:32 PM
Hmm.
I think I've tried all possible combinations but no luck. They all stop the flicker, which is great, but in doing so leave the slight image on fade out.
With the original settings I have no fade problem but I have flicker!

Could I have gone wrong somewhere else?

jscheuer1
12-19-2007, 06:16 PM
I made a local copy of your page:


http://craigknowles.com/cr2/page1.html

and used the interim script instead of the copy on your server (as the one you have there at the moment has flicker; this.degree+=20). I turned my monitor up as bright as it can go, and couldn't see any bleed through or flicker in NS 7.2.

Al Fresco
12-22-2007, 09:41 AM
Thanks for looking into that for me John.
That bit of script above is great although it seems the problem is elsewhere. I have tested on other screens and there is no problem at all. I think its possibly to do with the card that's running my screen! Anyway it works.

Thanks for all your help on this thread its very much appreciated.