Contact:visionlore@gmail.com

Modular Gallery r0.6

(Free Script Library)
DOWNLOAD: JS Library

Modular Gallery is not like any other JavaScript galleries. It's a library to build galleries in modular way, but generally mods can be used not only for galleries. This new solution gives you ability to build your own gallery fast without any limits - now you don't need to adjust your website to specific gallery, because in few steps you can create gallery that will fit to your website and vision perfectly. This solution requires basic programmings skills but gives you great amount of posibilities. See examples standard and wall and remember - how gallery will look and work depends completely on you.

We doesn't have huge library of modules right now, but it's flexible anyway and because of that and fast development focused on specific results, not every possibility of use have been tested.
To create list of miniatures you can use HTML (like in wall example) or javscript (like in standard example). This Library requires new jQery 2.1 or above. For now it works only with images, but it can be extended to recognize more file types.
If you have some questions or want to inform us about something, then simply write to us.
Use facebook if you want to be notified about new releases.

Example on video below shows the simplest way to use Modular Gallery (be aware that this is first release)

Releases:

r0.6

- removed files: MGCoreDefault.js, MGFormat.js, MGFormatDefault.js, mgFormatList.js. Now everything is just in MGCore.js which should be less confusing. MGCore.js holds MGCore class and MGFormat class with default format list.

- fixed bug with unexpected overriding for addFormat method in MGFormat class

- implemented new initialization system and more detailed and advanced debugging and autofix for modules.
MGCore have properties to enable/disable console logs, warns and errors separately.
Default values:
     core.enableConsole.log = false
     core.enableConsole.warn = true
     core.enableConsole.error = true

- now you can use simplified gallery list like core.list = ['img1.jpg', 'img2.jpg'] that gonna be automatically converted to proper format

- performance optimizations in specific modules

- removed aniStart and aniComplete from MGNavScroll constructor (but still exists in properties)

- added aniStart and aniComplete for MGNavBtn

- fixed bug with core access for some modules

- improved MGStyleActive response when clicking on thumbnails that are not ready (not loaded)

r0.5

- format auto detection is no longer sensitive to cache management via url. URLs like "mypics/picture.jpg?11" won't make any trouble

r0.4

- two new much more advanced examples - standard and wall also included to download

- multiview - now you can prepare more views with different names on one instance and switch between them simply by changing name

- update for "MGThumbn"
  • new method loadon(url, o, permanent, unload)
     Use without parameters to simply reload
     "url" (string) parameter to load from specific url
     "o" (number or object from MGCore list) to jump to this object
     "permanent" (boolean) set to "true" if you want permanently change url of current MGCore list object
     "unload" (boolean) set to "true" if you want to use "unload" function before next load

- update for "MGNavBtn"
  • changed parameters MGNavBtn(fBtn, bBtn, moveTarget, calcTarget, distance, speed, status, vertical, margin, aniType)
     By default (null) calcTarget = moveTarget
     "moveTarget" - object to move
     "calcTarget" - miniatures or similar elements
  • new method "reset()" gives you ability to fix/recalculate position

- update for "MGNavScroll"
  • changed parameters MGNavScroll(wheelDetector, moveTarget, calcTarget, distance, speed, status, vertical, margin, aniType, aniComplete, aniStart)
     By default (null) calcTarget = moveTarget
     "moveTarget" - object to move
     "calcTarget" - miniatures or similar elements
  • new method "reset()" gives you ability to fix/recalculate position

- update for "MGFit"
  • changed parameters MGFit(centerH, centerV, centerByPerc, rescale, rescIfBigger, rescIfSmaller, toWidth, toHeight, extraFit, ignoreThis)
     As always parameters have default values and you can read or change them any time (for example: var myFit = new MGFit(); myFit.centerV = false;)
  • new method available "fit()" - gives you ability to fit element whenever you want

r0.3

- new event mod "MGFit" v0.1
   Centering and scaling elements to fit size of parent-container

