Home Joomla Simple Picture Slideshow - Howto Plugin Code
2010-08-01
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.

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).

Last Updated on Monday, 12 April 2010 21:27
 
Comments (129)
Loading images
129 Friday, 16 July 2010 00:18
Ronald Krauwl

I have a large slide show of 2000+ pictures. When I start the slide show it downloads all the pictures. Is there a way to prevent this?

Sample:http://www.iskc.nl/club/index.php?option=com_content&view=article&id=724&Itemid=66
Please email me on info AT iskc DOT nl if you know how to solve this problem.

Thanks in advance,
Ronald Krauwel


 

@Ronald Krauwl
Wednesday, 21 July 2010 21:42
A. Berger

Hi Ronald!

You are already using the parameter "preload" to preload tiny dummy images and load the real images afterwards. Beside of this the only advice I can offer is to reduce the number of the images - no one will ever see all of them, or do you stay on a single page for half an hour?

Best regards
Andreas

Slideshow in a PHP component
128 Thursday, 15 July 2010 20:58
Joe

First of all, let me say that this plug in is a BEAUTY! Great job!!

I have a PHP Page Component installed on my website. How do i make this plug in work with my php pages? I tried you basic code in my php page, but it won't work.

Help!

@Joe
Wednesday, 21 July 2010 21:36
A. Berger

Hi Joe!

This is a Joomla! extension. Is your site driven by Joomla!

Best regards
Andreas

Alt or Title for pictures
127 Wednesday, 14 July 2010 11:56
Mike

First of all, thank you very much for this plugin. It is really interesting and easy to use.

Well, maybe you have answered this before but I can't find the answer (or maybe I'm not good at English, hehe).
I created an article with some pictures. Everything is fine, but when the mouse is over them, it appears the name of the picture (caption?). Is there any possibility to avoid that?

Thank you very much,
Mike


 

@Mike
Wednesday, 21 July 2010 21:22
A. Berger

Hi Mike!

To do this use an empty default caption (see the section about captions above) in addition to the initial call.

Best regards
Andreas

great!
126 Saturday, 10 July 2010 12:58
Denis

Thank u!!!

Is there way to move the Captions and buttons above the slides (photos)
125 Wednesday, 07 July 2010 17:18
Khaja

This plug-in a great tool, very fast to implement. Thanks.

Is there way to move/display the Captions and buttons (start,stop,previous,next) above the slides / photos being shown?


 

@Khaja
Wednesday, 07 July 2010 21:20
A. Berger

Hi Khaja!

As far as the buttons are concerned, have a look at this comments:

http://www.bretteleben.de/lang-en/component/content/article/3859-control-buttons-position.html

And for the captions, check the selector ".besps_caps div.bs_inside". It controls the captions over the main image and will be the one that's easier to modify compared to ".besps_caps div.bs_outside" (captions below the main image).

Best regards
Andreas

How to add on the top in the template?
124 Wednesday, 30 June 2010 22:11
Sunny

Hi everyone.

I need to add the slide show on the top right side which is the part of header of template. I tried to paste this code in the html file of template but it simply prints this line and there is no slide show. I intend to place the slide show on the top right side which happens to be the header of template and which stays there on fir every page......

Kindly reply asap......any help is appreciated.


 

@Sunny
Tuesday, 06 July 2010 22:55
A. Berger

Hi Sunny!

To achieve this you should show the plugin at a module position. Have a look at the page FAQ&Troubleshooting (menu at the left), it lists two extensions, that allow to use the plugin this way.

If your template does not contain a module position that fits your needs, you might consider to create a custom module position. Feed Google with „joomla 1.5 custom module position“ and you will get a lot of usefull results that explain how to achieve this.

Best regards
Andreas

PLugin an MArkerposition einfügen
123 Tuesday, 29 June 2010 12:55
Dr.Spox

Hallo, ich bin noch ziemlicher Joomla Neuling und habe bisher in Typo3 gearbeitet.

