Home Joomla Simple Picture Slideshow - Howto Plugin Code
Main Menu
Most Read
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79
Support

If you like the products on these pages, your support is highly appreciated. Thank you very much!

Amount: 

Latest Items
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109
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 configured path to this folder (image root, by default "/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 the set root folder (by default "/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.




If you have questions or suggestions, please use the comment-function. Please include the installed Joomla! version and if you have problems - if any possible - the affected page in your comment.

If you need additional features or customizations for your project that exceed the scope of support offered through the comments, you are invited to submit your requirements specification and the planned budget by email (menu item "Contact" in the menu at the top).

If you use this extensions, please post a rating and a review at extensions.joomla.org.

Last Updated on Wednesday, 12 January 2011 15:06
 
Comments (38)
Text file for Captions?
28 Thursday, 01 December 2011 20:24
Daniel

Hi . . . if the captions are placed in a text file in the image folder how are they formatted in the text file? Am I using the bracketed code {*besp}{/besp*} you mentioned? That is plugin code so I am not sure I need to add it like that in a text file. Let me know your opinion.

thanks,
Daniel

Adding Cations
27 Thursday, 01 December 2011 19:43
Daniel

Just need to understand . . . are the captions placed in a text file, like captions.txt, and dropped in the same folder as the images?

thanks

@Daniel
Thursday, 01 December 2011 23:03
A. Berger

Hi Daniel!

Check the section "C.) Captions" above:
Captions are set using additional line of code within the article.

sample:
{*besps}whateverfolder{/besps*} ... call the slideshow
{*besps_c}0||default title|default text{/besps_c*} ... set a default caption (title/text) for all images


another sample:
{*besps}whatelsefolder{/besps*} ... call another slideshow
{*besps_c}0|pic01.jpg|title for pic01|text for pic01{/besps_c*} ... set title/text for pic01.jpg
{*besps_c}0|pic02.jpg|title only for pic02|{/besps_c*} ... set a title only for pic02.jpg
{*besps_c}0|pic03.jpg||text only for pic03{/besps_c*} ... set a text only for pic03.jpg
{*besps_c}0||default title|default text{/besps_c*} ... set a default title/text for all the rest

Best regards
Andreas

doesn't change automatically
26 Monday, 28 November 2011 17:47
Dario

Hi! the image doesn't change automatically but only when I reloading my browser. How can I do it?

Please, can you write step by step how can I do it?

Thank you

@Dario
Wednesday, 14 December 2011 20:00
A. Berger

Hi Dario!

First, temporarily switch to another template (preferably to a default Joomla! template) and check if this solves the problem. If it does, let me know which template you are using and where to download it.

If this does not solve the problem and you have absolutely no idea which one of the other installed extensions could possibly deal with JavaScripts in the head of the site, disable them one by one and check the page after every step (make sure that the cache is disabled!). As soon as you detected the extension that causes the problem - let me know.

Best regards
Andreas

how can I fix it
Wednesday, 14 December 2011 16:27
Dario

Ok! I understand that there is an error, but how can I fix it? What should I editin index.php? Could you explain the steps to do step by step. thank you very much.

@Dario
Wednesday, 30 November 2011 21:59
A. Berger

Hi Dario!

Either your template (check the index.php) or a third party extension prevents the JavaScript files "caption.js" and "mootools.js" from getting loaded. This is done to speed up the site. It's a nice idea but the extension you are using or the snippet in the index.php does not only prevent those two scripts from getting loaded but also the JavaScript needed by the slideshow too (/plugins/content/plugin_besps/besps.js). Modify the extension/snippet to allow the JavaScript besps.js to get linked from the head of the page (done by the plugin automatically - if it is allowed to) and the slideshow will work fine.

Best regards
Andreas

DOESN'T CHANGE AUTOMATICALLY
Wednesday, 30 November 2011 08:18
Dario

Hi! Andreas.

Ok the link is: www.italcoel.com/it/servizi/telepoint.html
Go to the bottom page.

Thank you so much!

@Dario
Monday, 28 November 2011 20:12
A. Berger

Hi Dario!

Sounds like either an extension (or a snippet in the index.php of your template) prevents the JavaScript /plugins/content/plugin_besps/besps.js from getting linked from the page head or another JavaScript causes a failure.
If you could post a link to the page, I will have a look at it.

Best regards
Andreas

Align Caps with CTRL IMG
25 Saturday, 26 November 2011 09:18
Marc

Link: www.claudiahofmair.de/index.php/architektur

Dear Andreas, I have been fighting with pushing the arrows down a little and levelling the CAPS to be in line with the arrows. Where can I do that?

Thanks and best regards, Marc

@Marc
Sunday, 27 November 2011 11:29
A. Berger

Hi Marc!

The stylesheet of the plugin is /plugins/content/simplepictureslideshow/files/besps.css. The selectors with "ctrl(s)" in the name handle the controls, the selectors with "caps" in the name handle the captions.

Best regards
Andreas

Fließtext drumherum?
24 Wednesday, 02 November 2011 12:24
Sascha

Danke für das super Plugin,

es zählt zu meinen "must haves" :)
Gibt es eine Einstellung/Parameter mit dem man die Slideshow mitten im Textblock platzieren kann und der Text dann je nach Platzierung der Slideshow rechts, links oder beidseitig herumläuft?

