├── .gitattributes ├── .gitignore ├── README.txt ├── images ├── bigcleansing.jpg ├── bigeye.jpg ├── bigfreechoice.jpg ├── bigmikve.jpg ├── bigminian.jpg ├── bigshin.jpg ├── connection.jpg ├── sinai.jpg ├── steps.jpg └── tree.jpg ├── index.html ├── vue-photo-gallery.css └── vue-photo-gallery.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear in the root of a volume 35 | .DocumentRevisions-V100 36 | .fseventsd 37 | .Spotlight-V100 38 | .TemporaryItems 39 | .Trashes 40 | .VolumeIcon.icns 41 | 42 | # Directories potentially created on remote AFP share 43 | .AppleDB 44 | .AppleDesktop 45 | Network Trash Folder 46 | Temporary Items 47 | .apdisk 48 | -------------------------------------------------------------------------------- /README.txt: -------------------------------------------------------------------------------- 1 | In order for the gallery to work the only file you need to edit is vue-photo-gallery.js. 2 | You can have as many or as little galleries as you want. Just add/remove objects from the global_images_array. 3 | 4 | 5 | Each sub array in the main 'global_images_array' on the top of the file represents data for a single gallery: 6 | 1. images_array - array of images and their relative paths. 7 | 2. thumbnail_image - if image not specified the thumbnail image will be the first image in images_array. 8 | 3. category - name of category 9 | 4. project_name - name of project 10 | 11 | * using the same image twice in the same gallery will break the code. 12 | * dependencies - bootstrap.css, vue.js 2 13 | 14 | ENJOY :-) 15 | -------------------------------------------------------------------------------- /images/bigcleansing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drgamss/vue-photo-gallery/a0578a8065a6ffbc0ea38da68020a89063354c2f/images/bigcleansing.jpg -------------------------------------------------------------------------------- /images/bigeye.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drgamss/vue-photo-gallery/a0578a8065a6ffbc0ea38da68020a89063354c2f/images/bigeye.jpg -------------------------------------------------------------------------------- /images/bigfreechoice.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drgamss/vue-photo-gallery/a0578a8065a6ffbc0ea38da68020a89063354c2f/images/bigfreechoice.jpg -------------------------------------------------------------------------------- /images/bigmikve.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drgamss/vue-photo-gallery/a0578a8065a6ffbc0ea38da68020a89063354c2f/images/bigmikve.jpg -------------------------------------------------------------------------------- /images/bigminian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drgamss/vue-photo-gallery/a0578a8065a6ffbc0ea38da68020a89063354c2f/images/bigminian.jpg -------------------------------------------------------------------------------- /images/bigshin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drgamss/vue-photo-gallery/a0578a8065a6ffbc0ea38da68020a89063354c2f/images/bigshin.jpg -------------------------------------------------------------------------------- /images/connection.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drgamss/vue-photo-gallery/a0578a8065a6ffbc0ea38da68020a89063354c2f/images/connection.jpg -------------------------------------------------------------------------------- /images/sinai.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drgamss/vue-photo-gallery/a0578a8065a6ffbc0ea38da68020a89063354c2f/images/sinai.jpg -------------------------------------------------------------------------------- /images/steps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drgamss/vue-photo-gallery/a0578a8065a6ffbc0ea38da68020a89063354c2f/images/steps.jpg -------------------------------------------------------------------------------- /images/tree.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drgamss/vue-photo-gallery/a0578a8065a6ffbc0ea38da68020a89063354c2f/images/tree.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Vue JS Photo Gallery 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
30 |
31 |

Multiple Photo Galleries Built with vue.js

32 |
33 |
34 | 35 |
36 |
37 |

{{ gallery.category }}

38 |

{{ gallery.project_name }}

