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 Installation and Usage
Written by Andreas Berger   
Thursday, 08 January 2009 17:34

A step for step tutorial on how to install and use the bretteleben.de Simple Picture Slideshow Plugin.

Installation

1.) Log into your administration interface


2.) Go to "Extensions" > "Install/Uninstall"


3.) Select the Package File with the bretteleben.de Simple Picture Slideshow Plugin


4.) Click "Upload file & Install"


5.) If everything worked fine, you get the message "Install Plugin Success"


6.) Select "Extensions" > "Plugin Manager"


7.) Find the "bretteleben.de Simple Picture Slideshow" and click it


8.) The first section of parameters controls the layout of the slideshow.
The first parameter is the width of your slideshow in pixel.


9.) The next parameter is the height of your slideshow in pixel.



Pictures larger than set here are scaled by the visitors browser according to these settings. Smaller pictures are not enlarged. If possible you should offline scale your pictures to the width and height they will display because scaling by the visitors browser results in a loss of quality and it increases the time your page takes to load without any additional benefit for your visitor.


10.) The next parameter sets the position of the gallery within the available space. You may choose between left - centered - right, float left and float right. The last two options allow the gallery to get wrapped by your text. They also increase the dependence from the used template and will not always show the desired results!


11.) Background Color: The background color of your slideshow is of importance if you use pictures of different size or pictures with proportions different from the settings above. It prevents the next Pictures to be visible below the current one. Set the hexadecimal color-value without the leading pound key (#), e.g. ffffff for white.


12.) "Sort Order" sets the order the images are shown. You may choose between alphabetic ascending, alphabetic descending, old to new and new to old (both use "last changed" not "created"!) and random.


13.) Next sections sets the values for the animation.
"Time to show" is the time in seconds a picture is shown between two fades.


14.) "Duration of Fading" is the time you set for the fading itself, again in seconds. In most cases 1 will do fine.


15.) The plugin moves transparency from 100% to 0% (or vice versa). "Fading steps" sets the stepwidth used. A value of 5 means, that the transparency is changed in 5 steps, each of 20%. 50 sets 50 steps, each of 2%. The higher this value the more smooth the fading but also the more computationally intensive. Setting a to high value when using large images may cause the set times to be excessed. Just try out.


16.) The next parameter sets if your slideshow starts automatically on pageload.


This option may be activated regardless of displaying controls. They do not influence this feature.


17.) The next section is about the optional control elements.
The first parameter sets if you want to show them at all.


18.) The second parameter sets which elements to show, if they get shown left or right and in what sort order.



This all is set with a combination of the values 1, 2, 3, 4, 5, and the minus sign "-".
1 ... the Counter
2 ... Link/Button Start
3 ... Link/Button Stop
4 ... Link/Button Back
5 ... Link/Button Next
'-' ... the minus sign splits the elements into left and right. If omitted, all elements are shown at the right.

Samples:
1-2345 . . . . the counter at the left, the four links/buttons at the right
415 . . . . back-button/link, counter, next-button/link, all of them at the right side (no minus sign)
415- . . . . same elements again, this time all at the left side


19.) The next 4 parameters set what you want to use for the links.


- Left empty, the plugin shows the automatically installed default buttons.

- Insert any text and the text is shown.

- Instead of text links you may also use buttons. Just insert the name of the image-file you want to be used (including the suffix). The plugin detects .jpg, .gif and .png and searches for the corresponding file in the set folder (we will set this a little later, by default it is "/images/stories/besps_buttons"). If the file exists, the image is shown.


20.) If you activate "Show captions?", you have the possibility to add Title and Text to your images.


Even when deactivated, Captions can be used to replace the (otherwise used by default) image filename as ALT-, TITLE-text.


21.) "Position of Captions" sets if the captions (and text) are shown crossfading over the lower part of the image or below the image.


22.) "Use links?" allows - if activated - to set links for the images.