Viele Grüße & Danke,
Sascha

@Sascha
Wednesday, 02 November 2011 21:15
A. Berger

Hallo Sascha!

Mittig bzw. beidseitig umflossen geht nicht, aber für links oder rechts umflossen sind die Alignements "float-left" und "float-right" vorgesehen.

Gruß
Andreas

transparent background possible?
23 Monday, 24 October 2011 12:21
Dick

Hi,

I like the plugin, but I've modified my site from Joomla 1.6 to 1.7. My old template wasn't working and found a nice new one. This has not a white background but some kind of grey (from a jpg, so it's not a solid grey color). Is it possible to have in besps a transparent background? So that the original background is being used and not a solid color? I'm still in the process of finding the best one matching to my site.

Thanx in advance.

@Dick
Monday, 24 October 2011 20:38
A. Berger

Hi Dick!

Yes and No :)
Yes, it is possible, just set the background color to "#transparent" and you will get a transparent background because this setting gets misinterpreted by the browser.
No, because a transparent background has the unwanted side-effect that the next image in the row gets visible (100%) to early if you are using images of different size (and I suppose you do, because otherwise a transparent background wouldn't make any sense).

Best regards
Andreas

Link to specific slide number
22 Wednesday, 19 October 2011 21:03
Ragout

Hey,

I was wondering if it was possible to start the slideshow for example at number 3 using an anchor link.
Currently i have a page with some images, clicking these images will open a page with besps. Now it will always open at the first image. What I want is that when I click my third image the besps will also start at the third image.

Is this possible with besps or can I change something so this will work?

Thanks,
Ragout

@Ragout
Thursday, 20 October 2011 19:13
A. Berger

Hi Ragout!

I'm sorry, but this is not possible without heavily rewriting the plugin.

Best regards
Andreas

problem with "Plugin in Module"
21 Thursday, 13 October 2011 18:08
nils

I’m using your great plugin and I really love it!

I have a small problem and I wanted to see if you could help me: I’m using the "Simple Picture Slideshow" Plugin inside a module and since I have a bilingual website, I’m using the Additional Parameters option to show 2 different slideshows in each language. I enter in the Additional Parameters this code: {*besps}English-folder{/besps*}, I know it’s wrong, but that’s the only way I can make it work.
The problem is that the code types in "Plugin in Module" are working a bit differently than the one you have and so if I just enter the name of the folder I don't see a thing and if I write the whole code in there, I get this:

{*besps
then the slideshow content
}{/besps*}

Do you have an idea how I can make it work without getting the extra code?
I really appreciate your help!

nils

@nils
Wednesday, 26 October 2011 18:23
A. Berger

Hi Nils!

How do you realize your multi-language website? Are you using Joom!Fish? If so, use the default parameters of the module to execute the plugin and change the folder name within the Joom!Fish translation.

Best regards
Andreas

Deviation function
20 Saturday, 18 June 2011 15:13
Cat

Dear, great plugin, very easy to use and to install. Explanations are clear, thanks.

One question for you: how do I add a "deviation" function?
If I do understand correctly "deviation" is when I have some small and some big pictures and I would like them to appear all alligned with the title for example (and not centered).

Thanks & BR,
Cat

@Cat
Sunday, 26 June 2011 18:11
A. Berger

Hi Cat!

Sorry for the late response!

About your question: To align all images left instead of centered you have to modify the plugin. Open the file /plugins/content/besps.php (goes for Joomla!1.5) and change line 300

from: $besp_xdelta=intval(($bs_width_-$besp_showwidth)/2);
to: $besp_xdelta=0;

Best regards
Andreas

caption text size
19 Tuesday, 14 June 2011 20:23
sherwin

is there anyway to resize the captions? the default setting makes the text is too small to read.

thanks - and awesome plugin btw.

@sherwin
Tuesday, 14 June 2011 21:33
A. Berger

Hi sherwin!

You can change the appearance of the captions in the stylesheet of the plugin: /plugin/content/plugin_besps/besps.css

.besps_caps {} ... captions in general
.besps_caps div.bs_inside {} ... captions, placed over the main image
.besps_caps div.bs_outside {} ... captions, placed below the main image
.besps_caps div span {} ... appearance of the title line
.besps_caps div span + span {} ... appearance of the text line
.besps_slides div a, .besps_slides div a:link, .besps_slides div a:visited, .besps_slides div a:focus, .besps_slides div a:hover, .besps_slides div a:active {} ... appearance of links inside the captions

Best regards
Andreas

Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135
English
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Who's Online
We have 317 guests online