ABC - RESPONSIVE GALLERY - produced and designed for you to use & learn

optimized for: IE6+, Firefox, Opera, Safari

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 !!!


HOW TO USE:

1. 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 'abc-gallery.html'

!!! DON'T FORGET THE TO SET THE RIGHT PATH !!! 'src'-Attribute !!!

<script type="text/javascript" src="jquery-1.12.4.min.js"></script>

2. Next step is to embded the abc-gallery files (css & js). Take a look also to 'abc-gallery.html'...

<link rel="stylesheet" type="text/css" media="screen" href=".../your_folder/abc-gallery/abc-gallery-css.css" />

<script type="text/javascript" src=".../your_folder/abc-gallery/abc-gallery-js.js"></script>

3. 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 !!!

<div class="abc-gallery-div">

 <ul>

  <li><a href=".../your_folder/full/001.jpg"><img src=".../your_folder/thumbs/img_001.jpg" alt=""/></a></li>

  <!-- ... your images -->

  <li><a href=".../your_folder/full/001.jpg"><img src=".../your_folder/thumbs/img_N.jpg" alt=""/></a></li>

 </ul>

</div>

4. 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 !!!

WHY TO USE:

1. 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

2. 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.

3. 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

4. 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 : )

optimized for: IE6+, Firefox, Opera, Safari

Best regards, D. Wunder
(Esly-Coverlines)

15.01.2017

development & design by