23.) Image root configures the path to the folder you are uploading (directly or stored in subfolders) your images. By default this parameter is set to /images/stories/ (and this folder is also used when the parameter is empty). In most cases this setting will fit your needs and there is no reason to change it. Only if you have organized your images in a folder structure outside of /images/stories/, put the path here.
The set value of this parameter will be added to the folder name you insert in the code in your article automatically by the plugin and must not be repeated in the article.


24.) Buttonfolder
If you are going to use custom buttons for the navigation between sets, this is the place to put the path to the folder you uploaded this buttons. By default this parameter is set to /images/stories/besps_buttons/ (and this folder is also used when the parameter is empty).


25.) Stylesheet

If you have modified the default stylesheet besps.css or want to use a completely different stylesheet, you have the possibility to save it - with a different name - to the folder /plugins/content/plugin_besps and choose it here.
This has the advantage that your renamed stylesheet does not get overwritten during an update like the default stylesheet besps.css.


26.) JavaScript

If you have modified the default JavaScript besps.js or want to use a completely different JavaScript, you have the possibility to save it - with a different name - to the folder /plugins/content/plugin_besps - and choose it here.
This has the advantage that your renamed JavaScript does not get overwritten during an update like the default JavaScript besps.js.

 


27.) Preload

This parameter offers the possibility to reduce the time, the page takes to load by replacing pictures with one small dummy-picture. This "besps.png" comes with the plugin and is stored in the folder /plugins/content/plugin_besps automatically. On pageload the script replaces this dummy with the actual images.

The default setting of the plugin is to load all pictures with your page. If you set a number larger than 3 (the script needs at least 3 pictures to start), the pictures beyond this number will get loaded by the JavaScript on pageload.

 

Samples:
Your folder contains 10 pictures, the parameter is empty, all pictures are loaded with the page.
Your folder contains 10 pictures, the parameter is set to 3, 3 pictures are loaded with the page, 7 by script afterwards.
Your folder contains 10 pictures, the parameter is set to 5, 5 pictures are loaded with the page, 5 by script afterwards. ...

The feature is rather experimental at the moment, the JavaScript does not check if it is showing the real image or the dummy. If you use it, please do extended testing on it. Records about your experiences are most welcome!


28.) The parameter "Foldername as ID" gives you the possibility to set the name of the folder, from which the images are taken, as identity of the surrounding div-container of the slideshow. (id="foldername").



The plugin contains in the folder (Joomla-Installation)/plugins/content/plugin_besps the style sheet besps.css. This style sheet is loaded after the css-settings the plugin writes to the head-section of the page and gives you the possibility to overwrite every single setting. This works anyway and applies to all "simple picture slideshows" on your site.
Setting a unique identity gives you furthermore the possibility to use this identity as a CSS-Selector and use individual styles for one single slideshow .


29.) Activate the plugin


30.) Click "Save" - done


 

Usage


Next we need the images. We upload them to a folder in (Joomla-Installation)/images/stories.


1.) Go to "Site" > "Media Manager"


2.) Navigate to the folder "Media" > "stories"


3.) Create a new subfolder for your images. In this sample I choose the name "simpleslideshow"


4.) Navigate to the new folder.


5.) ... and upload your images to it. The plugin accepts images of type ".jpg", ".gif" and ".png".


6.) optional: If you want to display custom image-buttons for your control-elements, we have to take care of these images too. So, again navigate to the folder "Media" > "stories".

 

And create a folder called besps_buttons. This is the place the plugin looks for the images you set in point 19 (Installation).

And therefore we upload them here.

Notice: The plugin does NOT create this folder automatically.


7.) Next, go to "Article Manager" and open the article you want to display the gallery.


8.) At the place you want the slideshow to be shown insert the code to call it.

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.

How to show title and text with our images or modify the current slideshow from the default-settings in the backend, find out in the second part of this howto (link at the end of the page).


9.) Save - done!


A survey of the possibilities to call, extend and modify galleries with the code in the content item: Howto Plugin Code




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 (41)
Custom navigation buttoms in Simple Picture Slideshow
21 Tuesday, 01 November 2011 19:50
Marco Loiodice

Hello,

