Home Joomla Simple Picture Slideshow - Howto Plugin Code
2010-03-12
Simple Picture Slideshow Plugin Usage - Code
Written by Andreas Berger   
Sunday, 12 July 2009 18:03
A survey of the possibilities to call, extend and modify slideshows with the code in the content item.

The "Simple Picture Slideshow" Plugin is called from within the content item. The code used offers - beside of setting the folder with the images - additional possibilities to enhance and arrange the slideshow.

A.) the slideshow

The code consists of the call {*besps}{/besps*} (without the asterisks) and contains the name of the folder with your images. The path to this folder "/images/stories" is added by the plugin automatically and must not be inserted.

The complete call in our sample would look such as:

{*besps}simpleslideshow{/besps*} - without the asterisks

To use a folder within a folder, the path below "/images/stories/" is used, e. g. to use the folder /images/stories/folder/subfolder" the call would look such as:

{*besps}folder/subfolder{/besps*} - without the asterisks

In general that´s it and the slideshow is ready to go.




B.) Parameter Overrides

Starting with version 1.3.0 the "Simple Picture Slideshow" offers the possibility to change every default setting from the backend whilst calling the plugin within the content item. With this feature it is possible to use different settings for every single slideshow.

To achieve this, the call of the plugin gets extended by the needed parameters. They are separated from the folder name and from each other by vertical bars (|). The have the syntax PARAMETER=VALUE:

List of possible parameters:

width - width of the slideshow in pixel (integer) e.g.: 400

height - height of the slideshow in pixel (integer) e.g.: 300

align - align the slideshow within the content item; possible values: 0 (right), 1 (center), 2 (left), 3 (float left), 4 (float right)

bgcol - background color as hexadecimal value (without leading #) e.g.: ffffff

sdur
- time to show pictures between two fades in seconds (integer) e.g.: 3

fdur - time the fading may take in seconds (integer) e.g.: 1

steps - steps to fade as value from 1-100 (integer) e.g.: 50

auto - start at pageload; possible values: 0 (no), 1 (yes)

sort - images sort order; possible values: 0 (A-Z - DEFAULT), 1 (Z-A), 2 (old-new), 3 (new-old), 4 (random)

setid - use folder name as identity of the top div-container; possible values: 0 (no), 1 (yes)

ctrls - show controls; possible values: 0 (no), 1 (yes)

csort - control elements sort order; any combination of the following values:
1 (Counter), 2 (Start), 3 (Stop), 4 (Back), 5 (Next), - (split between left and right)
e.g.: 1-2345 (refer to Plugin Howto)

cstart - value for control-element "start"; possible values "empty" (default button), any text, filename of button (refer to Plugin Howto)

cstop - value for control-element "stop"; possible values "empty" (default button), any text, filename of button (refer to Plugin Howto)

cfwd - value for control-element "fwd"; possible values "empty" (default button), any text, filename of button (refer to Plugin Howto)

cbwd - value for control-element "back"; possible values "empty" (default button), any text, filename of button (refer to Plugin Howto)

prld - load images afterwards (integer from 3 - "images in slideshow) e.g.: 5; refer to Plugin Howto

caps - show captions; possible values: 0 (no), 1 (yes)

inout - position of captions; possible values: 0 (below the main image), 1 (blended over the main image)

links - show links; possible values: 0 (no), 1 (yes)



Samples:

{*besps}slideshow|width=600|height=450{/besps*} - without the asterisks
Regardless of the settings in the backend, this gallery is shown with a width of 600 pixel (width=600) and a height of 450 pixel (height=450).

{*besps}slideshow|ctrls=0|caps=0|links=0|auto=1{/besps*} - without the asterisks
No controls, no captions, no links, start at pageload.

Notice:

The parameters listed here correspond with the parameters in the plugins configuration panel. Find a details description at: Howto Plugin .
The first parameter of the initial call always has to be the folder name (path). The sorting of the other parameters is arbitrarily.




C.) Captions

Captions and text have there own call. It´s:

{*besps_c}slideshow-number|imagefile|caption|text{/besps_c*} - without the asterisks

Slideshow-number:
The slideshow within one content item are numbered starting with 0.
This setting is obligatory.

Imagefile:
The name of the file "myimage.jpg".
Left empty, the call is used as default for the whole gallery. This means, if there is no setting for an image, this one is used. The file name and suffix are caseINsensitive.

Caption:
The Caption. If left empty . . . no caption is shown.

Text:
The additional text below the caption. If left empty . . . no text is shown.

Samples:

{*besps_c}0||myTitel|myText{/besps_c*} - without the asterisks
This call sets "myTitel" and "myText" as the default values for the first slideshow within the current content item by leaving the imagefile-value empty.
Notice: You don´t have to set a Default. If you don´t and there is no setting for an image, just nothing is shown.

{*besps_c}1|pic01.png||myText{/besps_c*} - without the asterisks
pic01.png of the second slideshow in the content item has no caption but the text "myText"

{*besps_c}0|pic02.png||{/besps_c*} -without the asterisks
pic02.png in the first slideshow shows no caption and no text although there is a default. The explicit setting overrides it.

{*besps_c}0|pic05.jpg|myTitelA|myTextA{/besps_c*} - without the asterisks
{*besps_c}0|pic06.jpg|myTitelB|myTextB{/besps_c*} - without the asterisks
{*besps_c}0|pic07.jpg|myTitelC|myTextC{/besps_c*} - without the asterisks
{*besps_c}0|pic08.jpg|myTitelD|myTextD{/besps_c*} - without the asterisks . . . and so on

Notice:
It is of no importance where within your content item and in which order your setting are.
The number of parameters has always to be 4. This means, a call always must contain 3 vertical bars, even if a setting is empty (e.g. the imagefile).
These vertical bars are protected characters within the calls and may not be used within your values.
Even when deactivated, Captions can be used to replace the (otherwise used by default) image filename as ALT-, TITLE-text.




D.) Links

