A B C - G A L L E R Y - I N S T R U C T I O N
All icons and images used in this Jquery-Plugin, and this plugin itself are free from all kinds of license and can be changed and used for commercial and private purposes... Also I wish it much, you use it and learn for yourself !!!
Daniel Wunder // Berlin, 09.01.2017 development & design by www.danielwunder.eu
Hello, friends !!! Welcome to ABC-gallery (to learn and use) This gallery is full responsive and working in: IE6+, Opera, Safari and Firefox
H O W - T O - U S E:
- Don't forget, this plugin is written using JQuery - Library, when you definited your folder-structure, just embded this library at first, like you will find it in 'index.html'
- Next step is to embded the abc-gallery files (css & js). Take a look also to 'index.html'...
- HTML-structure for ABC-gallery:
So that the ABC-gallery can manage your pictures, pack all the images into a DIV-element with class 'abc-gallery-div'.
Whether your pictures are arranged as a list, table or simply as links in this DIV-element does not matter...
I M P O R T A N T is that each image element is provided with a link !!! a-tag, where you specify the path to the original image !!!
- Paths & Folder:
The required files are: 'abc-gallery-css.css' + 'abc-gallery-js.js' !!!
in this example you'll find these files in 'abc-gallery'-folder. Images as (GIF, PNG, SVG) & used fonts are to find in the same folder.
If you wanna change the gallery-layout, use propierties in 'abc-gallery-js.js' for new browsers (IE9+ etc.)
For older IE versions change the images in following folders:
'no-image'-image: abc-gallery/abc-gallery-images/no_image_png_svg .../no-image.png
'preloader'-image: 'abc-gallery'--> abc-gallery-images/no_image_gif_svg/spin.gif .../spin.svg
'navigation'-images: 'abc-gallery'--> icomoon_buttons_font/icomoon-imgs/actual-imgs/...
It is definitely very easy to set a new layout for ABC-gallery !!!
W H Y - T O - U S E:
- This gallery is programmed using OOP-JS-model and has a lot of layout properties, which can be very easy changed in: 'abc-gallery-js.js' - file.
Also you can without problems upgrade the gallery with your own effects and properties. Gallery is good readable even for young web-designers and has many useful comments.
If you set another JS-Libraries exept JQuery-Library - no problem, cause it was tested using 'JQuery - no conflict mode' and it works... see comments 'abc-gallery-js.js' lines 6-12
-
Because of practically interface-design, it's easy to use for young and older users, key-events (up, down, left, right & space and esc) are included for better handling. Slideshow-option bring more comfort for everyone decided to use this gallery.
-
It was decided to use crossbrowser-version 'jquery-1.12.4.min.js' (94,8 KB) (p.s. the same version used by bootstrap framework)
ABC-file-sizes not minimazed: 'abc-gallery-js.js' - file - 25,6 KB 'abc-gallery-css.css' - file - 6,28 KB
ABC-file-sizes not minimazed: 'abc-gallery-js.js' - file - 12,54 KB 'abc-gallery-css.css' - file - 3,45 KB
ABC-file-sizes together not minimazed: 31,88 KB
ABC-file-sizes together minimazed: 15,99 KB
- If you decide to learn more about OOP or handling with image-objects in javascript, just take your time and use the scripts. The codes of this gallery are easy to understand and written for using this Jquery-plugin crossbrowsser and learn more about this : )
