Eagle Gallery

About

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

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

Add comment


Security code
Refresh