Created
December 23, 2016 11:24
-
-
Save celticwebdesign/0e00f7763de60c87e6aa393f78caa65b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| PHP | |
| <?php | |
| $rows_pgr = get_field('property_gallery_repeater'); | |
| if($rows_pgr) { | |
| echo " | |
| <div class='gallery'>"; | |
| echo " <div id='property_gallery_container' class='grid' itemscope itemtype='http://schema.org/ImageGallery'>"; | |
| $counter = 0; | |
| foreach($rows_pgr as $row_pgr) { | |
| $image_attributes = wp_get_attachment_image_src( $row_pgr['property_single_gallery_photo'], 'gallery-medium' ); | |
| $alt_text = get_post_meta( $row_pgr['property_single_gallery_photo'], '_wp_attachment_image_alt', true); | |
| echo " <figure class='property_lead_photo grid-item' itemprop='associatedMedia' itemscope itemtype='http://schema.org/ImageObject'> | |
| <a href='".$image_attributes[0]."' itemprop='contentUrl' data-title='Snoop Ray 4877 Jewell'> | |
| <img src='".$image_attributes[0]."' alt='".$alt_text."' title='".$alt_text."' itemprop='thumbnail' data-clicked-node='".$counter."'> | |
| </a> | |
| </figure>"; | |
| $counter++; | |
| } | |
| echo "</div>"; | |
| $rows_pgr = get_field('property_gallery_repeater'); | |
| if($rows_pgr) { | |
| echo "<div id='inline1' style='display: none;'>"; | |
| $images_array = array(); | |
| foreach($rows_pgr as $row_pgr) { | |
| $image_attributes = wp_get_attachment_image_src( $row_pgr['property_single_gallery_photo'], 'large' ); | |
| $attachment = get_post( $row_pgr['property_single_gallery_photo'] ); | |
| array_push($images_array, | |
| array( | |
| "src" => $image_attributes[0], | |
| "wid" => $image_attributes[1], | |
| "hei" => $image_attributes[2], | |
| "des" => $attachment->post_content | |
| ) | |
| ); | |
| } | |
| $images_info = json_encode($images_array); | |
| echo "<div data-src='".$images_info."'></div>"; | |
| echo "</div>"; | |
| } | |
| echo " </div> | |
| "; | |
| } | |
| ?> | |
| CSS | |
| /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ | |
| /* | |
| Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) | |
| */ | |
| /* pswp = photoswipe */ | |
| .pswp{display:none;position:absolute;width:100%;height:100%;left:0;top:0;overflow:hidden;-ms-touch-action:none;touch-action:none;z-index:1500;-webkit-text-size-adjust:100%;-webkit-backface-visibility:hidden;outline:none}.pswp *{-webkit-box-sizing:border-box;box-sizing:border-box}.pswp img{max-width:none}.pswp--animate_opacity{opacity:.001;will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(0.4,0,0.22,1);transition:opacity 333ms cubic-bezier(0.4,0,0.22,1)}.pswp--open{display:block}.pswp--zoom-allowed .pswp__img{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.pswp--zoomed-in .pswp__img{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.pswp--dragging .pswp__img{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.pswp__bg{position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:0;-webkit-backface-visibility:hidden;will-change:opacity}.pswp__scroll-wrap{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}.pswp__container,.pswp__zoom-wrap{-ms-touch-action:none;touch-action:none;position:absolute;left:0;right:0;top:0;bottom:0}.pswp__container,.pswp__img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.pswp__zoom-wrap{position:absolute;width:100%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transition:-webkit-transform 333ms cubic-bezier(0.4,0,0.22,1);transition:transform 333ms cubic-bezier(0.4,0,0.22,1)}.pswp__bg{will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(0.4,0,0.22,1);transition:opacity 333ms cubic-bezier(0.4,0,0.22,1)}.pswp--animated-in .pswp__bg,.pswp--animated-in .pswp__zoom-wrap{-webkit-transition:none;transition:none}.pswp__container,.pswp__zoom-wrap{-webkit-backface-visibility:hidden}.pswp__item{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden}.pswp__img{position:absolute;width:auto;height:auto;top:0;left:0}.pswp__img--placeholder{-webkit-backface-visibility:hidden}.pswp__img--placeholder--blank{background:#222}.pswp--ie .pswp__img{width:100%!important;height:auto!important;left:0;top:0}.pswp__error-msg{position:absolute;left:0;top:50%;width:100%;text-align:center;font-size:14px;line-height:16px;margin-top:-8px;color:#CCC}.pswp__error-msg a{color:#CCC;text-decoration:underline} | |
| .pswp__bg {background: rgba(0,0,0,0.9);} | |
| /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ | |
| /* | |
| Contents: | |
| 1. Buttons | |
| 2. Share modal and links | |
| 3. Index indicator ("1 of X" counter) | |
| 4. Caption | |
| 5. Loading indicator | |
| 6. Additional styles (root element, top bar, idle state, hidden state, etc.) | |
| */ | |
| /* | |
| 1. Buttons | |
| */ | |
| /* <button> css reset */ | |
| .pswp__button{width:44px;height:44px;position:relative;background:none;cursor:pointer;overflow:visible;-webkit-appearance:none;display:block;border:0;padding:0;margin:0;float:right;opacity:.75;-webkit-transition:opacity .2s;transition:opacity .2s;-webkit-box-shadow:none;box-shadow:none}.pswp__button:focus,.pswp__button:hover{opacity:1}.pswp__button:active{outline:none;opacity:.9}.pswp__button::-moz-focus-inner{padding:0;border:0}.pswp__ui--over-close .pswp__button--close{opacity:1}.pswp__button,.pswp__button--arrow--left:before,.pswp__button--arrow--right:before{background:url(img/default-skin.png) 0 0 no-repeat;background-size:264px 88px;width:44px;height:44px}@media (-webkit-min-device-pixel-ratio: 1.1),(-webkit-min-device-pixel-ratio: 1.09375),(min-resolution: 105dpi),(min-resolution: 1.1dppx){.pswp--svg .pswp__button,.pswp--svg .pswp__button--arrow--left:before,.pswp--svg .pswp__button--arrow--right:before{background-image:url(img/default-skin.svg)}.pswp--svg .pswp__button--arrow--left,.pswp--svg .pswp__button--arrow--right{background:none}}.pswp__button--close{background-position:0 -44px}.pswp__button--share{background-position:-44px -44px}.pswp__button--fs{display:none}.pswp--supports-fs .pswp__button--fs{display:block}.pswp--fs .pswp__button--fs{background-position:-44px 0}.pswp__button--zoom{display:none;background-position:-88px 0}.pswp--zoom-allowed .pswp__button--zoom{display:block}.pswp--zoomed-in .pswp__button--zoom{background-position:-132px 0}.pswp--touch .pswp__button--arrow--left,.pswp--touch .pswp__button--arrow--right{visibility:hidden}.pswp__button--arrow--left,.pswp__button--arrow--right{background:none;top:50%;margin-top:-50px;width:70px;height:100px;position:absolute}.pswp__button--arrow--left{left:0}.pswp__button--arrow--right{right:0}.pswp__button--arrow--left:before,.pswp__button--arrow--right:before{content:'';top:35px;background-color:rgba(0,0,0,0.3);height:30px;width:32px;position:absolute}.pswp__button--arrow--left:before{left:6px;background-position:-138px -44px}.pswp__button--arrow--right:before{right:6px;background-position:-94px -44px} | |
| /* | |
| 2. Share modal/popup and links | |
| */ | |
| .pswp__counter,.pswp__share-modal{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pswp__share-modal{display:block;background:rgba(0,0,0,0.5);width:100%;height:100%;top:0;left:0;padding:10px;position:absolute;z-index:1600;opacity:0;-webkit-transition:opacity .25s ease-out;transition:opacity .25s ease-out;-webkit-backface-visibility:hidden;will-change:opacity}.pswp__share-modal--hidden{display:none}.pswp__share-tooltip{z-index:1620;position:absolute;background:#FFF;top:56px;border-radius:2px;display:block;width:auto;right:44px;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.25);box-shadow:0 2px 5px rgba(0,0,0,0.25);-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);-webkit-transition:-webkit-transform .25s;transition:transform .25s;-webkit-backface-visibility:hidden;will-change:transform}.pswp__share-tooltip a{display:block;padding:8px 12px;color:#000;text-decoration:none;font-size:14px;line-height:18px}.pswp__share-tooltip a:hover{text-decoration:none;color:#000}.pswp__share-tooltip a:first-child{border-radius:2px 2px 0 0}.pswp__share-tooltip a:last-child{border-radius:0 0 2px 2px}.pswp__share-modal--fade-in{opacity:1}.pswp__share-modal--fade-in .pswp__share-tooltip{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.pswp--touch .pswp__share-tooltip a{padding:16px 12px}a.pswp__share--facebook:before{content:'';display:block;width:0;height:0;position:absolute;top:-12px;right:15px;border:6px solid transparent;border-bottom-color:#FFF;-webkit-pointer-events:none;-moz-pointer-events:none;pointer-events:none}a.pswp__share--facebook:hover{background:#3E5C9A;color:#FFF}a.pswp__share--facebook:hover:before{border-bottom-color:#3E5C9A}a.pswp__share--twitter:hover{background:#55ACEE;color:#FFF}a.pswp__share--pinterest:hover{background:#CCC;color:#CE272D}a.pswp__share--download:hover{background:#DDD} | |
| /* | |
| 3. Index indicator ("1 of X" counter) | |
| */ | |
| .pswp__counter{position:absolute;left:0;top:0;height:44px;font-size:13px;line-height:44px;color:#FFF;opacity:.75;padding:0 10px} | |
| /* | |
| 4. Caption | |
| */ | |
| .pswp__caption{position:absolute;left:0;bottom:0;width:100%;min-height:44px}.pswp__caption small{font-size:11px;color:#BBB}.pswp__caption__center{text-align:left;max-width:420px;margin:0 auto;font-size:13px;padding:10px;line-height:20px;color:#CCC}.pswp__caption--empty{display:none}.pswp__caption--fake{visibility:hidden} | |
| /* | |
| 5. Loading indicator (preloader) | |
| You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR | |
| */ | |
| .pswp__preloader{width:44px;height:44px;position:absolute;top:0;left:50%;margin-left:-22px;opacity:0;-webkit-transition:opacity .25s ease-out;transition:opacity .25s ease-out;will-change:opacity;direction:ltr}.pswp__preloader__icn{width:20px;height:20px;margin:12px}.pswp__preloader--active{opacity:1}.pswp__preloader--active .pswp__preloader__icn{background:url(preloader.gif) 0 0 no-repeat}.pswp--css_animation .pswp__preloader--active{opacity:1}.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn{-webkit-animation:clockwise 500ms linear infinite;animation:clockwise 500ms linear infinite}.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut{-webkit-animation:donut-rotate 1000ms cubic-bezier(0.4,0,0.22,1) infinite;animation:donut-rotate 1000ms cubic-bezier(0.4,0,0.22,1) infinite}.pswp--css_animation .pswp__preloader__icn{background:none;opacity:.75;width:14px;height:14px;position:absolute;left:15px;top:15px;margin:0}.pswp--css_animation .pswp__preloader__cut{position:relative;width:7px;height:14px;overflow:hidden}.pswp--css_animation .pswp__preloader__donut{-webkit-box-sizing:border-box;box-sizing:border-box;width:14px;height:14px;border:2px solid #FFF;border-radius:50%;border-left-color:transparent;border-bottom-color:transparent;position:absolute;top:0;left:0;background:none;margin:0}@media screen and (max-width: 1024px){.pswp__preloader{position:relative;left:auto;top:auto;margin:0;float:right}}@-webkit-keyframes clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes donut-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(-140deg);transform:rotate(-140deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes donut-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(-140deg);transform:rotate(-140deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}} | |
| /* | |
| 6. Additional styles | |
| */ | |
| /* root element of UI */ | |
| .pswp__ui{-webkit-font-smoothing:auto;visibility:visible;opacity:1;z-index:1550}.pswp__top-bar{position:absolute;left:0;top:0;height:44px;width:100%}.pswp__caption,.pswp__top-bar,.pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right{-webkit-backface-visibility:hidden;will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(0.4,0,0.22,1);transition:opacity 333ms cubic-bezier(0.4,0,0.22,1)}.pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right{visibility:visible}.pswp__top-bar,.pswp__caption{background-color:rgba(0,0,0,0.5)}.pswp__ui--fit .pswp__top-bar,.pswp__ui--fit .pswp__caption{background-color:rgba(0,0,0,0.3)}.pswp__ui--idle .pswp__top-bar{opacity:0}.pswp__ui--idle .pswp__button--arrow--left,.pswp__ui--idle .pswp__button--arrow--right{opacity:0}.pswp__ui--hidden .pswp__top-bar,.pswp__ui--hidden .pswp__caption,.pswp__ui--hidden .pswp__button--arrow--left,.pswp__ui--hidden .pswp__button--arrow--right{opacity:.001}.pswp__ui--one-slide .pswp__button--arrow--left,.pswp__ui--one-slide .pswp__button--arrow--right,.pswp__ui--one-slide .pswp__counter{display:none}.pswp__element--disabled{display:none!important}.pswp--minimal--dark .pswp__top-bar{background:none} | |
| .pswp__button--arrow--left::before, | |
| .pswp__button--arrow--right::before { | |
| background: none; | |
| content: '\f060'; | |
| font-family: 'FontAwesome'; | |
| color: #fff; | |
| font-size: 3rem; | |
| height: 40px !important; | |
| line-height: 40px !important; | |
| opacity: 1 !important; | |
| } | |
| .pswp__button--arrow--right::before { | |
| content: '\f061'; | |
| } | |
| .pswp__caption .pswp__caption__center { | |
| color: #ffffff; | |
| font-size: 1.6rem; | |
| max-width: 670px; | |
| text-align: center; | |
| } | |
| JS | |
| // PhotoSwipe | |
| $(".grid-item img").click(function(e) { | |
| e = e || window.event; | |
| e.preventDefault ? e.preventDefault() : e.returnValue = false; | |
| var index = $(this).data('clicked-node'); | |
| if(index >= 0) { | |
| // open PhotoSwipe if valid index found | |
| openPhotoSwipe( index ); | |
| } | |
| return false; | |
| }); | |
| // PhotoSwipe | |
| function openPhotoSwipe(startAt) { | |
| if( $('#inline1').length > 0 ) { | |
| var pswpElement = document.querySelectorAll('.pswp')[0]; | |
| var test2_obj = $( "#inline1 div" ).data('src'); | |
| var arr = []; | |
| $.each( test2_obj, function(key, value) { | |
| arr.push({ | |
| src: value.src, | |
| w: value.wid, | |
| h: value.hei, | |
| title: value.des | |
| }); | |
| }); | |
| var options = { | |
| index: startAt // start at first slide | |
| }; | |
| // Initializes and opens PhotoSwipe | |
| var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, arr, options); | |
| gallery.init(); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment