Features
Fully responsive
The gallery is adaptive to the different window width or container. The gallery is flexible.
Compatibility
The gallery is supported by all modern browsers on windows, mac, android and iOS.
Multiple Galleries
Can work many galleries in the same time on one page.
Zoomable images
Use touch gestures or buttons for zoom image.
Made with CSS3
Gallery use modern css3 transitions and transform for fast work.
Different effects
Gallery has 4 effects for changing medium image and 2 effects for opening gallery.
Touch enabled, gestures
The gallery is support multiple touches and gestures.
Bootstrap and Foundation friendly
You can use Eagle Gallery with bootstrap or foundation frameworks.
Easy to use
3 simple steps to awesome gallery.
How to use
We need make 3 simple steps:
1) Include jQuery and EagleGallery scripts in your HTML code. Link the EagleGallery CSS file.
<s-cript src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <s-cript src="eagle.gallery/eagle.gallery.js"></script> <l-ink rel="stylesheet" href="eagle.gallery/eagle.gallery.css" type="text/css"/>
2) Create HTML markup
<div class="eagle-gallery img300">
<div class="owl-carousel">
<img src="img/pictures/p1-mini.jpg" data-medium-img="img/pictures/p1-medium.jpg" data-big-img="img/pictures/p1-big.jpg" data-title="" alt="">
<img src="img/pictures/p2-mini.jpg" data-medium-img="img/pictures/p2-medium.jpg" data-big-img="img/pictures/p2-big.jpg" data-title="" alt="">
<img src="img/pictures/p3-mini.jpg" data-medium-img="img/pictures/p3-medium.jpg" data-big-img="img/pictures/p3-big.jpg" data-title="" alt="">
<img src="img/pictures/p4-mini.jpg" data-medium-img="img/pictures/p4-medium.jpg" data-big-img="img/pictures/p4-big.jpg" data-title="" alt="">
</div>
</div>
* you can use one big image, such as:
<img src="img/pictures/p4-big.jpg" data-medium-img="img/pictures/p4-big.jpg" data-big-img="img/pictures/p4-big.jpg" data-title="" alt="">
* class img300 - this is the height of viewport medium img. You can use my classes img200, img250, ... , img650, img700 or remove it and set up your own height in css.
3) Call the plugin
$(document).ready(function(){
$(".eagle-gallery").eagleGallery();
});
Options
maxZoom Maximum range of scaling
default: 4
miniSliderArrowPos The position of the navigation arrows of mini slider
default: 'outside' || 'inside'
miniSliderArrowStyle Style of the navigation arrows of mini slider
default: 1 || 2
showMediumImg Show or not medium image
default: true || false
changeMediumStyle Add style to changing medium image
default: false || true, 'slideIn', 'slideOut', 'scaleIn' or 'scaleOut'
changeMediumSpeed Speed of changing medium image in millisecond (if changeMediumStyle not false)
default: 600
autoPlayMediumImg
Automatically change medium image - Change to any integer for example autoPlayMediumImg: 5000 to play every 5 seconds. If you set autoPlayMediumImg: true default speed will be 5 seconds.default: false || true, integer
hideOneThumb Hide thumbnails of mini-slider if one item.
default: true || false
openGalleryStyle Add style to opening gallery
default: 'show' || 'transform' +2300ms to openGallerySpeed
openGallerySpeed Speed of opening and hiding gallery in milliseconds
default: 300
hideControlsSpeed Speed of opening and hiding controls in milliseconds
default: 200
theme Color scheme of gallery
default: 'dark' || 'light'
bottomControlLine Change style of the zoom control on the line
default: false || true
Eagle Gallery default options
maxZoom: 4,
miniSliderArrowPos: 'outside',
miniSliderArrowStyle: 1,
showMediumImg: true,
changeMediumStyle: false,
changeMediumSpeed: 600,
changeMediumStyle: false,
autoPlayMediumImg: false,
hideOneThumb: true,
openGallerySpeed: 300,
hideControlsSpeed: 200,
theme: 'dark',
bottomControlLine: false,
miniSlider: {
navigation: true,
pagination: false,
navigationText: false,
rewindNav: false ,
theme: 'mini-slider',
responsiveBaseWidth: '.eagle-gallery',
itemsCustom: [[0, 1],[250, 2], [450, 3], [650, 4], [850, 5], [1050, 6], [1250, 7], [1450, 8]],
margin: 10
},
gallerySlider: {
singleItem: true,
navigation: false,
pagination: false,
rewindNav: false,
addClassActive: true,
theme: 'gallery-slider'
}