Mir ist noch nicht ganz klar wie ich das Plugin an einer Markerposition einfügen kann. Im Moment wird es ja nur über den Beitrag im Contentbereich angezeigt.
Was muss ich einstellen, das es z.B. in der Rechten Spalte an der Markerposition "slideshow" eingefügt wird ?

Wäre für einen Tipp dankbar.
Danke Axel


 

@Axel
Tuesday, 06 July 2010 23:00
A. Berger

Hallo Axel!

Ich gehe mal davon aus, dass Du mit einer "MarkerpositioN" eine "Modulposition" meinst. Um das zu bewerkstelligen, musst Du Dich einer weietren Erweiterung (eines Moduls) bedienen, das es erlaubt "freie" Inhalte an diesen Positionen anzuzeigen. Die Seite "FAQ&Troubleshooting" (Menü links)  listet 2 Erweiterungen, die es erlauben, meine Plugins auf diese Art und Weise einzusetzen.

Gruß
Andreas

Like this :D
122 Thursday, 24 June 2010 03:28
Dek Jaka

Great... Like this :D

Captions from files rather than code?
121 Thursday, 24 June 2010 01:20
Bill H

So far I see that we can set a default caption for all slides (no problem there) and we also can set captions for individual slides by creating a line of code for each slide for which there should be a caption.

It would be nice if we could pick up the caption from a more convenient source rather than writing many lines of code.  For example, is it possible to have the name of the image file be the caption?  That is, if the image file is named "Birds on a Wire.jpg", the caption would be "Birds on a Wire".  I'm wondering if something like this is possible now and I've just missed it.

Alternatively, is it possible to pick up captions from a text file?  I'm guessing that this is an enhancement request!  But perhaps a text file in the same directory as the images, with each line of the text file something like "image01.jpg|Bird on a Wire".  Yes, that line is similar to the code, but it seems considerably easier to manage a text file -- or have the person responsible for the images manage a text file -- than to insert code in an article.  (There would need to be a line of code in the article that establishes a link to the text file, something like {*besps_c}||text file name>|{besps_c*}.)

Or have I misunderstood how captions work -- I'm definitely a newbie at this.

Thanks for a great extension!


 


 

@Bill H
Thursday, 24 June 2010 21:36
A. Berger

Hi Bill!

At first, the image file name is used for Alt and Title if neither caption nor link is set for an image but it will never become the source of the captions because complicated file names (i.e. file names containing special characters, blanks, using Upper/Lower-case ans so on) are a real pain and cause a lot more trouble than they solve - especially when used on a web server.

About the text-file, yes, this may become an option in future versions although it will be a users choice not a developers choice. I personally don't see why it should make sense to use a ContentManagementSystem for a website and then start to look around for options to manage the content outside the content management system.
In addition, it could create problems if the author of the gallery has no rights to upload/manipulate the text file and it is not so easy any more if your site is multilanguage (you need different text files for every language within the image folder) and when using the same images with different captions in different galleries (again, multiple text files needed). All of these scenarios are not a problem to take care of from my side but starting with a certain grade of complexicity you will notice, that having the caption right in front of you in your article (both in the article manager and in JoomFish) has it's advantages.

Best regards
Andreas

slide show runs on only admin login
120 Saturday, 19 June 2010 05:38
amey

My slideshow runs only when i am logged in in my site as  "Administrator".

Otherwise it shows only first image .

@amey
Sunday, 20 June 2010 11:26
A. Berger

Hi amey!

The plugin adds CSS and JavaScript to the Joomla! head data. Please check the source of your page when loggin and when not logged in. Maybe you are using an extension or a template that prevents JavaScript to get loaded for visitors (to speed up the page and to cause my plugin to fail ;)).

Best regards
Andreas

English
Panoramic Image Viewer
AddThis Social Bookmark Button
Who's Online
We have 28 guests online
Latest Items