Pictures Plugin for CMSimple

IntroductionBack to top

This plugin is designed to simplify the management and frontend presentation of image galleries. The plugin allows uploading images to different categories and displaying them using different so called "drivers". Currently supported drivers are:

All drivers are high configurable. The plugin supports multiple galleries with different drivers on one CMSimple page.

Additionally different lightbox clones are supported and can be configured gallery independant.

Pictures frontend view using the table driver.

VersionBack to top

This is currently version 1.0.3 of the plugin, released January 6th 2018.

RequirementsBack to top

PHPBack to top

Currently the plugin works using fputcsv(), fgetcsv() so a PHP version 5 or higher is required (and is recommended).

Supported CMSimple versionsBack to top

jQuery4CMSimpleBack to top

The plugin will work without jQuery4CMSimple, but the use of jQuery4CMSimple is highly recommended!

Get jQuery4CMSimple: jQuery4CMSimple

The plugin uses jQuery4CMSimple if available. This will reduce the possibility of clashes with other plugins and improve the site's web performance, because jQuery and used plugins are included only once.

InstallationBack to top

Note that in CMSimple 4.7 or later, the CRSF protection needs to be disabled in order change configuration options. This means setting $cf['use']['csrf_protection']="false"; in cmsimple/config.php.

CMSimple XHBack to top

CMSimple 3.3 and CMSimple LEBack to top

This installation guide is left from older versions. This version does not support CMSimple LE and the original CMSimple, see supported CMSimple versions.

The images are taken in CMSimple 3.3, but should help installing the plugin in CMSimple LE, too.

$cf['plugins']['folder'] = "plugins";
CMSimple 3.3 settings. CMSimple plugins_folder configuration.

ConfigurationBack to top

Configuration can either be done by directly editing config.php or by using the backend.

GeneralBack to top

Some general notes about configuration:

Configuration optionsBack to top

General gallery-independant options:

There is no need to edit csv_filepath, csv_delimiter, images_folder and csv_delimiter. Important: Do not edit these settings in production environment, all old gallery configurations will not be read correctly.

The following options are dependant on the gallery. They can be adjusted for each gallery individual.

Driver options independant of the gallery:

How to change CMSimple images folderBack to top

Do not forget the ending '/'.

In CMSimple backend:

Edit CMSimple configuration. Edit CMSimple images folder.

By editing config.php:

$cf['folders']['images']="images/";

Custom sort functionsBack to top

Implement custom sort functions in pictures.php as follows:

if (!function_exists('pictures_sort_desc'))
{
	/**
	 * Function to order news desc by their date. 
	 * 
	 * @param array a
	 * @param array b
	 * 
	 * @return  order
	 */
	function pictures_sort_desc($a, $b)
	{
	    if ($a->name() == $b->name())
		{
	        return 0;
	    }
	    return strcmp($a->name(), $b->name()) < 0 ? 1 : -1;
	}
}

$a and $b are two variables of class Pictures_Image. The following methods are available for sorting:

$image->name() // Get the image file name.
$image->file() // Full file path.

The configuration fileBack to top

/**
 * Subfolder for galleries. Automatically created in the images folder defined by CMSimple config.
 * @warning Without '/' at the end.
 * @var	
 */
$plugin_cf["pictures"]["images_folder"] = "galleries";
/**
 * Filepath for storing gallery CSV.
 * @var
 */
$plugin_cf["pictures"]["csv_filepath"] = "content/plugins/pictures";
/**
 * Acceptable image types. Seperated by ','.
 * @var
 */
$plugin_cf["pictures"]["images_extensions"] = "jpg,jpeg,png,gif,PNG,JPEG,JPG,GIF";
/**
 * Width for thumbnails.
 * @var
 */
$plugin_cf["pictures"]["images_thumbnail_width"] = "300";
/**
 * Extension type for created thumbnails.
 * @var
 */
$plugin_cf["pictures"]["images_thumbnail_extension"] = "png";
/**
 * Comrpession(quality) rate for thumbnails.
 * For png mode: between 0 and 10 with 0 no compression and 10 highest compression.
 * For jpeg mode: between 0 and 100 with 0 lowest quality and 100 highest quality.
 * @var
 */
$plugin_cf["pictures"]["images_thumbnail_compression"] = "9";
/**
 * Comrpession rate for thumbnails.
 * @var
 */
