View Full Version : Customizing "vfs" script

04-08-2009, 08:29 PM
1) Script Title: vfs

2) Script URL (on DD):

3) Describe problem:
- How can I add descriptions to the slides (in a defined area) ?
- How can the buttons be changed by images like in the 3rd Slideshow of the Swiss Army Slideshow ?

It have tried alone, based on the Swiss Army Slideshow or the Simple Controls Gallery v1.3, but... :confused:

Thanks for any help ;)

04-13-2009, 02:33 PM
In fact, I see that the the option to give descriptions to the pictures exists, but in the lightbox. I don't want to use the lightbox and try to put the description in a defined area, like in this script :
... which looks very nice, but without the thumbs like in the complex "vfs"

Happy Easter :cool:

04-21-2009, 08:52 AM
Hello, see John is back ;)

04-21-2009, 02:15 PM
The caption for the slideshow/viewer (not lightbox) is determined by the title attribute of the link (lightbox would use the name attribute). It must be enabled though in the config:

enableCaption : true, //Should "title" attribute of link and any paired image's 3rd parameter to be used as caption?


enableCaption : {loadarea: true}, //Should "title" attribute of link and any paired image's 3rd parameter to be used as caption?

where loadarea is the id of the load area for that show. Just doing that might not make it immediately visible because it is simply thrown into the load area as a span with the class of:


where loadarea is the id of the load area for that show. The images are absolutely positioned within the relatively positioned load area, so will cover it in most cases. So, say you are using the vac load area - In your stylesheet, you can do like so:

.vacCaption {
position: absolute;
left: 1ex;
bottom: -1.5em;

This will make it appear below the the load area, you can as easily make it to the top or right or left, just about anywhere you like. If you are going below (or anywhere really), make sure the container for the load area has enough space for it there and has nothing else in that spot that might cover it.

04-22-2009, 02:43 PM
Thank you John, that's clear now for me :)

Concerning the control buttons, if I put
useButtons : {loadarea: {0 : true, 1: true, 4 : true, 5 : true}}
the buttons "first" and "last" shouldn't disaopear, but this is not the case :confused:
Under "navSlideTitles" in the vfs_min.js sheet I can modify the names of the buttons, but how can I put nice buttons (images) instead of the standard buttons ?

Many thanks for your help ;)

04-22-2009, 04:17 PM
Works here, ex (once again using vac as the load area):

useButtons : {vac: {0 : true, 1: true, 4 : true, 5 : true}},

But it sounds like you may just want to set that to:

useButtons : true,

and prior to that set:

writeControlButtons : false, //Also requires element with id of load_area_idControl ex: <span id="loadareaControl"></span>

This will enable you to create your own buttons/controls. You may use whichever ones you want, and use images, links or buttons, or a mixture. The buttons may be in any order you like. You must have a control element, ex (once again using vac as the load area):

<div id="vacControl">
<input title="Previous" value="<<" class="vac" type="button">
<input title="Next" value=">>" class="vac" type="button">
<input title="Run" value="Running" class="vac" type="button">
<input title="Stop" value="Stop" class="vac" type="button">

The value attributes of the buttons/controls can be whatever you like (if using links or images, the value attribute is meaningless), but the title attribute tells the script what the control does and must be one of:

'Next' - brings up the next image
'Previous' - brings up the previous image
'First' - brings up the first image
'Last' - brings up the last image
'Run' - starts the slide show
'Stop' - stops the slide show

AND each control must have the class of the id of the load area (in this case 'vac' again). Whatever the active control is will also be assigned the added class of loadareaActive (vacActive here) by the script, which may or may not be used in your stylesheet to distinguish the active control in some manner visually.

Added Later: This is important, you may also want to set:

swapControlVals : false,

to prevent the script from overwriting your values (or creating values) for your custom Run and Stop buttons/controls. In some cases, letting the script do this is fine, in other cases it may cause an error and/or a visually undesirable result.

04-22-2009, 10:29 PM
I don't understand the last part "added later" (the rest is clear to me).
Has this something to do with "play" and "stop" buttons in the same position like in the "Simple Controls Gallery v1.3" script ?... which is nice :cool:

04-23-2009, 04:18 AM
It might help to first explain that the 'normal' operation - when the script generates the control buttons, is to display 'Run' as the value for the Run button when the slideshow is stopped, 'Running' when it is in motion. Conversely, the Stop button displays 'Stopped' when stopped, and 'Stop' when in motion.

This also happens when using links, but instead of the value attribute, it is now the text node of the link - if it has one.

If you are using linked images or just images, these would be inappropriate actions. If you are using links and have decided upon a different and static nomenclature for the links that activate Run and Stop, this would likewise be inappropriate.

But basically the advice stands on its own - If you are making your own custom controls, it will often be desirable to disable the swapControlVals property by setting it to false.

04-23-2009, 06:44 AM
ok I understand now, thanks for the explanation ;)