If we want to link the images of our slideshow, there is a third call to do so:

{*besps_l}slideshow-number|imagefile|URL|titel|target{/besps_l*} - without the asterisks

Slideshow-number:
The slideshow within one content item are numbered starting with 0.
This setting is obligatory.

Imagefile:
The name of the file "myimage.jpg".
Left empty, the call is used as default for the whole slideshow. This means, if there is no setting for an image, this one is used. The file name and suffix are caseINsensitive.

URL:
The URL you want to link the image with. e.g.: http://www.bretteleben.de

Titel:
The titel, shown when the mouse is over the image. e.g.: bretteleben.de

target:
The window, you want to open the linked URL. e.g.: _blank (new window), _self (same window)

Samples:

{*besps_l}0||http://www.bretteleben.de|bretteleben.de|_blank{/besps_l*} - without the asterisks
This call sets a default link for the first slideshow within the current content item by leaving the value for the imagefile empty. The link opens in a new window.

{*besps_l}1|pic01.png|http://www.disney.com|Disney|_self{/besps_l*} - without the asterisks
pic01.png in the second slideshow within the content item is linked to www.disney.com. The link opens in the current window.

{*besps_l}0|pic02.png|||{/besps_l*} -without the asterisks
We don´t want pic02.png in the first slideshow within the content item to be linked. A special case, because as soon as we have links within a slideshow, every image gets linked. Setting this empty call the image is linked to the current page, without any further setting.

{*besps_l}0|pica.jpg|http://www.my.domain.com/myGreatProduct1|greatProduct1|_self{/besps_l*} - without the asterisks
{*besps_l}0|picb.jpg|http://www.my.domain.com/myGreatProduct2|greatProduct2|_self{/besps_l*} - without the asterisks
{*besps_l}0|picc.jpg|http://www.my.domain.com/myGreatProduct3|greatProduct3|_self{/besps_l*} - without the asterisks
{*besps_l}0|picd.jpg|http://www.my.domain.com/myGreatProduct4|greatProduct4|_self{/besps_l*} - without the asterisks ... and so on

Notice:
It is of no importance where within your content item and in which order your setting are.
The number of parameters has always to be 5. This means, a call always must contain 4 vertical bars, even if a setting is empty (e.g. the imagefile).
These vertical bars are protected characters within the calls and may not be used within your values.


That's it, have fun with the plugin!


If you have questions or suggestions, please use the comment-function.

If you use this extensions, please post a rating and a review at extensions.joomla.org. Furthermore I appreciate everyone, supporting me with a link back to www.bretteleben.de on his/her website. The extension itself does not produce any hidden links, eastereggs or whatever.

 

Last Updated on Thursday, 14 January 2010 11:09
 
Comments (104)
@Suzanne
104 Saturday, 06 March 2010 20:15
A. Berger
Hi Suzanne!