we have this website - www.boh2k.com . We are using your slideshow and it works good. We must say that the AddFullAjax extension is also installed and works on our website. The problem is that we cannot make the custom buttons we have placed in the proper directory substitute the original ones.
What may it be the cause ? What may we do to solve ? The SPS version is 1.5.5
Thanks in advance

Cheers
Marco

@Marco Loiodice
Wednesday, 02 November 2011 21:52
A. Berger

Hi Marco!

To use custom buttons,

A) upload the images to a folder within the Joomla! root-folder (lets assume the folder /images/stories/custombuttons and make sure the directory permissions allow the plugin to find the images (755 - folder, 644 - images)

B) make sure that they are of type .jpg, .gif or .png
e.g.:
start.jpg, stop.jpg, next.jpg and previous.jpg

C) insert the image file names as values of the parameters "Start (2)", "Stop (3)", "Back (4)", "Forward(5)"
e.g.:
Start (2): start.jpg
Stop (3): stop.jpg
Back (4): previous.jpg
Forward(5): next.jpg

D) set the parameter "Buttonfolder" to the folder you uploaded your custom buttons
e.g.:
Buttonfolder: /images/stories/custombuttons

That's it!

Best regards
Andreas

Simble Picture Slideshow wird nicht angezeigt
20 Friday, 28 October 2011 15:12
Joomla65

Ich habe die Simble Picture Slideshow runtergeladen, den Plugin aktiviert und alle Einstellungen nach Anleitung vorgenommen.

Mein geschriebener Beitrag wird ordnungsgemäß angezeigt, aber die Slideshow nicht.
Auch die Formel zum Aufrufen der Slideshow
{*besps}simpleslideshow{/besps*}
habe ich eingefügt. Allerdings wird diese Formel im HTML-Text nicht angezeigt.
Warum wird die Slideshow nicht angezeigt?

Ich hoffe mir kann jemand weiter helfen.

@Joomla65
Friday, 28 October 2011 17:28
A. Berger

Hallo Joomla65!

Kann es sein, dass Du in Joomla! den Cache aktiviert hast und eine Version des Artikels siehst, in der der Code einfach noch nicht vorhanden ist? Leer vielleicht mal den kompletten Cache und überprüfe die Seite nochmals. Bleibt das Problem bestehen, dann poste bitte einen Link zur Seite, ich schau mir das gerne an.

Gruß
Andreas

Stop/start on picture-click
19 Friday, 21 October 2011 19:52
Juan

First of all, thanks a lot for this great plug-in. It's amazingly easy to use and results are smooth and beautiful.

I have some question, though. I like the slideshow to be seen at my web without controls (much, much fancier), and let it start when the page loads. But I would like to let the visitor stop and resume the slideshow only by clicking on the image (quite intuitive when no controls are present). Say, someone finds something interesting and wants to stare at it. Clicks on the picture and when it's done with it clicks again to let it run... Is there any way to add this feature or to add some lines to the code to make it happen?

Thanks in advance for your time, and once again for the great plug-in!

Regards.

@Juan
Wednesday, 26 October 2011 12:34
A. Berger

Hi Juan!

No, this is not possbile because the plugin uses the click on the main image for the feature "Links".

Best regards
Andreas

Thanks for the great slider
18 Thursday, 29 September 2011 21:30
j-analphabet

Just wanted to say thank you for the great slider and the description, which makes it even for a beginner on Joomla! possible to get it up and running.

Thanks
17 Thursday, 08 September 2011 11:44
Mads Nielsen

I have just used the slideshow and for me it was quiete easy to make work. I will recommend for everybody. The result is great.


Nothing to fancy, but it is doing its job without any fuss! Thanks,


Mads


http://visitmarstal.dk/joomla/index.php/Billeder/marstal-havn.html

Error messages
16 Wednesday, 29 June 2011 14:09
Barth

Hi Andreas,