$plugin_cf["pictures"]["images_sort_function"] = "pictures_sort_asc";
/**
 * Delimiter for CSV files.
 * @var
 */
$plugin_cf["pictures"]["csv_delimiter"] = "#";
/**
 * Enclosure for CSV files.
 * @var
 */
$plugin_cf["pictures"]["csv_enclosure"] = "\"";

/**
 * Table driver default values.
 */
/**
 * Number of thumbnails in a row.
 * @var
 */
$plugin_cf["pictures"]["table_columns"] = 3;

/**
 * Coinslider driver default values.
 */
/**
 * Width of slider.
 * @var
 */
$plugin_cf["pictures"]["coinslider_width"] = "300";
/**
 * Height of slider.
 * @var
 */
$plugin_cf["pictures"]["coinslider_height"] = "225";
/**
 * Squares per width.
 * @var
 */
$plugin_cf["pictures"]["coinslider_spw"] = "7";
/**
 * Squares per height.
 * @var
 */
$plugin_cf["pictures"]["coinslider_sph"] = "5";
/**
 * Time between images.
 * @var
 */
$plugin_cf["pictures"]["coinslider_delay"] = "3000";
/**
 * Time between squares in ms.
 * @var
 */
$plugin_cf["pictures"]["coinslider_s_delay"] = "30";
/**
 * Opacity of title and navigation.
 * @var
 */
$plugin_cf["pictures"]["coinslider_opacity"] = "0.7";
/**
 * Speed of title appearance.
 * @var
 */
$plugin_cf["pictures"]["coinslider_title_speed"] = "500";
/**
 * Used effect: random, swirl, rain, straight (or empty).
 * @var
 */
$plugin_cf["pictures"]["coinslider_effect"] = "";
/**
 * The navigation below the slider, next and previous buttons.
 * @var
 */
$plugin_cf["pictures"]["coinslider_navigation"] = "true";
/**
 * Pause on hover.
 * @var
 */
$plugin_cf["pictures"]["coinslider_hover_pause"] = "true";
/**
 * Text displayed for next button.
 * @var
 */
$plugin_cf["pictures"]["coinslider_text_next"] = "vor";
/**
 * Text displayed for next button.
 * @var
 */
$plugin_cf["pictures"]["coinslider_text_prev"] = "zurück";

/**
 * Bxslider driver default values.
 */
/**
 * Used mode: 'horizontal', 'vertical', 'fade'.
 * @var
 */
$plugin_cf["pictures"]["bxslider_mode"] = "horizontal";
/**
 * Speed in ms.
 * @var
 */
$plugin_cf["pictures"]["bxslider_speed"] = "500";
/**
 * Defines infinite looping. 'true' or 'false'.
 */
$plugin_cf["pictures"]["bxslider_infinite_loop"] = "true";
/**
 * Display controls (previous and next).
 * @var
 */
$plugin_cf["pictures"]["bxslider_controls"] = "false";
/**
 * Enable/disable random slide.
 * @var
 */
$plugin_cf["pictures"]["bxslider_random"] = "false";
/**
 * Hide "next" image at the end and "previous" image at the start.
 * @var
 */
$plugin_cf["pictures"]["bxslider_hide_controls_on_end"] = "false";
/**
 * Enable auto slide.
 * @var
 */
$plugin_cf["pictures"]["bxslider_auto"] = "false";
/**
 * Show auto controls.
 * @var
 */
$plugin_cf["pictures"]["bxslider_auto_controls"] = "false";
/**
 * Delay between images in ms.
 * @var
 */
$plugin_cf["pictures"]["bxslider_auto_delay"] = "3000";
/**
 * Delay before starting the auto slider
 * @var
 */
$plugin_cf["pictures"]["bxslider_auto_start_delay"] = "500";
/**
 * Pause on hover.
 * @var
 */
$plugin_cf["pictures"]["bxslider_hover_pause"] = "true";
/**
 * Should slider start automatically or should be waited for start control to be pressed? 'true' or 'false'.
 * @var
 */
$plugin_cf["pictures"]["bxslider_auto_start"] = "true";
/**
 * Enable page navigation.
 * @var
 */
$plugin_cf["pictures"]["bxslider_pager"] = "true";
/**
 * Location of the pager. 'top' or 'bottom'.
 * @var
 */