39 |
40 | 41 |
42 | 43 |
44 |
45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 | 54 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /vue-photo-gallery.css: -------------------------------------------------------------------------------- 1 | /*vue fading effect start*/ 2 | #root .fade-enter-active, #root .fade-leave-active { 3 | transition: opacity .5s 4 | } 5 | #root .fade-enter, #root .fade-leave-active { 6 | opacity: 0 7 | } 8 | /*vue fading effect end*/ 9 | #root { 10 | position: relative; 11 | } 12 | #root #gallery span i.fa-times { 13 | color: white; 14 | font-size: 48px; 15 | font-weight: 400; 16 | position: absolute; 17 | right: 20px; 18 | top: 20px; 19 | } 20 | #root .fa:hover, #root i.fa-remove:hover { 21 | color: #999bd2 !important; 22 | } 23 | #root .fa-remove, #root .fa-angle-left, #root .fa-angle-right { 24 | cursor: pointer; 25 | } 26 | #root .fa-angle-right { 27 | color: white; 28 | font-size: 70px; 29 | font-weight: 400; 30 | position: absolute; 31 | top: 50%; 32 | right: 30px; 33 | z-index: 9; 34 | } 35 | #root .fa-angle-left { 36 | color: white; 37 | font-size: 70px; 38 | font-weight: 400; 39 | position: absolute; 40 | /* float: left; */ 41 | top: 50%; 42 | left: 30px; 43 | z-index: 10; 44 | } 45 | #root .large-image-container { 46 | max-width: 645px; 47 | min-height: 250px; 48 | margin:auto; 49 | text-align: center; 50 | } 51 | #root .large-image-container img { 52 | user-select: none; 53 | -moz-user-select: none; 54 | -khtml-user-select: none; 55 | -webkit-user-select: none; 56 | -o-user-select: none; 57 | } 58 | #root .indicator { 59 | font-size: 14px; 60 | margin-top: 20px; 61 | margin-bottom: 20px; 62 | display: inline-block; 63 | min-height: 20px; 64 | } 65 | #root .image-container { 66 | margin-top: 10%; 67 | } 68 | #root .fa-close-container { 69 | position: absolute; 70 | top: 15px; 71 | right: 20px; 72 | display: block; 73 | color: white; 74 | font-size: 50px; 75 | cursor: pointer; 76 | } 77 | #root .black-bg { 78 | background: rgba(0, 0, 0, 0.7); 79 | position: fixed; 80 | top: 0px; 81 | width: calc(100%); 82 | height: 100vh; 83 | z-index: 1041; 84 | } 85 | #root .thumbnail-custom img { 86 | height: 250px; 87 | width: 100%; 88 | } 89 | #root .thumbnail-custom { 90 | padding: 0; 91 | } 92 | #root .thumbnail-custom > div { 93 | position: absolute; 94 | z-index: 20; 95 | top: 0; 96 | width: 100%; 97 | height: 100%; 98 | background: rgba(240,95,64,.9); 99 | cursor: pointer; 100 | padding-top: 70px; 101 | color: white; 102 | opacity: 0; 103 | transition: all 0.3s; 104 | } 105 | #root .thumbnail-custom > div:hover { 106 | opacity: 1; 107 | } 108 | #root .thumbnail-custom h4 { 109 | font-size: 21px; 110 | color: rgba(255,255,255,.7); 111 | } 112 | #root .thumbnail-container>.col-sm-4 { 113 | padding-left: 0; 114 | padding-right: 0; 115 | } 116 | 117 | 118 | /*media queries*/ 119 | @media(max-width: 991px){ 120 | #root .fa-angle-right, #root .fa-angle-left { 121 | top: 25%; 122 | } 123 | } 124 | @media(max-width: 767px){ 125 | #root .image-container { 126 | margin-top: 20%; 127 | } 128 | } 129 | @media(max-width: 410px){ 130 | #root .fa-close-container { 131 | top: 0px; 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /vue-photo-gallery.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 3 | // Each sub array in this main 'global_images_array' represents data for a single gallery: 4 | // 1. images_array - array of images and their relative paths. 5 | // 2. thumbnail_image - if image not specified the thumbnail image will be the first image in images_array. 6 | // 3. category - name of category 7 | // 4. project_name - name of project 8 | // You can have as many or as little galleries as you want. Just add/remove objects from the global_images_array. 9 | // Thats it, Nothing else is needed :-) 10 | 11 | 12 | var global_images_array = [ 13 | // first gallery object 14 | { images_array: ['images/bigcleansing.jpg', 'images/bigeye.jpg', 'images/bigfreechoice.jpg', 'images/bigminian.jpg', 'images/steps.jpg'], 15 | thumbnail_image: '', 16 | category: '1st Cotegory', 17 | project_name: '1st Project'}, 18 | 19 | 20 | // second gallery object 21 | { images_array: ['images/sinai.jpg', 'images/tree.jpg', 'images/bigeye.jpg', 'images/bigfreechoice.jpg', 'images/bigminian.jpg'], 22 | thumbnail_image: '', 23 | category: '2nd Category', 24 | project_name: '2nd Project'}, 25 | 26 | 27 | // third gallery object 28 | { images_array: ['images/bigeye.jpg', 'images/bigcleansing.jpg', 'images/bigfreechoice.jpg', 'images/tree.jpg', 'images/steps.jpg'], 29 | thumbnail_image: '', 30 | category: '3rd Category', 31 | project_name: '3rd Project'}, 32 | 33 | 34 | // fourth gallery object 35 | { images_array: ['images/bigfreechoice.jpg', 'images/tree.jpg', 'images/bigeye.jpg', 'images/steps.jpg', 'images/bigminian.jpg'], 36 | thumbnail_image: '', 37 | category: '4th Category', 38 | project_name: '4th Project'}, 39 | 40 | 41 | // fifth gallery object 42 | { images_array: ['images/steps.jpg', 'images/bigeye.jpg', 'images/connection.jpg', 'images/bigminian.jpg', 'images/tree.jpg'], 43 | thumbnail_image: '', 44 | category: '5th Category', 45 | project_name: '5th Project'}, 46 | 47 | 48 | // sixth gallery object 49 | { images_array: ['images/bigminian.jpg', 'images/bigcleansing.jpg', 'images/bigshin.jpg', 'images/bigfreechoice.jpg', 'images/steps.jpg'], 50 | thumbnail_image: '', 51 | category: '6th Category', 52 | project_name: '6th Project'} , 53 | 54 | 55 | // seventh gallery object 56 | { images_array: ['images/tree.jpg', 'images/bigcleansing.jpg', 'images/bigeye.jpg', 'images/bigfreechoice.jpg', 'images/steps.jpg'], 57 | thumbnail_image: 'images/bigmikve.jpg', 58 | category: '7th Category', 59 | project_name: '7th Project'}, 60 | 61 | 62 | // eigth gallery object 63 | { images_array: ['images/tree.jpg', 'images/bigmikve.jpg', 'images/bigshin.jpg', 'images/connection.jpg', 'images/steps.jpg'], 64 | thumbnail_image: 'images/connection.jpg', 65 | category: '8th Category', 66 | project_name: '8th Project'}, 67 | 68 | 69 | // ninth gallery object 70 | { images_array: ['images/tree.jpg', 'images/connection.jpg', 'images/bigeye.jpg', 'images/bigfreechoice.jpg', 'images/steps.jpg'], 71 | thumbnail_image: 'images/bigshin.jpg', 72 | category: '9th Category', 73 | project_name: '9th Project'} 74 | ]; 75 | 76 | 77 | 78 | // code under here is not needed to be touched unless you want to play around :-) 79 | 80 | for(var i = 0; i < global_images_array.length; i++ ){ 81 | global_images_array[i].array_index = i; 82 | global_images_array[i].thumbnail_image = global_images_array[i].thumbnail_image || global_images_array[i].images_array[0]; 83 | } 84 | 85 | 86 | Vue.component('gallery-modal', { 87 | template: '#photo-gallery-template', 88 | props: ['imageArray'], 89 | data: function(){ 90 | return { 91 | images_array: this.imageArray, 92 | current_image: this.imageArray[0] 93 | } 94 | }, 95 | computed: { 96 | current_index: function(){ 97 | return this.images_array.indexOf(this.current_image) + 1; 98 | }, 99 | total: function(){ 100 | return this.images_array.length; 101 | } 102 | }, 103 | methods: { 104 | showingFirstImage: function(){ 105 | return this.images_array.indexOf(this.current_image) === 0; 106 | }, 107 | showingLastImage: function(){ 108 | return this.images_array.length === (this.images_array.indexOf(this.current_image) + 1); 109 | }, 110 | goToFirstImage: function(){ 111 | this.current_image = this.images_array[0]; 112 | }, 113 | goToLastImage: function(){ 114 | var next_index = this.images_array.length - 1; 115 | this.current_image = this.images_array[next_index]; 116 | }, 117 | jumpForward: function(){ 118 | var next_index = this.images_array.indexOf(this.current_image) + 1; 119 | this.current_image = this.images_array[next_index]; 120 | }, 121 | jumpBack: function(){ 122 | var next_index = this.images_array.indexOf(this.current_image) - 1; 123 | this.current_image = this.images_array[next_index]; 124 | }, 125 | moveToPreviousImageClick: function(){ 126 | if(this.showingFirstImage()){ 127 | this.goToLastImage() 128 | } else { 129 | this.jumpBack() 130 | } 131 | }, 132 | moveToNextImageClick: function(){ 133 | if(this.showingLastImage()){ 134 | this.goToFirstImage() 135 | } else { 136 | this.jumpForward() 137 | } 138 | }, 139 | closeModal: function(){ 140 | this.$emit('closemodal'); 141 | } 142 | } 143 | }) 144 | 145 | 146 | // main vue instance 147 | 148 | new Vue({ 149 | el: '#root', 150 | data: { 151 | showModal: false, 152 | current_array_index: 0, 153 | images_array: global_images_array 154 | }, 155 | 156 | methods: { 157 | showGalleryModal: function(index){ 158 | // show modal and hide scrollbar 159 | this.showModal = true; 160 | document.body.style.overflow = 'hidden'; 161 | // update current array index being shown. 162 | this.current_array_index = index; 163 | }, 164 | closeModal: function(){ 165 | // hide modal and bring back scrollbar. 166 | this.showModal = false; 167 | document.body.style.overflow = 'visible'; 168 | } 169 | }, 170 | computed: { 171 | current_array: function(){ 172 | return this.images_array[this.current_array_index].images_array; 173 | } 174 | } 175 | }) 176 | 177 | 178 | }()); 179 | 180 | 181 | --------------------------------------------------------------------------------