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.
<ngage:StockImageGallery ID="StockImageGallery" runat="server" />
/*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; } }
Trouble logging in? Simply enter your email address OR username in order to reset your password.
For faster and more reliable delivery, add support@ngage.software to your trusted senders list in your email software.