$plugin_cf["pictures"]["bxslider_pager_location"] = "bottom";
/**
 * Number of shown images at once.
 * @var
 */
$plugin_cf["pictures"]["bxslider_quantity"] = 1;
/**
 * Number of slides to move at once.
 * @var
 */
$plugin_cf["pictures"]["bxslider_quantity_move"] = 1;
/**
 * Show iamges on slider as link with lightbox.
 * @var
 */
$plugin_cf["pictures"]["bxslider_lightbox"] = "true";
/**
 * Include bxslider in template. So bxslider sliders can be added in the template.
 * @var
 */
$plugin_cf["pictures"]["bxslider_template"] = "true";
/**
 * Whether to use the original images instead of the thumbnails in the slider.
 * @var
 */
$plugin_cf["pictures"]["bxslider_original"] = "false";

/**
 * Bxslider 4 driver default values.
 */
/**
 * Minimum number of slides in carousel.
 * @var
 */
$plugin_cf["pictures"]["bxslider4_slides_min"] = 2;
/**
 * Maximum number of slides in carousel.
 * @var
 */
$plugin_cf["pictures"]["bxslider4_slides_max"] = 3;
/**
 * Minimum number of slides in carousel.
 * @var
 */
$plugin_cf["pictures"]["bxslider4_slides_margin"] = 10;
/**
 * Whether to use the original images instead of the thumbnails in the slider.
 * @var
 */
$plugin_cf["pictures"]["bxslider4_original"] = "false";
/**
 * Show iamges on slider as link with lightbox.
 * @var
 */
$plugin_cf["pictures"]["bxslider4_lightbox"] = "true";
/**
 * How many slides to move at once.
 * @var
 */
$plugin_cf["pictures"]["bxslider4_slides_move"] = 1;
/**
 * Include bxslider4 in template. So bxslider4 sliders can be added in the template.
 * @var
 */
$plugin_cf["pictures"]["bxslider4_template"] = "true";
   
/**
 * Lightboxes configuration and drivers.
 */
/**
 * Used driver for lightbox. Avaiable: 'lightbox', 'shutter', 'prettyphoto'.
 * @var
 */
$plugin_cf["pictures"]["lightbox_driver"] = "lightbox";
/**
 * Prettyphoto theme.
 * Themes available: pp_default / light_rounded / dark_rounded / light_square / dark_square / facebook
 * @var
 */
$plugin_cf["pictures"]["lightbox_prettyphoto_theme"] = "pp_default";
	
/**
 * Innerfade driver default values.
 */
/**
 * Speed in ms.
 * @var
 */
$plugin_cf["pictures"]["innerfade_speed"] = "2000";
/**
 * Timeout in ms.
 * @var
 */
$plugin_cf["pictures"]["innerfade_timeout"] = "500";
/**
 * 'sequence' or 'random'.
 * @var
 */
$plugin_cf["pictures"]["innerfade_type"] = "sequence";
/**
 * Include bxslider in template. So bxslider sldiers can be added in the template.
 * @var
 */
$plugin_cf["pictures"]["innerfade_template"] = "true";

Backend configurationBack to top

See the help texts of the options to see if your changes are valid.

Backend configuration.

UsageBack to top

Calling the pluginBack to top

For calling the plugin on some of your pages use one of the following scripts:

The function expects two parameters: The first one defines the gallery (string, not empty), the second one defines the used driver (string, default is 'table').

DriversBack to top

The plugin supports different so called "drivers", meaning different kinds of gallery presentation.

A small introduction into the different dirvers:

Notes on the driversBack to top

Coinslider

The coinslider jQuery plugin is having problems with uplaoded images having whitespace in it. There is currently no funcitonality included in this plugin automatically renaming the images on upload, because the upload via filebrowser should be the same result as uploading through the plugin. So If you are aimed for using coinlsider make sure the filenames do not contain whitespace characters.

Using in a templateBack to top

Currently the following drivers are supported for usage in tempaltes:

Especially Bxslider should be interesting.

Using Bxslider in templates

For using Bxslider in templates there is an additional option:

The last option tells the plugin to include all necessary scripts in the template.

Using Innerfade in templates

Similar for using Bxslider in a template there is the same additional option for using innerfade in a template:

LightboxesBack to top

There are different lightbox clonse supported:

