Description

Displays an image gallery of thumbnails, with a hover over zoom effect, images are pulled from the 'Gallery Images' area of a stock item within the CMS.

 

Code Example

<ngage:StockImageGallery ID="StockImageGallery" runat="server" />
 

Basic CSS

/*Product Image Gallery*/
.image-gallery-wrapper { float: left; border: solid 1px #536283; padding: 0; height: 338px; width: 100%; overflow: hidden; position: relative; }
.image-gallery-wrapper .main-image { height: 338px; overflow: hidden; position: absolute; text-align: center; border-right: solid 1px #102042; }
.image-gallery-wrapper #zoom-image { height: 337px; width: 100%; max-width: 100%; }
.zoomContainer { max-height: 336px !important; max-width: 338px !important; }
.image-gallery-wrapper #thumb-wrapper { background-color: #fff; text-align: center; z-index: 2000; position: absolute; right: 0; padding: 0; }
.image-gallery-wrapper #thumb-wrapper > div { position: relative; top: 32px; }
.image-gallery-wrapper #thumb-wrapper > div > a { display: inline-block; padding: 0; text-align: center; }
.image-gallery-wrapper #thumb-wrapper > div > a > img { width: 100px; height: 100px; border: solid 2px #ccc; margin: 5px; }
.image-gallery-wrapper .thumb-wrapper > span.up { cursor: pointer; position: absolute; z-index: 20000; left: 0; top: 0; font-size: 1.4em; margin: 0; line-height: 1.6em; width: 34px; display: inline-block; height: 32px; width: 100%; color: #fff; background-color: #536283; }
.image-gallery-wrapper .thumb-wrapper > span.down { cursor: pointer; position: absolute; z-index: 20000; left: 0; top: 304px; font-size: 1.4em; margin: 0; line-height: 1.8em; width: 34px; display: inline-block; height: 32px; width: 100%; color: #fff; background-color: #536283; }
@media screen and (max-width:759px) {
    .image-gallery-wrapper { height: auto; }
    .image-gallery-wrapper #thumb-wrapper { position: initial; padding: 10px 0; }
    .devlivery-calculator-wrapper > div > .row > div { padding: 0 !important; }
    .image-gallery-wrapper #thumb-wrapper > div { top: 0 !important; }
    .zoomContainer { display: none; }
}
@media (min-width: 760px) and (max-width: 979px) {
    .image-gallery-wrapper { height: auto; }
    .image-gallery-wrapper #thumb-wrapper { position: initial; padding: 10px 0; }
    .image-gallery-wrapper #thumb-wrapper > div { top: 0 !important; }
    .zoomContainer { display: none; }
}