Slick + Photoswipe Image Gallery & Zoom

Developer
Jeff Pannone
Size
7,762 Kb
Views
62,744
  1. Slick + Photoswipe Image Gallery & Zoom Previews
  2. Slick + Photoswipe Image Gallery & Zoom HTML Codes
  3. Slick + Photoswipe Image Gallery & Zoom CSS Codes
  4. Slick + Photoswipe Image Gallery & Zoom JS Codes

How do I make an slick + photoswipe image gallery & zoom?

A responsive, lazy loading, photo gallery and zoom using Slick Slider and Photoswipe. . What is a slick + photoswipe image gallery & zoom? How do you make a slick + photoswipe image gallery & zoom? This script and codes were developed by Jeff Pannone on 22 July 2022, Friday.

Slick + Photoswipe Image Gallery & Zoom Previews
IQ Test

Slick + Photoswipe Image Gallery & Zoom - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slick + Photoswipe Image Gallery & Zoom</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://i.icomoon.io/public/c88de6d4a5/DWSiteGenesis/style.css'>
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css'>
<link rel='stylesheet prefetch' href='http://photoswipe.s3.amazonaws.com/pswp/dist/photoswipe.css'>
<link rel='stylesheet prefetch' href='http://photoswipe.s3.amazonaws.com/pswp/dist/default-skin/default-skin.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <!-- Product Images & Alternates --> <div class="product-images"> <!-- Begin Product Images Slider --> <div class="main-img-slider"> <figure> <a href="http://images.hersheysstore.com/imagesEdp/p113221z.jpg" data-size="1400x1400"> <img src="http://brandshop.com/emerson/sh-default-product-img.png" data-lazy="http://images.hersheysstore.com/imagesEdp/p113221b.jpg" alt="" /> </a> </figure> <figure> <a href="http://images.hersheysstore.com/imagesEdp/p113220z.jpg" data-size="1400x1400"> <img src="http://brandshop.com/emerson/sh-default-product-img.png" data-lazy="http://images.hersheysstore.com/imagesEdp/p113220b.jpg" alt="" /> </a> </figure> <figure> <a href="http://images.hersheysstore.com/imagesEdp/p113159z.jpg" data-size="1400x1400"> <img src="http://brandshop.com/emerson/sh-default-product-img.png" data-lazy="http://images.hersheysstore.com/imagesEdp/p113159b.jpg" alt="" /> </a> </figure> <figure> <a href="http://images.hersheysstore.com/imagesEdp/p113160z.jpg" data-size="1400x1400"> <img src="http://brandshop.com/emerson/sh-default-product-img.png" data-lazy="http://images.hersheysstore.com/imagesEdp/p113160b.jpg" alt="" /> </a> </figure> <figure> <a href="http://images.hersheysstore.com/imagesEdp/p143710z.jpg" data-size="1400x1400"> <img src="http://brandshop.com/emerson/sh-default-product-img.png" data-lazy="http://images.hersheysstore.com/imagesEdp/p143710b.jpg" alt="" /> </a> </figure> </div> <!-- End Product Images Slider --> <!-- Begin product thumb nav --> <ul class="thumb-nav"> <li><img src="http://images.hersheysstore.com/imagesEdp/p113221th.jpg" /></li> <li><img src="http://images.hersheysstore.com/imagesEdp/p113220th.jpg" /></li> <li><img src="http://images.hersheysstore.com/imagesEdp/p113159th.jpg" /></li> <li><img src="http://images.hersheysstore.com/imagesEdp/p113160th.jpg" /></li> <li><img src="http://images.hersheysstore.com/imagesEdp/p143710th.jpg" /></li> </ul> <!-- End product thumb nav -->
</div>
<!-- End Product Images & Alternates -->
<!-- Begin Product Image Zoom -->
<!--
This should live at bottom of page before closing body tag
So that it renders on top of all page elements.
-->
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <!-- Background of PhotoSwipe. It's a separate element, as animating opacity is faster than rgba(). --> <div class="pswp__bg"></div> <!-- Slides wrapper with overflow:hidden. --> <div class="pswp__scroll-wrap"> <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. --> <div class="pswp__container"> <!-- don't modify these 3 pswp__item elements, data is added later on --> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <!-- Controls are self-explanatory. Order can be changed. --> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR --> <!-- element will get class pswp__preloader--active when preloader is running --> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> </button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div>
<!-- End product zoom -->
</div>
<!-- wrapper --> <script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://photoswipe.s3-eu-west-1.amazonaws.com/pswp/dist/photoswipe-ui-default.min.js'></script>
<script src='http://photoswipe.s3-eu-west-1.amazonaws.com/pswp/dist/photoswipe.min.js'></script>
<script src='http://kenwheeler.github.io/slick/slick/slick.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slick + Photoswipe Image Gallery & Zoom - Script Codes CSS Codes

