Photoswipe Drug Facts
How do I make an photoswipe drug facts?
What is a photoswipe drug facts? How do you make a photoswipe drug facts? This script and codes were developed by Jeff Pannone on 12 August 2022, Friday.
Photoswipe Drug Facts - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Photoswipe Drug Facts</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='http://brandshop.com/emerson/style.css'>
<link rel='stylesheet prefetch' href='https://i.icomoon.io/public/c88de6d4a5/Emerson/style.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="ingredients"> <figure> <a href="http://brandshop.com/emerson/346017077100-ingr.jpg" data-size="1500x1500"> <img src="http://brandshop.com/emerson/sh-product-facts.jpg" alt="" /> </a> </figure>
</div>
<!-- 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. --> <button class="pswp__button pswp__button--close" title="Close (Esc)"></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> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://kenwheeler.github.io/slick/slick/slick.js'></script>
<script src='http://photoswipe.s3-eu-west-1.amazonaws.com/pswp/dist/photoswipe.min.js'></script>
<script src='http://photoswipe.s3-eu-west-1.amazonaws.com/pswp/dist/photoswipe-ui-default.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Photoswipe Drug Facts - Script Codes CSS Codes
.ingredients { width: 100%; max-width: 400px; margin: 2em auto; position: relative;
}
.ingredients figure, .ingredients a, .ingredients img { display: block; outline: none; border: none;
}
.ingredients figure { /* padding:0 2em; */ background: #00A9DD; position: relative;
}
.ingredients figure:after { content: "\e60b"; font-family: 'icomoon'; color: #E8E8E8; position: absolute; top: .7em; right: .4em; font-size: 1.9em; z-index: 100;
}
.ingredients figure a { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in;
}
.ingredients figure a:hover { opacity: .5;
}
.pswp__bg { background: #fff;
}
Photoswipe Drug Facts - Script Codes JS Codes
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,
barsSize : {top:0,bottom:0},
captionEl : false,
fullscreenEl : false,
shareEl : false,
bgOpacity : 0.85,
tapToClose : true,
tapToToggleControls : false, captionEl: false, fullscreenEl: false, zoomEl: false, shareEl: false, counterEl: false, arrowEl: false, // define gallery index (for URL) 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(); }; // 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('.ingredients');
Developer | Jeff Pannone |
Username | jeffpannone |
Uploaded | August 12, 2022 |
Rating | 3 |
Size | 5,320 Kb |
Views | 20,240 |
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!
Name | Size |
Geolocation API | 1,952 Kb |
Slider and Product Functionality | 11,046 Kb |
Scroll Depth Example | 2,707 Kb |
JQuery Division | 1,970 Kb |
A Pen by Jeff Pannone | 1,716 Kb |
Hompage Grid | 5,086 Kb |
HTML2Canvas Preview | 24,347 Kb |
Slick dropdown navigation | 5,966 Kb |
URL Parameter Conditional | 1,853 Kb |
JQuery Viewport Size | 2,317 Kb |
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!
Name | Username | Size |
Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Simple Buttons | Haydenmills | 1,750 Kb |
Test | Dviate | 2,668 Kb |
Algorithm practice | Abensur | 5,620 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Material design - button rainbow circle | Kunukn | 3,652 Kb |
Improve | Gavra | 1,652 Kb |
A form arranged using automatic placement. | Vikasford | 2,103 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!