- new example website
  • fixed bad URLs (because of service issues)
  • more wallpapers (from new service)
  • it's faster (If you have fast connection, then probably you won't see loading animation)
  • full error handling (and few construction changes because of this)
  • images autofit (thanks to new module "MGFit")

- "MGView" updated to version v0.21
  • fixed bug - source of "data" property for events "onComplete" and "onError"
  • fixed bug - "unload" method
  • new property "top" (get object on top - with higher z-index)
  • new property "bottom" (get object hidden below - with lower z-index)
  • new method "topFrom"
  • new method "bottomFrom"
  • improved "load" method (better error handling)
  • improved "onComplete" event (better error handling)

- "MGThumbn" updated to version v0.21
  • fixed bug - source of "data" property for events "onComplete" and "onError"
  • new property "unload"
  • improved "load" method (better error handling)
  • improved "onComplete" event (better error handling)
  • improved "loadAll" method (now it's fully independent process)

- "MGAniAlpha" updated to version v0.11
  • fixed bug - now it works OK with MGView.templateId (parent-containers)
  • new property "crossFade" (default "true" allows "cross fade" effect to appear)
  • improved response when properties are null or undefined

- "MGLoadingImg" updated to version v0.11
  • improvement - hides when error detected

r0.2

- first released version

DOCUMENTATION (for r0.2)

CORE FILES: MGCore, MGCoreDefault
You always need to use one of this core files to manage modules. It's recommended to use MGCoreDefault because it includes MGDefaultFormat and adds all formats to recognize automatically. Because for now there's only one recognition (images) and nothing more to choose, there is no sense in use MGCore - it would only make everything more complex.

FORMAT FILES: MGFormat, MGFormatDefault
MGFormat is necessary to load files because it recognizes formats and builds adequate to format structure. MGFormat won't work alone - you need to take format structures that you will use from mgFormatList (like images, video, sound, etc.) and then add them to MGFormat.
>> If you use MGFormatDefault then you can totally ignore mgFormatList because it has already included whole list from this file.
>> If you use MGCoreDefault then you can totally ignore MGFormat, MGFormatDefault and mgFormatList.

MAIN MODULES: MGThumbn, MGView
Main modules prepares data from Core to specific use. Without them you simply have nothing, so you have to use at least one of them. These modules must have their properties core and unique name specified, but you can automate this process by Core "addMod" method
- MGThumbn - use to create thumbnails
- MGView - use to create single image preview
Main modules have "prepare" method which is very important. Majority of options won't work before preparation is complete, so we need to do it, but before we will use preparation method, we must set "id" and "templateId" properties (templateId only if we use templates).
Everything should go in this order:
1) set properties: "id", "templateId" (if we need it), and if you want "mouseTarget" (because it will work properly no matter when you will use it)
2) use preparation method
3) everything else...

EVENT MODULES: MGAniAlpha, MGLoadingImg, MGStyleActive, MGThumbnToView
Event modules are prepared to react to events of main modules. Main modules have method "addEventMod", which should be used to attach event modules.
>> Not all event modules are fully compatible with all main modules (compatibility depends on used events and properties).
>> One event mod can be used by multiple main mods and if you want to have free access to event mod, at first you should add it to Core mod list by method "addMod".
- MGAniAlpha - adds fadeIn animation to image when load is complete. This way images will appear smoothly
- MGLoadingImg - shows one specified image when loading is in progress and hide it when load is complete
- MGStyleActive - changes style of specified objects when they matches index of last loaded item. This way you can, for example, distinguish/highlight thumbnail that is currently active in preview
- MGThumbnToView - Should be used with MGThumbn or similar modules. Clicked thumbnail will load image to specified module (it must be MGView or other main module with method "load")