.wrapper { font-family: helvetica, arial, sans-serif !important; font-weight: 400;
}
.sr-text { position: absolute !important; top: -9999px !important; left: -9999px !important;
}
.slick-slider .slick-prev, .slick-slider .slick-next { z-index: 100; font-size: 2.5em; height: 40px; width: 40px; margin-top: -20px; color: #B7B7B7; position: absolute; top: 50%; text-align: center; color: #000; opacity: .3; transition: opacity .25s; cursor: pointer;
}
.slick-slider .slick-prev:hover, .slick-slider .slick-next:hover { opacity: .65;
}
.slick-slider .slick-prev { left: 0;
}
.slick-slider .slick-next { right: 0;
}
.wrapper { max-width: 1024px; width: 90%; margin: 0 auto; font-family: '';
}
.wrapper strong { font-weight: 300; letter-spacing: 2px; font-size: 1.2em; display: block; text-align: center; text-transform: uppercase; margin: 0; padding: 20px 0; color: #666;
}
.product-images { width: 100%; max-width: 500px; margin: 0 auto; padding: 4em 0;
}
.product-images li, .product-images figure, .product-images a, .product-images img { display: block; outline: none; border: none;
}
.product-images .main-img-slider figure { margin: 0 auto; padding: 0 2em;
}
.product-images .main-img-slider figure a { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in;
}
.product-images .main-img-slider figure a img { width: 100%; max-width: 400px; margin: 0 auto;
}
.product-images .thumb-nav { margin: 0 auto; margin-top: 50px; max-width: 260px; padding: 0;
}
.product-images .thumb-nav.slick-slider .slick-prev, .product-images .thumb-nav.slick-slider .slick-next { font-size: 1.2em; height: 20px; width: 26px; margin-top: -10px;
}
.product-images .thumb-nav.slick-slider .slick-prev { margin-left: -30px;
}
.product-images .thumb-nav.slick-slider .slick-next { margin-right: -30px;
}
.product-images .thumb-nav li { display: block; margin: 0 auto; cursor: pointer;
}
.product-images .thumb-nav li img { display: block; width: 100%; max-width: 65px; margin: 0 auto; border: 2px solid transparent; -webkit-transition: border-color .25s; -ms-transition: border-color .25s; -moz-transition: border-color .25s; transition: border-color .25s;
}
.product-images .thumb-nav li:hover, .product-images .thumb-nav li:focus { border-color: #999;
}
.product-images .thumb-nav li.slick-current img { border-color: #FB8D00;
}
.pswp__bg { background: #fff;
}
.pswp__top-bar { background-color: transparent !important;
}
.pswp__button,
.pswp__button:before,
.pswp__button--close:before,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before { background: none !important; background-size: 100%; width: 44px; height: 44px; font-family: 'icomoon';
}
.pswp__button { color: #000 !important; opacity: 0.4 !important; transition: opacity .25s;
}
.pswp__button:hover { opacity: 0.65 !important;
}
.pswp__button:before { opacity: 1 !important;
}
.pswp__button.pswp__button--arrow--left:before, .pswp__button.pswp__button--arrow--right:before { font-size: 44px;
}
.pswp__button.pswp__button--arrow--left:before { content: "\e93b";
}
.pswp__button.pswp__button--arrow--right:before { content: "\e93c";
}
.pswp__button.pswp__button--close { top: 10px; right: 20px;
}
.pswp__button.pswp__button--close:before { content: "\e92a"; font-size: 44px;
}
.pswp__button.pswp__button--close:hover { color: red;
}

