Eagle Gallery product page, image, zoom, touch, responsive gallery

demo

Dark, autoplay

Show JS
$('#example1').eagleGallery({
    miniSliderArrowPos: 'inside',
    changeMediumStyle: true,
    autoPlayMediumImg: true,
    openGalleryStyle: 'transform',
    bottomControlLine: true
});

White, errow style: 2

Show JS
$('#example2').eagleGallery({
    miniSliderArrowStyle: 2,
    theme: 'light'
});

Without medium image, errow position: inside

Show JS
$('#example3').eagleGallery({
    miniSliderArrowPos: 'inside',
    showMediumImg: false,
    openGalleryStyle: 'transform',
    bottomControlLine: true,
    miniSlider: {
        itemsCustom: [[0, 1],[350, 2], [750, 3], [1050, 4], [1250, 5], [1450, 6]]
    }
});
Please, rate, it's very help me!

Features

  • Fully responsive The gallery is adaptive to the different window width or container. The gallery is flexible.
  • Zoomable images Use touch gestures or buttons for zoom image.
  • Touch enabled, gestures The gallery is support multiple touches and gestures.
  • Compatibility The gallery is supported by all modern browsers on windows, mac, android and iOS.
  • Made with CSS3 Gallery use modern css3 transitions and transform for fast work.
  • Bootstrap and Foundation friendly You can use Eagle Gallery with bootstrap or foundation frameworks.
  • Multiple Galleries Can work many galleries in the same time on one page.
  • Different effects Gallery has 4 effects for changing medium image and 2 effects for opening gallery.
  • 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.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="eagle.gallery/eagle.gallery.js"></script>
<link 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="Mustang Shelby GT500 - big black car with red lines is very beautiful and powerful" 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="The R/T Plus is both an athlete and a scholar. 2015 Challenger R/T Plus kicks the HEMIĀ® V8 engine up a notch by adding upgraded technology and features." 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

For my gallery I use OWL Carousel - this is a beautiful, fast and free plugin. That's why options of slideSpeed, paginationSpeed, number of item on different media-queries you can see on this page

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'
}
Please, rate, it's very help me!