Minimal Responsive Gallery Plugin - jQuery ABC-Gallery

ABC-Gallery is a simple, easy, cross-browser jQuery plugin to create a photo gallery where the images will be displayed in a responsive, fullscreen popup with automatic or manual rotation support.

How to use it:

1. Include the necessary JavaScript and CSS files for the ABC-Gallery plugin.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<link rel="stylesheet" href="abc-gallery/abc-gallery-css.css">
<script src="abc-gallery/abc-gallery-js.js"></script>

2. Insert your own images to the gallery as follows:

<div class="abc-gallery-div">
  <ul class="abc-ul-gallery">
    <li><a href="/full/1.jpg"><img src="/thumbs/1.jpg" alt=""/></a></li>
    <li><a href="/full/2.jpg"><img src="/thumbs/2.jpg" alt=""/></a></li>
    <li><a href="/full/3.jpg"><img src="/thumbs/3.jpg" alt=""/></a></li>
    <li><a href="/full/4.jpg"><img src="/thumbs/4.jpg" alt=""/></a></li>
    <li><a href="/full/5.jpg"><img src="/thumbs/5.jpg" alt=""/></a></li>
    <li><a href="/full/6.jpg"><img src="/thumbs/6.jpg" alt=""/></a></li>
    <li><a href="/full/7.jpg"><img src="/thumbs/7.jpg" alt=""/></a></li>
    ...
  </ul>
</div>

3. That's it. Here is a list of plugin options to customize the gallery.

// layout of gallery propieties
overlayBgColor: 'rgba(33,33,33,0.5)',/* for new browser versions*/
overlayBgColorIE: 'rgb(0,0,0)',//'rgb(33,33,33)'<-- original buttons color !!!, /* ie6 - ie8 fallback */

// gallery-navigation propieties
navBgColor: '#212121', // this color adapted to jpg-navigation-images (for old IE versions)
navButtonsColor: '#FFFFFF', // for new browsers (IE8+)
navOpacity: '0.35', // FOR new broWsers (IE9+) only, --- opacity ---> 0(0%)-1(100%)

// 'image-load' & 'image-error' propieties
loadNoImgBgColor: 'rgba(33,33,33,0.5)',
loadNoImgBgColorIE: 'rgb(33,33,33)',//'rgb(33,33,33)'<-- original icons bg-color !!!, /* ie6 - ie8 fallback */
loadNoImgBorderWidth: '5', /* border width */
loadNoImgBorderStyle: 'solid', /* border style */
loadNoImgBorderColor: '#FFFFFF', /* border color */
loadNoImgTextColor: '#FFFFFF', /* text color */

// to embed another SVG take a look to 'createOverlay' - method of this object, how insert the color ---> or do it more easy... like following
loadingAnimation: null, // null - for GIF/SVG-Images on board... //'<b>ON LOAD<br>...</b>', // <--- or like this !!!--- your text... your img... etc.
noImg: null, // null - for PNG/SVG-Images on board... //'<b>NO IMAGE<br>available</b>', // <--- or like this !!!--- your text... your img... etc.

// image-border-styles
imgBorderWidth: '7', /* border width */
imgBorderStyle: 'solid', /* border style */
imgBorderColor: '#FFFFFF', /* border color */

// time-intervals
playerInterval: 4000, // image change on play
hideShowNaviInterval: 2000, // time for showing navigation

fadeInterval: 500, // galleryNavi, etc.
fadeIntervalFast: 200, // gallery overlay, etc.

onresizeBreak: 300,
ie6_7responsiveBreak: 1200,

// markup
removeMobileMarkUp: false, // when 'true', removes mobile markup from buttons...

/*  window & browser variables*/
galleryOn: false, // is used by key-events
win : $(window), // used on occasion in script
ieSvgAnimationCheck: true,
winH: 0, // window-object height
winW: 0, // window-object width
ieVer: null, // IE(InternetExplorer) Versions 6-8
oldViewport: null, // saves old viewport value...
overlay: null, // used on occasion in script

/* navi buttons */
divNav: null,
plPauseBtn: null,
prevImg: null,
nextImg: null,
closeG: null,

/* image variables */
imgObj: null,
imgIndexClicked: null,
imgsCount: null,
imgsJqCollection: null,
divForImgs: null,

imgPathArray : new Array(),

preloaderHeight: 0,
noImgHeight: 0,

/* interval time variables*/
ei6_7ResponseInterval: null,

playerFlag: false,
naviFlag: false,

timeCounterPlayer: null,
timeCounterNavi: null,

resizeTimeOut: null,
navHoverTimeOut: null,

---

This awesome jQuery plugin is developed by coverlines. For more Advanced Usages, please check the demo page or visit the official website.