There is no padding but when you set the alignment to "float left or float right", the plugin adds a margin of 10px. To change remove it open the stylesheet /plugins/content/plugin_besps/besps.css with a text editor.
To (e.g.) remove the margin change the following selector:

.besps_holder {}

to:

.besps_holder {margin:0 !important;}

Best regards
Andreas
@Thierry
103 Saturday, 06 March 2010 19:54
A. Berger
Hi Thierry!

Not from the configuration panel because in general the slideshow works fine without additional media to configure/install, but you already modified the stylesheet before so - just give it a try.

Best regards
Andreas
padding
102 Friday, 05 March 2010 16:49
Suzanne
It seems that there is a padding surrounding the slideshow. Can I change the padding-settings somehow?
Thanks
background transparent, drop shadow and internet explorer
101 Friday, 05 March 2010 14:13
thierry
Hi Andreas,

Thanks for your answer, but...
I use .png pictures because my background template is not a color, I have a background image (design repeat)on my template !
Is it possible to load background-image instead of a background color in the plugins configuration panel ?
Thanks a lot

Best regards,
Thierry
@Gwen
100 Wednesday, 03 March 2010 21:36
A. Berger
Hi Gwen!

The vertical bar that separates the title from the text has to be present - even when you omit the text. I.e. please add a trailing vertical bar to your code:

{besps_c}0|pic03.jpg|Contribution to The Miami Children's Hospital|{/besps_c}

Beside of this, your code looks fine. Please make sure:

- that you have activated captions in the plugins configuration panel
- that your targeting the first slideshow in the article (the first parameter "0" points to the first gallery)
- the images you address are present in the slideshow

If the problem persists, please provide a link to the page, I will have a look at it.

Best regards
Andreas
Captions not showing
99 Wednesday, 03 March 2010 21:23
Gwen
Could someone tell me what am i doing wrong, the captions are not showing and while i chose center in the plugin setting, is not centered. heres the code I'm using:

{besps}Gallery|align=center|caps=1|inout=1|{/besps}



{besps_c}0|pic1.jpg|Donation to The Shriners Hospital for Childrens in Tampa {/besps_c}

{besps_c}0|pic03.jpg|Contribution to The Miami Children's Hospital {/besps_c}

{besps_c}0|pic04.jpg|Donation to The Shriners Hospital for Children of Tampa{/besps_c}

{besps_c}0|pic05.jpg|Donation to The Shriners Hospital for Children of Tampa {/besps_c}

{besps_c}0|pic06.jpg|Contribution to The Shriners Hospital for Children of Tampa {/besps_c}

{besps_c}0|pic07.jpg|Donation to The Wolfson Children's Hospital in Jacksonville, FL{/besps_c}

{besps_c}0|pic08.jpg|Contribution to The Miami Children's Hospital {/besps_c}

{besps_c}0|pic09.jpg|Donation to The Health First Foundation of Melbourne, Florida {/besps_c}

{besps_c}0|pic010.jpg|Donation to The Wolfson Children's Hospital in Jacksonville, Florida {/besps_c}
@Thierry
98 Wednesday, 03 March 2010 20:03
A. Berger
Hi Thierry!

Yes, change back the stylesheet to the original configuration and set the background color in the plugins configuration panel to the page background. Internet Explorer is - as far as I know - not able to properly handle the combination of scripted background-transparency and semi transparent PNGs.

Best regards
Andreas
background transparent, drop shadow and internet explorer
97 Wednesday, 03 March 2010 19:34
thierry
Hello,

I use png pictures with drop shadow.
No problem with firefox but with internet explorer, the drop shadow is all black, there is no gradation.
The Webpage with the problem : http://www.graphiknow.com/cms

css:
.besps_slides div {background: transparent !important;}

Is there a solution ?
Thanks
@Bill
96 Tuesday, 16 February 2010 19:04
A. Berger
Hi Bill!

As long as PDFs are not auto-updating themselves, the print-button will stay off this page. If you have a look at the version history of this plugin, you will see that a PDF would not really be worth the virtual paper. :)

If you want to save the page offline anyway, just use the browsers print-function to save it or - www.printwhatyoulike.com

Best regards
Andreas
download these instructions
95 Tuesday, 16 February 2010 02:29
Bill
Hi there,
Not to be nit-picking, but it would be very cool if there were a pdf, print or email icon on this article so it could be easily downloaded for future reference.

Very nice and feature-rich plugin, though. Thank you.
--b