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)
Calling a specific image via onclick
38 Tuesday, 08 May 2012 16:06
David

I would like to have a onclick event inside a Joomla module that calls a specific image into the image gallery.
The code for the link is as follows:
a href="#" img src="/images/galleries/contact/myimage.png" border="0" alt="My Image" /a

when the link above is clicked the image below would be shown in the gallery.


img src= www.dnrippy.com/zig/images/galleries/contact/2-matthylkema.jpg

Can I do this? If so how? as currently all my attempts prove fruitless. I'll probably need to write a java script to update the image source path, but I was looking for a quicker method.

Thanks and awesome plugin,
David


 

@David
Wednesday, 09 May 2012 20:42
A. Berger

Hi David!

Are we talking about an image part of the slideshow?
Is the image meant to replace the sildeshow or just stop the slideshow?

Best regards
Andreas

Caption Problem
37 Sunday, 06 May 2012 03:21
Paris

Hi Andreas,

Nice Work, bravo, but by me, only by 1st picture succes, but by 2nd no Caption or Text by the picture. But I am trying now, first with the Titel, not with Text anymore. Btw this shoutbox is nice, how can you add JCE or TcMIy editor in modul shout box?

Ich danke dir

@Paris
Sunday, 06 May 2012 20:37
A. Berger

Hi Paris!

If you have problems with the captions, please provide a link to the page with the slideshow and the code you are using in your article. I will have a look at it.

Best regards
Andreas

Cannot get slideshow to work with custom template
36 Friday, 27 April 2012 20:28
Ryan

I am using a custom template and having issues with the images showing up in a list, but not show as a slideshow.  Does this have something to do with not being able to use the besps.js file?  Does the js file need to be added to the index.php?  I have tried several things to understand if there is something in my CSS conflicting with the display of the slideshow and cannot figure it out.

Here is the page I am working with: imistage.nku.edu/sccsymp2012/index.php/event-pictures.html

Any help is appreciated.
Thanks!!

@Ryan
Tuesday, 01 May 2012 15:34
A. Berger

Hi Ryan!

Yes, probably your template does not include Joomla! head data at all (does jdoc:include type="head" exist in the index.php of your template?) or the template comes with a snippet of code to prevent mootools.js and caption.js from loading to speed up the page (and prevents the JavaScript of the slideshow from getting loaded too).

To solve the problem, just allow the plugin to load the JavaScript and the Stylesheet from the head of the page.

Best regards
Andreas


 

fwd
35 Saturday, 14 April 2012 12:28
poly

Hello Andreas! How to make picture in gallery turn over by click on picture, not only by click on buttons "previous image" and "next image".
And another question is how to make icon change color if it's hovered?

@poly
Monday, 16 April 2012 20:30
A. Berger

Hi Poly!

Im sorry, the plugin does not offer these functionalities but it is GPL licensed, so you are allowed to patch it to fit your needs.

Best regards
Andreas

fwd
34 Thursday, 12 April 2012 14:24
Poly

very nice plugin, thanks to the developers.
You can tell how to do, when I click on the picture was the following picture of how and when you press the button on the toolbar

@Poly
Thursday, 12 April 2012 19:45
A. Berger

Hi Poly!

To be honest, I have absolutely no idea what you are trying to achieve. Please consider that English is not my first language - and try to explain once again.

Best regards
Andreas

Transition in Chrome veeeery slow
33 Wednesday, 11 April 2012 05:22
Dave

Great Plugin, I will definitely donate if I can get it configured correctly.

I am not sure why, but the transition in Chrome from the first to the second picture is very very slow. Any ideas? It doesn't seem to lag with the other photos.
See: www.###.com

Joomla version:1.6
Theme: atomic
Chrome version: up to date (18.0.1025.152)

Also, I really like how in the css gallery (www.###.com/index.php/###l), the picture shows up instantly, but with the simple gallery, it takes a while to load and shows the picture slowly.

Thanks again. Great documentation and plugin!


 


 

@Dave
Wednesday, 11 April 2012 20:30
A. Berger

Hi Dave!

First, thanks in advance for your prospective donation. :)

Second, you should upgrade your site to Joomla!2.5.3 due to security issues fixed in 2.5.3 but not in 1.6.x and 1.7.x (www.joomla.org/announcements/release-news/5416-joomla-253-released.html)

