Eagle Gallery


Eagle Gallery this is modern gallery with image zoom functionality. To manage the gallery you can use gestures or control buttons.
This is a fully responsive gallery which has support touch screen and was created for mobile devices, laptops and desktops.
With this gallery you can easily create a product gallery on your internet shop for detailed view and customize it with help of options


Fully responsive

The gallery is adaptive to the different window width or container. The gallery is flexible.


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="">

* 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



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


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'
Read 4550 times
More in this category: JS clock »

Add comment

Security code