STANDARD MODULES: MGNavBtn, MGNavLoad, MGNavScroll
Standard modules are more independent so we don't need to attach them to main modules like event mods. We can keep them wherever we want (because for them everything works through parameters) but I would still recommend to use Core "addMod" for all mods - just to keep everything clear and in one place.
- MGNavBtn - creates next and previous buttons to animate position of specified objects horizontally or vertically
- MGNavLoad - create next and previous buttons to change currently loaded image (it will work with MGView and similar modules)
- MGNavScroll - use mouse scroll to animate position of specified objects horizontally or vertically

Properties shared by all modules (not including Core)

core (MGCore) - main modules won't work without proper value in core property because it holds Core with list that has all basic information. If you use "addMod" method then you don't need to care about it
name (String) - main modules cannot work properly without unique name. If you use "addMod" method then you don't need to care about it.
path (String) - it holds path to module added through "addMod" method.
className (String) - simply holds name of class/function like "MGView", "MGAniAlpha", etc.

Useful static properties

To access static properties we don't use instances but global class/function - for example alert(MGView.version) instead of something like var myView = new MGView(); alert(myView.version)
name - full name of module
shortDescription - yeah :)
version - module version - simple as that...
author - author or authors (author of idea, author of modification 1, author of modification 2)
owner - Visionlore
required - list of required libraries, frameworks etc. (by default should return only "jQuery 2.1.1"). If you want to create module that use something more than jQuery, you should add name of library here
event - access to event names (works only for modules that have event system - like main modules)
format - access to format type names (works only with MGFormat)

DETAILS

MGCore() or MGCoreDefault()

>METHODS<