Third, 2 questions, 1 answer:
The images you are using are far to large (in terms of dimension AND file size). Your images show with 600x400 pixels but the original files are 543x398 (57KB - this image is ok!), 1200x800 (732KB), 1000x667 (270KB) and 3375x2213 (413KB) and your first image (1EXT) is 5306x3537px and has a file size of 10902 KB!!! - this is 10MB! and this file size brings the browsers to their knees.

Please resize your image offline to the dimension your are going to use them on your site (i.e. 600x400). A file size between 60 and 80 Kilobyte will be absolutely enough to assure satisfying quality.
Your site will show smaller images faster, the slideshow will start earlier and your visitors will be deeply gratful for a fast loading site!

Best regards
Andreas

trouble with links
32 Friday, 06 April 2012 21:03
Betty

Hello,

Thank you for this easy to use plug-in! Everything has worked perfectly except I'm having trouble understanding how to make a link to each image in my slide show. I read the info on your site and applied it to my own, but with no such luck. Can you tell me what I am doing wrong?
This is the code i put in my article:

{*besps}{/besps*}
{*besps_l}0|promo-block-1.jpg|www.google.com|testimonials|_blank{/besps_l*}
{*besps_l}1|promo-block-2.jpg|www.yahoo.com|parts-and-repairs|_blank{/besps_l*}
{*besps_l}2|promo-block-3.jpg|www.bing.com|shows|_blank{/besps_l*}

And this is a link to my test site: test.bwmhopkins.com

@Dave
Thursday, 12 April 2012 19:57
A. Berger

Hi Dave!

Donation received - again, thanks a lot!

Best regards
Andreas

Thanks
Thursday, 12 April 2012 02:57
Dave

Thank you for the quick response. That was the problem. I thought I had already reduced the size.

Look for my donation. Thanks again.

@Betty
Saturday, 07 April 2012 06:17
A. Berger

 


Hi Betty!

1.) Your images are not called promo-block-1.jpg, promo-block-2.jpg and promo-block-3.jpg but promo-block1.jpg, promo-block2.jpg and promo-block3.jpg. My tip: use short and simple file names, it will make your life a lot easier! :)


2.) The first parameter in the code for links/captions is the number of the slideshow in the current article. The plugin numbers the slideshows automatically, according to their occurence. It starts with "0" (0 - first slideshow, 1 - second, 2 - third, and so on)


Therefore your code should look like:
{*besps}{/besps*}
{*besps_l}0|promo-block1.jpg|www.google.com|testimonials|_blank{/besps_l*}
{*besps_l}0|promo-block2.jpg|www.yahoo.com|parts-and-repairs|_blank{/besps_l*}
{*besps_l}0|promo-block3.jpg|www.bing.com|shows|_blank{/besps_l*} ... without the asterisks

Best regards
Andreas


 

ZOOM
31 Friday, 06 April 2012 00:07
vincenzo

Any chance to click into the image and open it bigger in the same page or in a bigger photogallery?

@vincenco
Saturday, 07 April 2012 06:19
A. Berger

Hi Vincenco!

Not with this plugin, sorry.

Best regards
Andreas

Thank you for the plugin
30 Saturday, 31 March 2012 07:11
Ramon Hernandez

I really like it,, a pure and simple slide show... just what I need... (no controls - no captions)... just images flowing....


Thanks again...

3. Bildunterschrift wird nicht angezeigt
29 Monday, 19 December 2011 09:16
stroberry

Hallo Andreas, tolles Plugin, habe ich schon mehrmals verwendet.

Mein Problem: ich hatte erst zwei Bilder mit Bildunterschift, habe ein drittes hinzugefügt, aber diese dritte Bildunterschrift wird nicht angezeigt.

Code:
{*besps}galerie{/besps}
{*besps_c}0|bild01.png|Neue Nazarethkirche am Leopoldplatz|{/besps_c*}
{*besps_c}0|bild02.png|Alte Nazarethkirche am Leopoldplatz|{/besps_c*}
{*besps_c}0|bild03.png|Nauener Tor in Potsdam|{/besps_c*}

Link: www.ra-fkz.de

Hab ich irgendwo eine Einstellung übersehen?

Danke
stroberry

Das war ja einfach ...
Thursday, 05 January 2012 12:13
stroberry

Vielen Dank, was man manchmal so übersieht vom zu vielen Gucken ...

Tolles Plugin, toller Support, danke.

@stroberry
Monday, 19 December 2011 21:30
A. Berger

Hallo stroberry!

Du hast kein Bild "bild03.png", Du hast allerdings ein Bild "bild 03.png". Versuchs mal mit dem. :)

Gruß
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 85 guests online