I am new to Joomla and find your tutorial very helpfull. It worked immideately, only the image slider is preceded by the following error messages.
Strict Standards: Only variables should be assigned by reference in C:\xampp\htdocs\joomla 16\plugins\content\simplepictureslideshow\simplepictureslideshow.php on line 80
Strict Standards: Non-static method plgContentSimplepictureslideshowHelper::beStrtolower() should not be called statically, assuming $this from incompatible context in C:\xampp\htdocs\joomla 16\plugins\content\simplepictureslideshow\simplepictureslideshow.php on line 108
(repeated several times, for every image I think)

Are these standard errors or have I done something wrong with installing the imageslider.

@Barth
Wednesday, 29 June 2011 20:55
A. Berger

Hi Barth!

What you see are "notices", not "errors" and they are caused by the fact that the Error Reporting Level on your XAMPP is set to "_ALL^E_STRICT".
With this notices PHP tells you (in fact it tells me), that it thinks my code could be improved. The reason why you see these notices, is that the Error Reporting Level in your Joomla! Installation is - probably - set to "Maximum". To change this (on a live site errors should be turned off anyway), log into your Joomla! backend, go to "Site" > "Global Configuration" > "Server" and under "Server Settings" change the setting for "Error Reporting" to "Simple" or just "None".
Having saved the changes, the notices should be gone.


Best regards
Andreas

Animation
15 Tuesday, 28 June 2011 13:05
Phil

I have installed the plug in and use the {*besp}folder{*/besp} (asterisks excluded) in an article but I only get one static image. Even if I click the start button I get the same image. I have followed all other instructions and parameters. What could be wrong?

@Phil
Tuesday, 28 June 2011 19:27
A. Berger

Hi Phil!

One possible reason could be that either the template does not include Joomla! head data at all (does jdoc:include type="head" exist in the index.php of your template?) or that 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 check this, have a look at the source of the page and check if the JavaScript /plugins/content/plugin_besps/besps.js (path goes for Joomla!1.5) is linked from the head of the page.

If this is not the reason, please provide a link to the page, I will have a look at it.

Best regards
Andreas

Simple Picture Slideshow cannot find folder
14 Wednesday, 22 June 2011 00:28
Ellen

I followed your directions exactly and I get this message where the slideshow is suppose to be:

"Simple Picture Slideshow:
Could not find folder /home/content/95/7403895/html/images/sneak_peek_slids/"

The path above is exactly the correct path to where the slides for the slideshow are so I do not understand why Simple Picture Slideshow cannot find it. Please help

@Ellen
Sunday, 26 June 2011 15:24
A. Berger

Hi Ellen!

First, please check the permissions of the folder. They should be set to 755 (folder) and 644 (images).
In addition, open the article that contains the code, switch to HTML-view and check if the code is fragmented with HTML-Tags. If so remove them.
If the problem persists, please provide the code you are using in the article plus a link to the page. I will have a look at it.

Best regards
Andreas

Je ne trouve pas Simple Picture Slideshow
13 Thursday, 16 June 2011 13:13
J

Bonjour,
j'ai effectué l'instal avec succès cependant quand je vais dans "pluggin" je ne trouve pas
Simple Picture Slideshow
comme dans le tuto.

Est ce un probleme connu ? Que puis-je faire ?
Merci

@J
Thursday, 16 June 2011 20:54
A. Berger

Hi J!

No, it is not. What package (file name) did you use for your installation and what Joomla! version are you using?

Best regards
Andreas

slideshow buttons
12 Tuesday, 14 June 2011 01:36
Brian

Is it possible to move the button so that the left button is on the right side of the slide show and the right button is on the right.  Not underneath but on the side of the slideshow?

@brian
Tuesday, 14 June 2011 21:17
A. Berger

Hi Brain!

I have no ready2go solution for this because it is not my preferred layout for this plugin, but of course it is possible to modify the plugin to show the buttons wherever you want. Either modify the stylesheet (/plugins/content/plugin_besps/besps.css) for 1 fixed layout or modify the stylesheet plus the plugin (/plugins/content/besps.php) to change the layout of the plugin in general. The GPL license explicitly allows you to modify it to fit your needs. :)

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 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 179 guests online