Slick + Photoswipe Image Gallery & Zoom - Script Codes JS Codes

// Main/Product image slider for product page
$('.main-img-slider').slick({ slidesToShow: 1, slidesToScroll: 1, infinite: true, arrows: true, fade:true, speed: 300, lazyLoad: 'ondemand', asNavFor: '.thumb-nav', prevArrow: '<div class="slick-prev"><i class="i-chev-left-thin"></i><span class="sr-text">Previous</span></div>', nextArrow: '<div class="slick-next"><i class="i-chev-right-thin"></i><span class="sr-text">Next</span></div>'
});
// Thumbnail/alternates slider for product page
$('.thumb-nav').slick({ slidesToShow: 3, slidesToScroll: 1, infinite: true, centerPadding: '0px', asNavFor: '.main-img-slider', dots: false, centerMode: true, draggable: false, speed:200, focusOnSelect: true, prevArrow: '<div class="slick-prev"><i class="i-chev-left-thin"></i><span class="sr-text">Previous</span></div>', nextArrow: '<div class="slick-next"><i class="i-chev-right-thin"></i><span class="sr-text">Next</span></div>'
});
//keeps thumbnails active when changing main image, via mouse/touch drag/swipe
$('.main-img-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){ //remove all active class $('.thumb-nav .slick-slide').removeClass('slick-current'); //set active class for current slide $('.thumb-nav .slick-slide:not(.slick-cloned)').eq(currentSlide).addClass('slick-current');
});
//Photoswipe configuration for product page zoom
var initPhotoSwipeFromDOM = function(gallerySelector) { // parse slide data (url, title, size ...) from DOM elements // (children of gallerySelector) var parseThumbnailElements = function(el) { var thumbElements = el.childNodes, numNodes = thumbElements.length, items = [], figureEl, linkEl, size, item; for(var i = 0; i < numNodes; i++) { figureEl = thumbElements[i]; // <figure> element // include only element nodes if(figureEl.nodeType !== 1) { continue; } linkEl = figureEl.children[0]; // <a> element size = linkEl.getAttribute('data-size').split('x'); // create slide object item = { src: linkEl.getAttribute('href'), w: parseInt(size[0], 10), h: parseInt(size[1], 10) }; if(figureEl.children.length > 1) { // <figcaption> content item.title = figureEl.children[1].innerHTML; } if(linkEl.children.length > 0) { // <img> thumbnail element, retrieving thumbnail url item.msrc = linkEl.children[0].getAttribute('src'); } item.el = figureEl; // save link to element for getThumbBoundsFn items.push(item); } return items; }; // find nearest parent element var closest = function closest(el, fn) { return el && ( fn(el) ? el : closest(el.parentNode, fn) ); }; // triggers when user clicks on thumbnail var onThumbnailsClick = function(e) { e = e || window.event; e.preventDefault ? e.preventDefault() : e.returnValue = false; var eTarget = e.target || e.srcElement; // find root element of slide var clickedListItem = closest(eTarget, function(el) { return (el.tagName && el.tagName.toUpperCase() === 'FIGURE'); }); if(!clickedListItem) { return; } // find index of clicked item by looping through all child nodes // alternatively, you may define index via data- attribute var clickedGallery = clickedListItem.parentNode, childNodes = clickedListItem.parentNode.childNodes, numChildNodes = childNodes.length, nodeIndex = 0, index; for (var i = 0; i < numChildNodes; i++) { if(childNodes[i].nodeType !== 1) { continue; } if(childNodes[i] === clickedListItem) { index = nodeIndex; break; } nodeIndex++; } if(index >= 0) { // open PhotoSwipe if valid index found openPhotoSwipe( index, clickedGallery ); } return false; }; // parse picture index and gallery index from URL (#&pid=1&gid=2) var photoswipeParseHash = function() { var hash = window.location.hash.substring(1), params = {}; if(hash.length < 5) { return params; } var vars = hash.split('&'); for (var i = 0; i < vars.length; i++) { if(!vars[i]) { continue; } var pair = vars[i].split('='); if(pair.length < 2) { continue; } params[pair[0]] = pair[1]; } if(params.gid) { params.gid = parseInt(params.gid, 10); } return params; }; var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) { var pswpElement = document.querySelectorAll('.pswp')[0], gallery, options, items; items = parseThumbnailElements(galleryElement); // define options (if needed) options = {
// loop:false, // define gallery index (for URL) // barsSize : {top:140,bottom:0}, captionEl : false, fullscreenEl : false, shareEl : false, bgOpacity : 1, tapToClose : true, tapToToggleControls : false, closeOnScroll: false, history:false, closeOnVerticalDrag:false, captionEl: false, fullscreenEl: false, zoomEl: false, shareEl: false, counterEl: false, arrowEl: true, galleryUID: galleryElement.getAttribute('data-pswp-uid'), getThumbBoundsFn: function(index) { // See Options -> getThumbBoundsFn section of documentation for more info var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail pageYScroll = window.pageYOffset || document.documentElement.scrollTop, rect = thumbnail.getBoundingClientRect(); return {x:rect.left, y:rect.top + pageYScroll, w:rect.width}; } }; // PhotoSwipe opened from URL if(fromURL) { if(options.galleryPIDs) { // parse real index when custom PIDs are used // http://photoswipe.com/documentation/faq.html#custom-pid-in-url for(var j = 0; j < items.length; j++) { if(items[j].pid == index) { options.index = j; break; } } } else { // in URL indexes start from 1 options.index = parseInt(index, 10) - 1; } } else { options.index = parseInt(index, 10); } // exit if index not found if( isNaN(options.index) ) { return; } if(disableAnimation) { options.showAnimationDuration = 0; } // Pass data to PhotoSwipe and initialize it gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); gallery.init(); var psIndex = gallery.getCurrentIndex(); var psIndexSlick = psIndex; // console.log(psIndexSlick); gallery.listen('afterChange', function() { var psIndex = gallery.getCurrentIndex(); var psIndexSlick = psIndex; // console.log(psIndexSlick); $(".main-img-slider").slick( "slickGoTo", psIndexSlick); }); }; var options = { loop: false }; // loop through all gallery elements and bind events var galleryElements = document.querySelectorAll( gallerySelector ); for(var i = 0, l = galleryElements.length; i < l; i++) { galleryElements[i].setAttribute('data-pswp-uid', i+1); galleryElements[i].onclick = onThumbnailsClick; } // Parse URL and open gallery if it contains #&pid=3&gid=1 var hashData = photoswipeParseHash(); if(hashData.pid && hashData.gid) { openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true ); }
};
// execute above function
initPhotoSwipeFromDOM('.product-images');
Slick + Photoswipe Image Gallery & Zoom - Script Codes
Slick + Photoswipe Image Gallery & Zoom - Script Codes
Home Page Home
Developer Jeff Pannone
Username jeffpannone
Uploaded July 22, 2022
Rating 4.5
Size 7,762 Kb
Views 62,744
Do you need developer help for Slick + Photoswipe Image Gallery & Zoom?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Pannone (jeffpannone) Script Codes
Name
Slide Toggle for Adam
URL Parameter Conditional
Magnific - open popup with URL param
A Pen by Jeff Pannone
Geolocation API
HTML2Canvas Preview
Slick dropdown navigation
Cart Design
JQuery Division
Hompage Grid
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!