Changeset 2364553
- Timestamp:
- 08/19/2020 05:59:38 AM (6 years ago)
- Location:
- gallery-plugin-by-mateusz-styrna/trunk
- Files:
-
- 7 edited
-
assets.php (modified) (1 diff)
-
css/front.css (modified) (2 diffs)
-
css/front.css.map (modified) (1 diff)
-
css/front.scss (modified) (2 diffs)
-
front.php (modified) (1 diff)
-
gallery.php (modified) (1 diff)
-
js/gallery.js (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
-
gallery-plugin-by-mateusz-styrna/trunk/assets.php
r2233743 r2364553 23 23 wp_localize_script( 'gallery-js', 'site', $script_params ); 24 24 wp_enqueue_style( 'gallery-css-front', plugins_url('/css/front.css', __FILE__), '', '1.0.0', false ); 25 wp_enqueue_style( 'google-icons', 'https://fonts.googleapis.com/icon?family=Material+Icons', '', '1.0.0', false );26 25 } 27 26 ?> -
gallery-plugin-by-mateusz-styrna/trunk/css/front.css
r2233743 r2364553 68 68 width: 33px; 69 69 height: 33px; 70 position: absolute ;70 position: absolute !important; 71 71 font-size: 32px !important; 72 72 transition: all 300ms; } … … 83 83 width: 50px; 84 84 height: 50px; 85 position: absolute ;85 position: absolute !important; 86 86 font-size: 50px !important; 87 87 transition: all 300ms; } -
gallery-plugin-by-mateusz-styrna/trunk/css/front.css.map
r2233743 r2364553 1 1 { 2 2 "version": 3, 3 "mappings": "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",3 "mappings": "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", 4 4 "sources": ["front.scss"], 5 5 "names": [], -
gallery-plugin-by-mateusz-styrna/trunk/css/front.scss
r2233743 r2364553 88 88 width: 33px; 89 89 height: 33px; 90 position: absolute ;90 position: absolute !important; 91 91 font-size: 32px !important; 92 92 transition: all 300ms; … … 107 107 width: 50px; 108 108 height: 50px; 109 position: absolute ;109 position: absolute !important; 110 110 font-size: 50px !important; 111 111 transition: all 300ms; -
gallery-plugin-by-mateusz-styrna/trunk/front.php
r2233743 r2364553 32 32 </div> 33 33 <div id='ms_gallery_fullscreen_".$a['id']."' class='ms_gallery_fullscreen material-icons'>fullscreen</div> 34 <img src='' title='' alt='' class='ms_gallery_image' id='ms_gallery_image_".$a['id']."' > 34 35 </div> 35 36 </div> -
gallery-plugin-by-mateusz-styrna/trunk/gallery.php
r2233743 r2364553 28 28 29 29 require 'activation.php'; 30 require 'menu .php';30 require 'menus.php'; 31 31 require 'assets.php'; 32 32 require 'galleries.php'; -
gallery-plugin-by-mateusz-styrna/trunk/js/gallery.js
r2233743 r2364553 1 let galleries = document.getElementsByClassName('ms_gallery_thumbnails'); 2 let images = []; 1 jQuery(document).ready(function($) { 2 let x = document.getElementsByClassName('ms_gallery_thumbnails'); 3 let galleries = []; 3 4 4 for (let i = 0; i < galleries.length; i++) {5 let id = galleries[i].getAttribute("id");6 id = id.replace("ms_gallery_thumbnails_", "");7 getImages(id);8 }5 for (let i = 0; i < x.length; i++) { 6 let id = x[i].getAttribute("id"); 7 id = id.replace("ms_gallery_thumbnails_", ""); 8 loadImages(id); 9 } 9 10 10 function changeImage(galleryId, current, currentImage) { 11 currentImage.setAttribute("src", images.find(x => x.id == galleryId).images[current].src); 12 currentImage.setAttribute("alt", images.find(x => x.id == galleryId).images[current].alt); 13 currentImage.setAttribute("title", images.find(x => x.id == galleryId).images[current].title); 14 } 11 function changeImage(galleryId, selectedImage, preview) { 12 preview.setAttribute("src", galleries.find(x => x.id == galleryId).images[selectedImage].src); 13 preview.setAttribute("alt", galleries.find(x => x.id == galleryId).images[selectedImage].alt); 14 preview.setAttribute("title", galleries.find(x => x.id == galleryId).images[selectedImage].title); 15 galleries.find(x => x.id == galleryId).selectedImage = selectedImage; 16 } 15 17 16 function getImages(galleryId) { 17 $.ajax({ 18 url: site.url + '/wp-admin/admin-ajax.php', 19 type: 'POST', 20 data: { 21 action: 'ms_get_galleries', 22 id: galleryId 23 }, 24 success: function(data){ 25 data = JSON.parse(data); 26 let id = 0; 27 for (let i = 0; i < data.length; i++) { 28 let image = `<img src='${data[i].src}' 29 title='${data[i].title}' 30 alt='${data[i].alt}' 31 id='ms_gallery_thumbnail_${galleryId}_${id}' 32 class='ms_gallery_thumbnail ms_gallery_thumbnail_${galleryId}'>`; 18 function prepareFullScreen(galleryId) { 19 let src = $(`#ms_gallery_image_${galleryId}`).attr('src'); 20 let title = $(`#ms_gallery_image_${galleryId}`).attr('title'); 33 21 34 let thumbnails = document.getElementById(`ms_gallery_thumbnails_${galleryId}`); 35 thumbnails.innerHTML += image; 36 id++; 22 $(`#ms_gallery_fullbox_image_${galleryId}`).attr({'src':src, 'title':title}); 23 } 24 25 function loadImages(galleryId) { 26 let preview = document.getElementById(`ms_gallery_image_${galleryId}`); 27 $.ajax({ 28 url: site.url + '/wp-admin/admin-ajax.php', 29 type: 'POST', 30 data: { 31 action: 'ms_get_galleries', 32 id: galleryId 33 }, 34 success: function(data){ 35 data = JSON.parse(data); 36 for (let i = 0; i < data.length; i++) { 37 let img = document.createElement("img"); 38 img.src = data[i].src; 39 img.title = data[i].title; 40 img.alt = data[i].alt; 41 img.id = `ms_gallery_thumbnail_${galleryId}_${i}`; 42 img.classList.add(`ms_gallery_thumbnail`); 43 img.classList.add(`ms_gallery_thumbnail_${galleryId}`); 44 45 let thumbnails = document.getElementById(`ms_gallery_thumbnails_${galleryId}`); 46 thumbnails.appendChild(img); 47 } 48 49 galleries.push({ 50 id: galleryId, 51 images: data, 52 selectedImage: 0 53 }); 54 55 changeImage(galleryId, 0, preview); 56 57 //next 58 $(`#ms_gallery_next_${galleryId}`).click(()=>{ 59 let selectedImage = galleries.find(x => x.id == galleryId).selectedImage; 60 if (selectedImage < galleries.find(x => x.id == galleryId).images.length-1) { 61 selectedImage++; 62 } 63 else { 64 selectedImage = 0; 65 } 66 changeImage(galleryId, selectedImage, preview); 67 }); 68 69 //double next 70 $(`#ms_gallery_doublenext_${galleryId}`).click(()=>{ 71 let selectedImage = galleries.find(x => x.id == galleryId).selectedImage; 72 if (selectedImage < galleries.find(x => x.id == galleryId).images.length-2) { 73 selectedImage += 2; 74 } 75 else { 76 if (selectedImage == galleries.find(x => x.id == galleryId).images.length-1) 77 selectedImage = 1; 78 else 79 selectedImage = 0; 80 } 81 changeImage(galleryId, selectedImage, preview); 82 }); 83 84 //previous 85 $(`#ms_gallery_previous_${galleryId}`).click(()=>{ 86 let selectedImage = galleries.find(x => x.id == galleryId).selectedImage; 87 if (selectedImage > 0) { 88 selectedImage--; 89 } 90 else { 91 selectedImage = galleries.find(x => x.id == galleryId).images.length-1; 92 } 93 changeImage(galleryId, selectedImage, preview); 94 }); 95 96 //double previous 97 $(`#ms_gallery_doubleprevious_${galleryId}`).click(()=>{ 98 let selectedImage = galleries.find(x => x.id == galleryId).selectedImage; 99 if (selectedImage > 1) { 100 selectedImage -= 2; 101 } 102 else { 103 if (selectedImage == 0) 104 selectedImage = galleries.find(x => x.id == galleryId).images.length-2; 105 else 106 selectedImage = galleries.find(x => x.id == galleryId).images.length-1; 107 } 108 changeImage(galleryId, selectedImage, preview); 109 }); 110 111 //fullscreen 112 $(`#ms_gallery_fullscreen_${galleryId}`).click(()=>{ 113 prepareFullScreen(galleryId); 114 $(`#ms_gallery_fullbox_${galleryId}`).css('display', 'flex'); 115 }); 116 117 //fullscreen exit 118 $(`#ms_gallery_fullscreenexit_${galleryId}`).click(()=>{ 119 $(`#ms_gallery_fullbox_${galleryId}`).css('display', 'none'); 120 }); 121 122 //thumbnails clicks 123 $(`.ms_gallery_thumbnail_${galleryId}`).click((e)=>{ 124 let selectedImage = e.target.id.replace(`ms_gallery_thumbnail_${galleryId}_`, ``); 125 changeImage(galleryId, selectedImage, preview); 126 }); 127 128 prepareFullScreen(galleryId); 37 129 } 38 39 images.push({ 40 id: galleryId, 41 images: data, 42 current: 0 43 }); 44 45 let preview = document.getElementById(`ms_gallery_preview_${galleryId}`); 46 47 preview.innerHTML += `<img 48 src='${images.find(x => x.id == galleryId).images[0].src}' 49 title='${images.find(x => x.id == galleryId).images[0].title}' 50 alt='${images.find(x => x.id == galleryId).images[0].alt}' 51 class='ms_gallery_image' 52 id='ms_gallery_image_${galleryId}' 53 >`; 54 55 //next 56 $(`#ms_gallery_next_${galleryId}`).click(()=>{ 57 let current = images.find(x => x.id == galleryId).current; 58 let currentImage = document.getElementById(`ms_gallery_image_${galleryId}`); 59 if (current < images.find(x => x.id == galleryId).images.length-1) { 60 current++; 61 } 62 else { 63 current = 0; 64 } 65 changeImage(galleryId, current, currentImage); 66 images.find(x => x.id == galleryId).current = current; 67 }); 68 69 //double next 70 $(`#ms_gallery_doublenext_${galleryId}`).click(()=>{ 71 let current = images.find(x => x.id == galleryId).current; 72 let currentImage = document.getElementById(`ms_gallery_image_${galleryId}`); 73 if (current < images.find(x => x.id == galleryId).images.length-2) { 74 current += 2; 75 } 76 else { 77 if (current == images.find(x => x.id == galleryId).images.length-1) 78 current = 1; 79 else 80 current = 0; 81 } 82 changeImage(galleryId, current, currentImage); 83 images.find(x => x.id == galleryId).current = current; 84 }); 85 86 //previous 87 $(`#ms_gallery_previous_${galleryId}`).click(()=>{ 88 let current = images.find(x => x.id == galleryId).current; 89 let currentImage = document.getElementById(`ms_gallery_image_${galleryId}`); 90 if (current > 0) { 91 current--; 92 } 93 else { 94 current = images.find(x => x.id == galleryId).images.length-1; 95 } 96 changeImage(galleryId, current, currentImage); 97 images.find(x => x.id == galleryId).current = current; 98 }); 99 100 //double previous 101 $(`#ms_gallery_doubleprevious_${galleryId}`).click(()=>{ 102 let current = images.find(x => x.id == galleryId).current; 103 let currentImage = document.getElementById(`ms_gallery_image_${galleryId}`); 104 if (current > 1) { 105 current -= 2; 106 } 107 else { 108 if (current == 0) 109 current = images.find(x => x.id == galleryId).images.length-2; 110 else 111 current = images.find(x => x.id == galleryId).images.length-1; 112 } 113 changeImage(galleryId, current, currentImage); 114 images.find(x => x.id == galleryId).current = current; 115 }); 116 117 //fullscreen 118 $(`#ms_gallery_fullscreen_${galleryId}`).click(()=>{ 119 let src = $(`#ms_gallery_image_${galleryId}`).attr('src'); 120 let title = $(`#ms_gallery_image_${galleryId}`).attr('title'); 121 122 $(`#ms_gallery_fullbox_image_${galleryId}`).attr({'src':src, 'title':title}); 123 $(`#ms_gallery_fullbox_${galleryId}`).css('display', 'flex'); 124 }); 125 126 //fullscreenexit 127 $(`#ms_gallery_fullscreenexit_${galleryId}`).click(()=>{ 128 $(`#ms_gallery_fullbox_${galleryId}`).css('display', 'none'); 129 }); 130 131 //thumbnails clicks 132 $(`.ms_gallery_thumbnail_${galleryId}`).click((e)=>{ 133 let current = e.target.id.replace(`ms_gallery_thumbnail_${galleryId}_`, ``); 134 let currentImage = document.getElementById(`ms_gallery_image_${galleryId}`); 135 changeImage(galleryId, current, currentImage); 136 images.find(x => x.id == galleryId).current = current; 137 }); 138 } 139 }); 140 } 130 }); 131 } 132 });
Note: See TracChangeset
for help on using the changeset viewer.