EXT: Readable name of your extension¶

What does it do?¶

• Galleria is an image gallery framework, written in JavaScript
• The aim is to simplify the process of creating visually appealing image galleries
• This extension implements the Galleria jQuery plugin as an easy to use frontend plugin
• The Galleria core and a number of themes and add-ons are 100% open source licensed under the MIT license

Features:

[carousel], [history], [fully scalable], [themes], [linkable], [lightbox], [extendable], [image pan],

[t3jquery], [advanced scaling], [keyboard navigation], [ImageMagick/GraphicMagick saling],

[images from DAM], [images from folder], [flickr plugin], [picasa plugin]

Screenshots¶

Installation¶

Simple start¶

• Create new content element “Galleria for TYPO3”
• add some pictures with the upload function, folder, DAM images or DAM categories
• save selection --> thats it!

Basics¶

• For the classic theme there is no configuration needed, a working default configuration is active by installation
• If you want to change the behavior like speed, transition or dimension etc. you have 2 options for doing it:

a) change some values of the static TS constants with the Constant Editor (PLUGIN.TX_DMFGALLERIA) for all inserted galleria elements on the website

b) change your values directly in the plugin options of the flexform. This overwrites the TS config of your plugin for this specific element

FAQ¶

All configuration options are listed at github: https://github.com/aino/galleria

Reference¶

Themes¶

Create your own theme:

If you'd like to create your own re-useable theme, Galleria provides a codex for that too. Using the static function Galleria.addTheme( [theme object] ), you can add custom theme functionality and css to create your own custom theme. A good way to start is to have a look at some of the free themes in the Galleria package and see how it's done.

A simple theme can be created like this:

• create a directory in your galleria theme directory called 'my_theme'
• create a new css file called galleria.my_theme.css. Save in the folder you just created.
• create a new js file called galleria.my_theme.js ad save in the same directory. Add the following example code:

Galleria.addTheme({

name: 'my theme',

author: 'John Doe, http://example.com',

version: 1,

css: 'galleria.my_theme.css',

defaults: {

// add your own default options here

transition: 'fade',

imagecrop: true,

// custom theme-specific options should begin with underscore:

_my_color: 'yellow'

},

init: function(options) {

/*

The init function get's called when galleria is ready.

You have access to all public methods and events in here

this = gallery instance

options = gallery options (including custom options)

*/

// set the container's background to the theme-specific _my_color option:

this.$('container').css('background-color', options._my_color);

// bind a loader animation:

this.bind(Galleria.LOADSTART, function(e) {

if (!e.cached) {

this.$('loader').show();

}

});

this.bind(Galleria.LOADFINISH, function(e) {

this.$('loader').hide();

});

}

});

• point the file.jQueryGalleriaTheme to the file like this: fileadmin /galleria-theme/my_theme/galleria.my_theme.js
• for more information: https://github.com/aino/galleria

Extend Galleria¶

You can easily extend the Galleria with some individual jQuery code. Here a simple example, how you can add the play() method of Galleria to the DOM element with the id=”play”. The keyword gallery represents the instance of Galleria and all methods can get bind to elements. (More examples: https://github.com/aino/galleria )

Flickr Plugin¶

For the flickr plugin you have the choice of following methods, how to catch images from:

Picasa Plugin¶

For the picasa plugin you have the choice of following methods, how to catch images from:

Set up for a full-size image slideshow¶

Insert the Plugin with the following configuration: General: - add at least 2 images Display: - Set width/height of the the gallery Scale/Position: - Set Position of the image to "top left" Carousel: - Set Render thumbnails to "false"- Disable enable next/prev, thumb follows Effects: - Autoscroll (example): "30" modify your css: /* set default image to avoid flash on load */.galleria-container {background: #color url(/uploads/tx_dmfgalleria/default.jpg) no-repeat;}/* full size image display */.galleria-stage {bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;}

Thanks to Bernhard for this HowTo!

Place Info-Text into a different container outside galleria¶

Place somewhere an empty container and give it a unique ID. Example: <div id=”infoBox”></div>

Hide the inbuilt info text over TS constants or inside of the plugin (optional, maybe you want both...)

Copy the classic theme folder from “EXT:dmf_galleria/res/js/themes/classic” somewhere into the fileadmin and select the theme over TS constants (plugin.tx_dmfgalleria_pi1.file.jQueryGalleriaTheme) or inside of the plugin configuration (Select individual theme)

Paste somewhere inside of galleria.classic.js ( init: function(options) { … }) following code:

this.bind(Galleria.IMAGE,function(e){

var title = description = '';

$.each(this.getData('title'),function(index,val){

if(index=="title"&&val){

title = '<strong>'+val+'</strong>';

}

if(index=="description"&&val){

description = '<p>'+val+'</p>';

}

});

//here comes the individual ID of the container, in this example “infoBox”

$("#infoBox").html(title+description);

});

Use HTML Content instead of pictures¶

Upload somewhere in your filesystem the *.html files

Link to the html file row per row inside of the description textarea field in the flexform of the plugin like:

fileadmin/imagemaps/map1.html

fileadmin/imagemaps/map2.html

Copy the classic theme folder from “EXT:dmf_galleria/res/js/themes/classic” somewhere into the fileadmin and select the theme over TS constants (plugin.tx_dmfgalleria_pi1.file.jQueryGalleriaTheme) or inside of the plugin configuration (Select individual theme)

Paste somewhere inside of galleria.classic.js ( init: function(options) { … }) following code:

// container for a html imagemap:this.addElement('imageMap');// prepend object imageMap before stagethis.prependChild('stage','imageMap');this.bind(Galleria.IMAGE, function(e) {

var description = '';var indize = this.getIndex();var data = this.getData(indize);var dataTitle = data.title;var bool = dataTitle.search(".html");if (bool != -1) {$(this.get('imageMap')).load(data.title);}else {$(this.get('imageMap')).html("");}});

At the final step you have to modify your css, for example give the stage container a display:none, that you dont have doubled content, pictures and html once. You may also can do it inside of your galleria.classic.js with $('.galleria-stage').hide().

Prevent user from clicking or downloading images¶

This CSS solution prevent a div layer over the images, that a user cannot use right-click to download the images directly:

.galleria-images:after {

content: ".";

position:absolute;

left:5%;

z-index:10000;

height:100%;

width:90%;

background:transparent;

}

Credits are going to Andreas Meyer , thanks for sharing this solution!

((generated))¶