addMod(module, path)
Adds module to mod property and automatically specifies "core", "name" and "path" parameters for this module (main modules won't work if these parameters are incorrect)
- module (Object) - for example new MGView()
- path (String) - for example "view" or "main.view" or whatever you want. Last part of the path (in our examples it's "view") will be used as a mod's name

getMod(path)
This way you can use path (String) to get specified mod.

>PROPERTIES<

console (Boolean=true)
Set to "false" if you don't want to see console.log informations about some issues

list (Array)
Here you should put list of objects with important data. The most important information is about URL - for example absolute minimum of information would look similar to this: [{url:'01.jpg'}, {url:'02.jpg'}] But of course you can do more - you can add data related to specified main modules and formats or simply some custom data.
Let's say we have two modules with names "thumbnail" and "view" and want to use different URLs for them from single Core. We can do it very easily by using these names as prefixes this way: {thumbnail_url:'01.gif', view_url:'01.jpg'}
Some types of formats can have additional properties - for example movies will have property "autoplay". If you want to change this property globally you can simply use name of format type like this: {video:'autoplay::true'}
And if you want to make changes for multiple properties of specific main module: {thumbnail_video:'autoplay::true | loop::true'}
Another property you can use this way is "id" or "class" - example: {view_class:'.classname'} But we must remember that improper use can create collision with id property from main module and this way module can simply stop working.
The last parameter you can set is "style". You can use it the same way - for example: global {style:'border-width:2px'} and for specific module {view_style:'border-width:2px'}
Custom properties can use any name you want, but properties with names that are used to write information in main modules preparation process can be overwritten. Here is the list of reserved properties:
index - index number
url - global url (will be used for all main modules)
[modName]_url - url for specific module
[formatTypeName] - global properties for format type
[modName]_[formatTypeName] - properties for format type of specific module
id - global id name (HTML DOM)
[modName]_id - id name for specific module
class - global class name (HTML DOM)
[modName]_class - class for specific module
style - global style (CSS)
[modName]_style - style for specific module
[modName]Obj - currently related object (HTML DOM object)
[modName]Format - special format-object (result of autodetection)

extraList (Object)
Here you can put some extra data related to list - for example Core.extraList.custom1 = [data1, data2]
This concept is not complete and can disappear or change in the future

url (String - CSS id or class identification)
This way you expand URL path for each URL in the list
For example if you have Core.url = 'gallery/images/' and Core.list = [{url:'01.jpg'}, {url:'02.jpg'}] then object will be loaded from paths gallery/images/01.jpg and gallery/images/02.jpg
Scheme looks simply like this Core.url+Core.list[i].url

event (Object)
This concept is not complete and can disappear or change in the future

mod (Object)
Returns copy of object "mod" that contains all modules added by method "addMod". This way you can have access to modules more intuitive than by method "getMod" - example: mod.main.view

MGFormat(list) or MGFormatDefault()

MGFormat wont work without "list" (list of format types you want to use) but MGFormatDefault doesn't need it because for this alternative simply all format types are already included.
- list (Array) - array list of format types you want to use (you can find them in file "mgFormatList"). You should transfer from mgFormatList only format types that you want to use - example: new MGFormat([mgFormatList['image'], mgFormatList['video']]);

>METHODS<

Everything that is not covered on this list is not really intended for use

addFormat(format, unshift=false)
Here you can add format types to use
- format (Array or Object) - single object or array of objects from "mgFormatList" (format types)
- unshift (Boolean) - by default unshift = false and new format type will be added to end of array, but order sometimes matters so we have option to add it in to the front of array by changing "unshift" to "true"

getFormat(sn)
Can get format type by name of it (String) or by number (index of Array element)

removeFormat(sn)
Can remove format type by name of it (String) or by number (index of Array element)

MGThumbn(format)

- format (MGFormat) - MGFormat object or similar that can handle format recognition. Without it MGThumbn won't be able to load things so it's absolutely necessary.
>> Remember that you don't have to even think about "format" if you use MGCoreDefault instead of MGCore. When you use MGCoreDefault and "addMod" method then format is added automatically

>METHODS<

Everything that is not covered on this list is not really intended for use

addEvent(name, f)
This way you can add event listener that will trigger your function.
- name (String) - name of event you want to use (you can get whole list of event names from MGThumbn.event)
- f (Function) - your custom function

removeAllEvents()
This way you can remove all event listeners

addEventMod(o, name)
This way you can attach event module to current mod
- o (Object) - event module object
- name (String) - identification name (you need it only if you want to get or remove event mod later)

getEventMod(name)
Use identification name to return event mod object

removeEventMod(name)
Use identification name to remove event mod object

load(o)
Load specified object based on specified Core.list object
- o (Object or Number) - Core.list object or index of this object

loadAll()
Simply load everything from Core.list

prepare(useTrim, clear)
It won't work without "id" set property and minimum one HTML object that use this id. This process automatically prepares things necessary for this module to work - for example it must be done before we start to load things.
Preparation definitely will save your time. There are two ways to build thumbnails:
1. You can create full Core.list and single thumbnail in HTML - this way preparation process will use Core.list to automatically create all the rest of HTML thumbnails
2. You can create all thumbnails in HTML and ignore Core.list - this way preparation process will use HTML thumbnails to automatically create Core.list Array
Cool thing is that all information you can put in to Core.list objects you can put in to HTML thumbnails too - all you need to do is to use "data-" attributes.
All used "data-" attributes will be transferred to Core.list by preparation process - just without "data-" prefix.
Example: <img src="image.jpg" data-view_url="image01.jpg" data-thumbn_url="image01.gif">
- useTrim (Boolean) - default is "false". If "true" then it will remove spacing from start and end of thumbnails
- clear (Boolean) - default is "false". If "true" then it will remove previously created Core.list (use it only if you have all thumbnails in HTML)

isLoaded(o)
Returns "true" if specified Core.list object is already loaded

containerOf(id)
This method returns parent of specified by id object. Id is CSS identifier like for example ".thumbnail" or "#thumbnail".

trim()
It will remove spacing from start and end of thumbnails (must be used after preparation)

>PROPERTIES<

mouseTarget (String)
By this CSS identifier you can change target of mouse events. Default value is "null" which means that mouse events will use "mgthumbn.id".

format (MGFormat)
MGFormat object or similar that can handle format recognition

url (String)
This way you expand URL path for each URL dedicated to this module but it will be expanded after Core.url
Scheme looks simply like this Core.url + thismod.url + Core.list[i].url

id (String)
id is CSS identifier like for example ".thumbnail" or "#thumbnail" or "#gallery .thumbnails .thumbnail"
This identifier will be used in preparation process to define where elements should be loaded

activeId (String - return only)
activeId is CSS identifier like for example ".thumbnail" or "#thumbnail" or "#gallery .thumbnails .thumbnail"
Return only. This is currently used identifier to define where elements should be loaded

templateId (String)
templateId is CSS identifier like for example ".thumbnailTemplate" or "#thumbnailTemplate" or "#gallery .thumbnails .thumbnailTemplate"
This identifier will be used in preparation process to define what should be cloned (prepare - method 2)

activeTemplateId (String - return only)
activeTemplateId is CSS identifier like for example ".thumbnailTemplate" or "#thumbnailTemplate" or "#gallery .thumbnails .thumbnailTemplate"
Return only. This is currently used identifier to define what should be cloned (prepare - method 2)

clicked (Object - return only)
Read only. Object from Core.list that represents last clicked thumbnail. It won't work if there is no even one click event

current (Object - return only)
Read only. Object from Core.list that represents last element you tried to load (no matter if it's successful or not)

eventMod (Object - return only)
Read only. Returns clone of object that contains all attached event modules

isPrepared (Boolean - return only)
Return "true" if this module is already prepared

MGView(format)

- format (MGFormat) - MGFormat object or similar that can handle format recognition. Without it MGView won't be able to load things so it's absolutely necessary.
>> Remember that you don't have to even think about "format" if you use MGCoreDefault instead of MGCore. When you use MGCoreDefault and "addMod" method then format is added automatically.

>METHODS<

>PROPERTIES<

mouseTarget (String)
By this CSS identifier you can change target of mouse events. Default value is "null" which means that mouse events will use "mgthumbn.id".

format (MGFormat)
MGFormat object or similar that can handle format recognition

url (String)
This way you expand URL path for each URL dedicated to this module but it will be expanded after Core.url
Scheme looks simply like this Core.url + thismod.url + Core.list[i].url

id (String)
id is CSS identifier like for example ".view" or "#view" or "#gallery .views .view"
This identifier will be used in preparation process to define where elements should be loaded

activeId (String - return only)
activeId is CSS identifier like for example ".tview" or "#view" or "#gallery .views .view"
Return only. This is currently used identifier to define where elements should be loaded

templateId (String)
templateId is CSS identifier like for example ".viewTemplate" or "#viewTemplate" or "#gallery .views .viewTemplate"
This identifier sometimes can be useful - for example you could be forced to use it for some complex animation mods

activeTemplateId (String - return only)
activeTemplateId is CSS identifier like for example ".viewTemplate" or "#viewTemplate" or "#gallery .views .viewTemplate"
Return only. This is currently used template identifier

clicked (Object - return only)
Read only. Object from Core.list that represents last clicked element of view. It won't work if there is no even one click event

current (Object - return only)
Read only. Object from Core.list that represents last element you tried to load (no matter if it's successful or not)

eventMod (Object - return only)
Read only. Returns clone of object that contains all attached event modules

isPrepared (Boolean - return only)
Return "true" if this module is already prepared

MGNavBtn(fBtn, bBtn, target, distance, speed, status, vertical, margin, aniType)

- fBtn (String) - CSS identifier like for example ".forwardButton" that will scroll/animate position of elements
- bBtn (String) - CSS identifier like for example ".backwardButton" that will scroll/animate position of elements in opposite direction
- target (String) - CSS identifier for objects you want to scroll/animate
- distance (Number) - scroll/animation distance determined by width of element. For example value 3 will scroll 3 images
- speed (Number or null) - speed of animation
- status (Object or null) - status object holds information about current state of animation. You can use the same status object for multiple systems to make them compatible (for example, for proper scrolling same elements via mouse scroll, buttons and keyboard)
- vertical (Boolean or null) - by default animation is horizontal but by changing this property to "true" you can change it to vertical
- margin (Number or null) - you can add margin to change position where animation should stop at the end
- aniType (String or null) - name of jQuery animation type

>PROPERTIES<

current (Number - read only)
State of animation (for example 3 = 3 x pushed forward)

REPEATED:
margin (Number)
status (Object)
forwardBtn (String)
backwardBtn (String)
target (String)
distance (Number)
speed (Number)
vertical (Boolean)

>METHOD<

jump(Number)
Jump to specific animation state (it creates animation)

MGNavLoad(loader, prevBtn, nextBtn, fadeOver, fadeSpeed)

- loader (Object) - object that have "load" method and "current" property (like for example MGView)
- prevBtn (String) - CSS identifier, like for example ".previousButton"
- nextBtn (String) - CSS identifier, like for example ".nextButton"
- fadeOver (Boolean) - if "true", buttons will hide on "mouseleave" and show on "mouseenter"
- fadeSpeed (Number) - speed of fade animation (if "fadeOver" is set to "true")

>PROPERTIES<

REPEATED:
loader (Object)
prevBtn (String)
nextBtn (String)
fadeOver (Boolean)
fadeSpeed (Number)

MGNavScroll(wheelDetector, target, distance, speed, status, vertical, margin, aniType, aniComplete, aniStart)

- wheelDetector (String) - CSS identifier like for example ".space" to find HTML object that will be used to determine when mouse wheel should create animation
- target (String) - CSS identifier for objects you want to scroll/animate
- distance (Number) - scroll/animation distance determined by width of element. For example value 3 will 3 images
- speed (Number) - speed of animation
- status (Object) - status object holds information about current state of animation. You can use the same status object for multiple systems to make them compatible (for example for proper scrolling the same elements via mouse scroll, buttons and keyboard)
- vertical (Boolean) - by default animation is horizontal but by changing this property to "true" you can change it to vertical
- margin (Number) - you can add margin to change position where animation should stop at the end
- aniType (String) - name of jQuery animation type
- aniComplete (Function) - response function for animation-complete event
- aniStart (Function) - response function for animation-start event

>PROPERTIES<

REPEATED:
wheelDetector (Object)
target (String)
distance (String)
speed (Number)
status (Object)
vertical (Boolean)
margin (Number)
aniType (String)
aniComplete (Function)
aniStart (Function)

>METHOD<

jump(Number)
Jump to specific animation state (it creates animation)

MGAniAlpha(speed, resetOnStart, forContainer)

- speed (String) - speed of animation
- resetOnStart (String) - default is "true". Set alpha to 0 when start event triggered
- forContainer (Number) - default is "false". If "true" then animation will work with container of loaded element

>PROPERTIES<

REPEATED:
speed (String)
resetOnStart (String)
forContainer (Number)

MGLoadingImg(img, speed)

- img (String) - CSS identifier for HTML object that will be used
- speed (Number) - speed of animation

>PROPERTIES<

REPEATED:
speed (String)
resetOnStart (String)

MGStyleActive(thumbn, style, start, target)

- thumbn (Object or null) - module with elements to click (with event click) like for example MGThumbn. Use null to remove connection (you should set this to null if you don't need this mod anymore)
- style (Object) - jquery style object. For example: {'border-width':'4px', 'border-color','red'}
- start (Number or null) - select by index (Number) object that should be changed by style right now (so you can make change from code and don't need to wait until user will click element)
- target (String) - default is "this". Use "this" or "parent" string if you want to use HTML objects referred to Core.list or CSS identifier if you want to use custom HTML objects

>PROPERTIES<

REPEATED:
thumbn (Object or null)
style (Object)
start (Number or null)
target (String)

MGThumbnToView(view)

- view (Object) - object like MGView that have method "load" (load will be response for clicks)

>PROPERTIES<

REPEATED:
view (Object)

Contact:visionlore@gmail.com