The used lightbox can be configured in the gallery settings. See the available configuration options.

Usage and Configuration examplesBack to top

Each gallery can be configured individually, allowing to use different thumbnail sizes and settings for the drivers. Multiple galleries on one CMSimple page are supported. Also different drivers of the same gallery on one page are supported. See some configuration examples below.

Table driverBack to top

The table driver is a very simple art of gallery presentation. It supports images of different aspect ratio without problems.

The example CSS:

/* Table driver. */
.pictures-frontend .pictures-table-driver td{
	padding: .5em;
}

.pictures-frontend .pictures-table-driver td a img{
	padding: 5px 5px 10px 5px;
	background: black;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius: 10px;
}

pictures-table-driver is the class of the table. The single cells and their images can simply be styled by there selectors like seen above. The width of the cells are depending on the thumbnail width and the set padding, the height of a row is defined by the highest image of the row.

There is only one configuration key concerning the table driver: The number of columns. Set the option in the gallery-configuration:

Define the number of columns.

This settings and the CSS should result in a gallery like this:

The result.

Coinslider driverBack to top

For using the coinslider driver there should no styling be needed (except the surrounding div). Nevertheless the following class is provided:

/* Coinslider driver. */
.pictures-frontend .pictures-coinslider-driver {
	margin: 1em auto;
}

Concerning the coinslider driver there are a lot of options (see Configuration Options). In this example we want to create a simple slider using only images in the same aspect ratio.

Coinslider configuration options.

First set width and height of the slider. The width should match the set thumbnail width. The height can be calculated with the aspect ratio of the images.

The delay between the images could be adjusted and the number and speed of squares concerning the transition effect.

There are following effects supported: 'random' (a random effect), 'swirl', 'straight' and 'rain'. Try them to select your favorite. The option can also be left empty, then the default 'random' will be set.

The slider should have a simple navigation below the driver, so set "Navigation" to "true" (case-sensitive).

The slider should pause on mouse over, so set "Pause on hover" to "true" (case-sensitive).

These settings will result in a slider like this:

The resulting slider.

Bxslider driverBack to top

The Bxslider could be used similar to coinslider, but more interesting is its usage as carousel. There are a lot of options for individual styling:

/* Bxslider driver. */
/* Important: No marign and padding on bxslider ul and li. */
.pictures-frontend .pictures-bxslider-driver {
	margin: 0 40px;
	width: 660px;
}

/* Main window containing the ul (not the controls and pager). */
.pictures-frontend .pictures-bxslider-driver .bx-window {
	
}

/* Main li. */
.pictures-frontend .pictures-bxslider-driver .bx-window li {
	
}

/* Previous control. */
.pictures-frontend .pictures-bxslider-driver .bx-prev {
	float: left;
	position: absolute;
	left: -40px;
	top: 60px;
}

/* Next control. */
.pictures-frontend .pictures-bxslider-driver .bx-next {
	float: right;
	position: absolute;
	right: -40px;
	top: 60px;
}

/* Pager div. */
.pictures-frontend .pictures-bxslider-driver .bx-pager {
	margin: .5em auto;
	text-align: center;
}

/* Anchors of the pager. */
.pictures-frontend .pictures-bxslider-driver .bx-pager .pager-link {
	margin: .5em;
}

/* Active pager link. */
.pictures-frontend .pictures-bxslider-driver .bx-pager .pager-active {
	
}

The navigation and controls can be styled using the given classes (see Custom styling).

There are a lot of options to setup Bxslider, here a small example to setup a carousel with navigation and controls:

The controls (next and previous) are icons located in plugins/pictures/images/bxslider. They are named next.png and previous.png. They can be exchanged by maintaining their filename. The icons will automatically be used as controls if controls are enabled.

The carousel looks best if images of the same aspect ratio are used.

With this options and the styling from above the result should look like this:

The resulting bxslider.

With mode 'vertical' the slider could look like this (without next and previous but with pager):

The resulting bxslider.

Bxslider4 driverBack to top

For the 4th version of BxSlider there are currently only a few options available to build sliders/carousels.

See the following CSS which looks similar to the official stylesheet provided by BXSlider 4.

.bx-wrapper {
	position: relative;
	margin: 0 auto 60px;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	border: solid #989D9D 3px;
	left: -5px;
	background: #989D9D;
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -30px;
	width: 100%;
}

.bx-wrapper .bx-prev {
	left: -40px;
}

.bx-wrapper .bx-next {
	right: -40px;
}

.bx-wrapper .bx-controls-direction a {
	color: #989D9D;
	position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 21px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9;
	border: none;
	padding: 0;
}

.bx-wrapper .bx-controls-direction a img {
	color: #989D9D;
	border: none !important;
	border-color: transparent;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}

Set the following configuration in your gallery:

The driver will automatically take the next.png and previous.png within images/bxslider/ for the controls.

The result:

The resulting bxslider4.

Bxslider driver in templatesBack to top

Like mentioned here the bxslider driver is supported for usage in the template. This example should give a breif overview.

Today sliders are popular especially on the start page of some websites. Often the visitor gets to see a big slider.

Add the following code to yout template:

<?php if ($s == 0): ?>
<?php echo pictures('theaser', 'bxslider', TRUE); ?>
<?php endif; ?>

For example above the content area. The sldier will now be included in the template of the start page.

The confituration options are the same as shown in the example above. The slider will automatically scale to the needed width. Take images of same width and height.

To hide all controls and set auto mode make following configuration:

Innerfade driverBack to top

The innerfade driver is quite simple. There are only three configuration option sto consider:

Note that here, too, the used images should have the same aspect ratio. And that's all. There are not many possiblities to configure the innerfade driver or style its appearance.

Innerfade driver in templatesBack to top

To use the innerfade driver in templates follow the instructions here. Then just call the plugin in the template:

<?php echo pictures('galleryname', 'innerfade', TRUE); ?>

Missing is only some styling depending on your template.

Empty galleriesBack to top

Depending on the used driver and the styling (CSS) empty galleries are handled differently:

ThumbnailsBack to top

Thumbnails will be generated on the fly. So after uplaoding a fresh set of images the first time the frontend output of the plugin is loaded the thumbnails will be generated using the specified thumbnail widht of the gallery.

After changing the thumbnail width in the gallery configuration do not forget refreshing the thumbnails of the gallery.

Why my thumbnails have not changed after changing the thumbnail width?

Some browsers cache the images of the galleries. So after changing the thumbnail width try to reload the plugin's output using F5 / Strg+R (reload page) or Strg+F5 / Strg+Shift+R (reload page overwriting the cache). These shortcuts my differ from browser to browser.

Shortcut tables:

BackendBack to top

Select the plugin in your CMSimple backend. You will see some information about the plugin:

Pictures information of installed version.

Click "Manage galleries" in the toolbar.

The first thing to do is to create a gallery.

Create the first gallery.

GalleriesBack to top

There are following options for managing the galleries:

Options for managing galleries.

New galleryBack to top

It is recommended to use a name without any whitespace or special characters. The gallery name is used as folder name, so use only valid names for folders.

Click the button for a new gallery seen above. The form is the same as for creating the first gallery.

Successfully created gallery.

Gallery settingsBack to top

Each gallery has its own settings concerning the different drivers. Click the settings buttonto edit them:

Settings button. Settings button.
Gallery settings.

After saving them:

Saved settings.

Do not forget to refresh the thumbnails after editing the thumbnail width of a gallery.

Regenerate thumbnailsBack to top

To regenerate the thumbnails of the selected gallery press the appropriate button. A message will be shown that the thumbnails have been regenerated:

Regenerate thumbnails button. Regenerate thumbnails button.
Refreshed thumbnails.

Delete galleryBack to top

To delete the selected gallery use the delete button. You will be asked if you are sure you want to delete the gallery with all its images:

Delete gallery button. Delete gallery button.
Delete gallery.

Press "I'm sure." and the gallery will be removed.

Gallery deleted.

ImagesBack to top

There are following options for managing the images of a gallery:

Add imageBack to top

Adding images can be done by using the plugin's interface to upload new files or by using CMSimple's filebrowser.

Using filebrowser

There are several filebrowser avaiable for CMSimple. Using one of the filebrowser oyu can simply upload the image to the appropriate gallery folder in your images folder. The gallery folder is named like the gallery.

Using plugin

To add a new image using the plugin's interface click the following button:

Add image button. Add image button.
Options for managing galleries.

A form will open and you can select a file for upload. The plugin will check for the correct image type.

Uploaded image.

Thumbnail previewBack to top

To get a preview of the generated thumbnail click the following button:

Image preview button. Image preview button.
Thumbnail preview.

Delete imageBack to top

To delete an image click the delete button. You will get asked if you are sure you want to delete the image:

Delete image button. Delete image button.
Delete the image.

A message will be shown that the image was successfully deleted.

Deleted the image.

Custom stylingBack to top

Custom styling can either be sdone in the templates stylesheet or by modifying the plugin's stylesheet. The plugin's stylesheet is located in plugins/pictures/css. Delete the frontend part in the stylesheet of the plugin if you want to do custom styling in the template's stylesheet.

The frontend part of the stylesheet looks like this:

/* Pictures frontend div. */
.pictures-frontent {
	
}

/* Table driver. */
.pictures-frontend .pictures-table-driver td{
	padding: 5px;
}

.pictures-frontend .pictures-table-driver td a img{
	padding: 4px;
	border: 1px solid #777777;
}

.pictures-frontend .pictures-table-driver td a img:hover {
	
}

/* List driver. */
.pictures-frontend .pictures-list-driver {
	
}

/* Coinslider driver. */
.pictures-frontend .pictures-coinslider-driver {
	margin: auto;
}

.pictures-frontend .pictures-coinslider-driver a{
	
}

/* Bxslider driver. */
/* Important: No marign and padding on bxslider ul and li. */
.pictures-frontend .pictures-bxslider-driver {
	
}

/* Main window containing the ul (not the controls and pager). */
.pictures-frontend .pictures-bxslider-driver .bx-window {
	
}

/* Main li. */
.pictures-frontend .pictures-bxslider-driver .bx-window li {
	
}

/* Previous control. */
.pictures-frontend .pictures-bxslider-driver .bx-prev {
	float: left;
	position: absolute;
	left: -40px;
	top: 60px;
}

/* Next control. */
.pictures-frontend .pictures-bxslider-driver .bx-next {
	float: right;
	position: absolute;
	right: -40px;
	top: 60px;
}

/* Pager div. */
.pictures-frontend .pictures-bxslider-driver .bx-pager {
	margin: .5em auto;
	text-align: center;
}

/* Anchors of the pager. */
.pictures-frontend .pictures-bxslider-driver .bx-pager .pager-link {
	margin: .5em;
}

/* Active pager link. */
.pictures-frontend .pictures-bxslider-driver .bx-pager .pager-active {
	
}

/* Auto controls. */
.pictures-frontend .pictures-bxslider-driver .bx-auto {
	
}

/* The start control anchor. */
/* Additionally the anchor has the class "start" or "stop" dependant on the current state. */
.pictures-frontend .pictures-bxslider-driver .bx-auto .bx-start {
	
}

/* Bxslider 4 driver. */
/* Main div containing the slider. */
.pictures-frontend .pictures-bxslider4-driver {
	
}

/* Controls for navigation. */
.pictures-frontend .pictures-bxslider4-driver-controls {
	
}

/* Innerfade driver. */
/* This is the ul element containing the images. */
.picutres-frontend .pictures-innerfade-driver {
	height: 500px;
}

.pictures-frontend .pictures-innerfade-driver li {
	
}

Classes:

IconsBack to top

All icons used in the backend of this plugin are part of the spirit20 icons set (licensed under GPL). See here For the complete set. Thanks to Dale Morrell for this great set of icons!

The icons included for the bxslider driver are part of the iconic icon set. See here.

ChangelogBack to top

Version 1.0Back to top

Version 1.0.3

Version 1.0.2

Version 1.0.1

Version 1.0.0

Beta 14.

Beta 13.

Beta 12.

Beta 11.

Beta 10.

Beta 9.

Beta 8.

Beta 7.

Up to beta 6.

LicenseBack to top

The plugin's licenseBack to top

Copyright 2012, 2013 David Stutz

The plugin is published under the GNU Public License Version 3. For more information see: GNU Licenses

The plugin is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

The plugin is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

jQueryBack to top

See here for license information.

CoinsliderBack to top

A slightly modified version is used for the plugin.

See here for license information.

BxsliderBack to top

See here for license information.

LightboxBack to top

See here for license information.

Shutter reloadedBack to top

A slightly modified version is used for the plugin.

See here for license information.

prettyPhotoBack to top

See here for license information.