Commit c4d70d93c9b3a481420738d826ad2b3ddbcff316
1 parent
4368a120
- blog
- forms - gallery
Showing
10 changed files
with
296 additions
and
6 deletions
Show diff stats
common/models/event/Tag.php
console/migrations/m180403_141700_add_page_columns.php
... | ... | @@ -12,8 +12,8 @@ class m180403_141700_add_page_columns extends Migration |
12 | 12 | */ |
13 | 13 | public function safeUp() |
14 | 14 | { |
15 | - $this->addColumn('page','updated_at', $this->timestamp()); | |
16 | - $this->addColumn('page','created_at', $this->timestamp()); | |
15 | + $this->addColumn('page','updated_at', $this->string()); | |
16 | + $this->addColumn('page','created_at', $this->string()); | |
17 | 17 | } |
18 | 18 | |
19 | 19 | /** | ... | ... |
1 | +<?php | |
2 | + /** | |
3 | + * Created by PhpStorm. | |
4 | + * User: stes | |
5 | + * Date: 07.05.18 | |
6 | + * Time: 17:29 | |
7 | + */ | |
8 | + | |
9 | + namespace frontend\assets; | |
10 | + | |
11 | + use yii\web\AssetBundle; | |
12 | + | |
13 | + class GalleryAsset extends AssetBundle | |
14 | + { | |
15 | + public $basePath = '@webroot'; | |
16 | + public $baseUrl = '@web'; | |
17 | + public $css = [ | |
18 | + 'css/photoswipe.css' | |
19 | + ]; | |
20 | + public $js = [ | |
21 | + 'js/photoswipe.min.js', | |
22 | + 'js/photoswipe-ui-default.min.js', | |
23 | + 'js/gallery.js' | |
24 | + ]; | |
25 | + public $depends = [ | |
26 | + 'frontend\assets\AppAsset', | |
27 | + ]; | |
28 | + } | |
0 | 29 | \ No newline at end of file | ... | ... |
frontend/config/main.php
... | ... | @@ -56,16 +56,19 @@ |
56 | 56 | 'options' => [], |
57 | 57 | ], |
58 | 58 | ], |
59 | + 'buttonContent' => 'Send', | |
59 | 60 | 'scenario' => 'feedback', |
60 | 61 | 'sendEmail' => false, |
61 | 62 | 'formId' => 'feedback-form', |
62 | 63 | 'ajax' => true, |
63 | 64 | 'successCallback' => 'function (data) { |
65 | + document.getElementById("feedback-form").reset(); | |
64 | 66 | $(".close").click(); |
65 | 67 | $(".success_").animate({opacity: 1, top: \'40\'}, 200).addClass("done_"); |
66 | 68 | setTimeout(function(){$(".success_").animate({opacity: 0, top: \'0\'}, 200,function(){ |
67 | 69 | $(this).removeClass("done_"); |
68 | 70 | })}, 4000); |
71 | + | |
69 | 72 | }', |
70 | 73 | ], |
71 | 74 | |
... | ... | @@ -126,6 +129,7 @@ |
126 | 129 | 'formId' => 'contact-form', |
127 | 130 | 'scenario' => 'default', |
128 | 131 | 'successCallback' => 'function (data) { |
132 | + document.getElementById("contact-form").reset(); | |
129 | 133 | $(".close").click(); |
130 | 134 | $(".success_").animate({opacity: 1, top: \'40\'}, 200).addClass("done_"); |
131 | 135 | setTimeout(function(){$(".success_").animate({opacity: 0, top: \'0\'}, 200,function(){ | ... | ... |
1 | +<?php | |
2 | + /** | |
3 | + * Created by PhpStorm. | |
4 | + * User: stes | |
5 | + * Date: 07.05.18 | |
6 | + * Time: 17:08 | |
7 | + */ | |
8 | + | |
9 | + namespace frontend\controllers; | |
10 | + | |
11 | + use common\models\Gallery; | |
12 | + use yii\web\Controller; | |
13 | + | |
14 | + class GalleryController extends Controller | |
15 | + { | |
16 | + public function actionIndex(){ | |
17 | + $images = Gallery::find()->with('language')->where(['status' => true])->orderBy('sort')->all(); | |
18 | + return $this->render('index', [ | |
19 | + 'images' => $images | |
20 | + ]); | |
21 | + } | |
22 | + } | |
0 | 23 | \ No newline at end of file | ... | ... |
frontend/views/event/tag.php
frontend/views/event/view.php
1 | +<?php | |
2 | + /** | |
3 | + * @var \common\models\Gallery[] $images; | |
4 | + */ | |
5 | + use artbox\core\helpers\ImageHelper; | |
6 | + use frontend\assets\GalleryAsset; | |
7 | + | |
8 | + $this->params[ 'breadcrumbs' ][] = \Yii::t('app', 'Gallery'); | |
9 | + GalleryAsset::register($this); | |
10 | + ?> | |
11 | + | |
12 | + | |
13 | + | |
14 | + | |
15 | +<div id="content"> | |
16 | + <div class="container"> | |
17 | + <div class="row"> | |
18 | + <div class="col-md-12"> | |
19 | + <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery"> | |
20 | + <?php foreach ($images as $gallery){?> | |
21 | + <figure class="reviews_gallery"> | |
22 | + <a href="<?=$gallery->image->getUrl()?>" itemprop="contentUrl" data-size="<?= getimagesize( | |
23 | + $gallery->image->getPath() | |
24 | + )[ 0 ] ?>x<?= getimagesize($gallery->image->getPath() | |
25 | + )[ 1 ] ?>"> | |
26 | + <img src="<?= ImageHelper::set($gallery->image->getPath()) | |
27 | + ->resize(360, 216) | |
28 | + ->quality(82) | |
29 | + ->render( | |
30 | + ) ?>" itemprop="thumbnail" alt="<?=$gallery->title?>"/> | |
31 | + </a> | |
32 | + </figure> | |
33 | + <?php }?> | |
34 | + </div> | |
35 | + </div> | |
36 | + </div> | |
37 | + </div> | |
38 | +</div> | |
39 | + | |
40 | +<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> | |
41 | + | |
42 | + <div class="pswp__bg"></div> | |
43 | + | |
44 | + <div class="pswp__scroll-wrap"> | |
45 | + | |
46 | + <div class="pswp__container"> | |
47 | + <div class="pswp__item"></div> | |
48 | + <div class="pswp__item"></div> | |
49 | + <div class="pswp__item"></div> | |
50 | + </div> | |
51 | + | |
52 | + <div class="pswp__ui pswp__ui--hidden"> | |
53 | + <div class="pswp__top-bar"> | |
54 | + | |
55 | + <div class="pswp__counter"></div> | |
56 | + <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> | |
57 | + <button class="pswp__button pswp__button--share" title="Share"></button> | |
58 | + <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> | |
59 | + <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> | |
60 | + | |
61 | + | |
62 | + <div class="pswp__preloader"> | |
63 | + <div class="pswp__preloader__icn"> | |
64 | + <div class="pswp__preloader__cut"> | |
65 | + <div class="pswp__preloader__donut"></div> | |
66 | + </div> | |
67 | + </div> | |
68 | + </div> | |
69 | + </div> | |
70 | + <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> | |
71 | + <div class="pswp__share-tooltip"></div> | |
72 | + </div> | |
73 | + <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> | |
74 | + </button> | |
75 | + <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> | |
76 | + </button> | |
77 | + <div class="pswp__caption"> | |
78 | + <div class="pswp__caption__center"></div> | |
79 | + </div> | |
80 | + </div> | |
81 | + </div> | |
82 | +</div> | |
83 | + | ... | ... |
frontend/views/site/index.php
... | ... | @@ -24,7 +24,7 @@ _________________________________________________________ --> |
24 | 24 | <div class="homepage owl-carousel" > |
25 | 25 | |
26 | 26 | <?php foreach ($slides as $key => $slide){?> |
27 | - <div class="home-carousel" style="background: url(<?=$slide->background->getPath()?>) center center repeat"> | |
27 | + <div class="home-carousel" style="background: url(<?=$slide->background->getUrl()?>) center center repeat"> | |
28 | 28 | <div class="item"> |
29 | 29 | <div class="row"> |
30 | 30 | <div class="col-sm-5 <?=($key%2 == 0) ? 'right' : ''?>"> | ... | ... |
1 | +var initPhotoSwipeFromDOM = function(gallerySelector) { | |
2 | + // parse slide data (url, title, size ...) from DOM elements | |
3 | + // (children of gallerySelector) | |
4 | + var parseThumbnailElements = function(el) { | |
5 | + var thumbElements = el.childNodes, numNodes = thumbElements.length, items = [], figureEl, linkEl, size, item; | |
6 | + for (var i = 0; i < numNodes; i++) { | |
7 | + figureEl = thumbElements[ i ]; // <figure> element | |
8 | + // include only element nodes | |
9 | + if (figureEl.nodeType !== 1) { | |
10 | + continue; | |
11 | + } | |
12 | + linkEl = figureEl.children[ 0 ]; // <a> element | |
13 | + size = linkEl.getAttribute('data-size') | |
14 | + .split('x'); | |
15 | + // create slide object | |
16 | + item = { | |
17 | + src: linkEl.getAttribute('href'), | |
18 | + w: parseInt(size[ 0 ], 10), | |
19 | + h: parseInt(size[ 1 ], 10) | |
20 | + }; | |
21 | + if (figureEl.children.length > 1) { | |
22 | + // <figcaption> content | |
23 | + item.title = figureEl.children[ 1 ].innerHTML; | |
24 | + } | |
25 | + if (linkEl.children.length > 0) { | |
26 | + // <img> thumbnail element, retrieving thumbnail url | |
27 | + item.msrc = linkEl.children[ 0 ].getAttribute('src'); | |
28 | + } | |
29 | + item.el = figureEl; // save link to element for getThumbBoundsFn | |
30 | + items.push(item); | |
31 | + } | |
32 | + return items; | |
33 | + }; | |
34 | + // find nearest parent element | |
35 | + var closest = function closest(el, fn) { | |
36 | + return el && ( fn(el) ? el : closest(el.parentNode, fn) ); | |
37 | + }; | |
38 | + // triggers when user clicks on thumbnail | |
39 | + var onThumbnailsClick = function(e) { | |
40 | + e = e || window.event; | |
41 | + e.preventDefault ? e.preventDefault() : e.returnValue = false; | |
42 | + var eTarget = e.target || e.srcElement; | |
43 | + // find root element of slide | |
44 | + var clickedListItem = closest( | |
45 | + eTarget, function(el) { | |
46 | + return (el.tagName && el.tagName.toUpperCase() === 'FIGURE'); | |
47 | + } | |
48 | + ); | |
49 | + if (!clickedListItem) { | |
50 | + return; | |
51 | + } | |
52 | + // find index of clicked item by looping through all child nodes | |
53 | + // alternatively, you may define index via data- attribute | |
54 | + var clickedGallery = clickedListItem.parentNode, childNodes = clickedListItem.parentNode.childNodes, numChildNodes = childNodes.length, nodeIndex = 0, index; | |
55 | + for (var i = 0; i < numChildNodes; i++) { | |
56 | + if (childNodes[ i ].nodeType !== 1) { | |
57 | + continue; | |
58 | + } | |
59 | + if (childNodes[ i ] === clickedListItem) { | |
60 | + index = nodeIndex; | |
61 | + break; | |
62 | + } | |
63 | + nodeIndex++; | |
64 | + } | |
65 | + if (index >= 0) { | |
66 | + // open PhotoSwipe if valid index found | |
67 | + openPhotoSwipe(index, clickedGallery); | |
68 | + } | |
69 | + return false; | |
70 | + }; | |
71 | + // parse picture index and gallery index from URL (#&pid=1&gid=2) | |
72 | + var photoswipeParseHash = function() { | |
73 | + var hash = window.location.hash.substring(1), params = {}; | |
74 | + if (hash.length < 5) { | |
75 | + return params; | |
76 | + } | |
77 | + var vars = hash.split('&'); | |
78 | + for (var i = 0; i < vars.length; i++) { | |
79 | + if (!vars[ i ]) { | |
80 | + continue; | |
81 | + } | |
82 | + var pair = vars[ i ].split('='); | |
83 | + if (pair.length < 2) { | |
84 | + continue; | |
85 | + } | |
86 | + params[ pair[ 0 ] ] = pair[ 1 ]; | |
87 | + } | |
88 | + if (params.gid) { | |
89 | + params.gid = parseInt(params.gid, 10); | |
90 | + } | |
91 | + return params; | |
92 | + }; | |
93 | + var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) { | |
94 | + var pswpElement = document.querySelectorAll('.pswp')[ 0 ], gallery, options, items; | |
95 | + items = parseThumbnailElements(galleryElement); | |
96 | + // define options (if needed) | |
97 | + options = { | |
98 | + // define gallery index (for URL) | |
99 | + galleryUID: galleryElement.getAttribute('data-pswp-uid'), | |
100 | + getThumbBoundsFn: function(index) { | |
101 | + // See Options -> getThumbBoundsFn section of documentation for more info | |
102 | + var thumbnail = items[ index ].el.getElementsByTagName('img')[ 0 ], // find thumbnail | |
103 | + pageYScroll = window.pageYOffset || document.documentElement.scrollTop, rect = thumbnail.getBoundingClientRect(); | |
104 | + return { | |
105 | + x: rect.left, | |
106 | + y: rect.top + pageYScroll, | |
107 | + w: rect.width | |
108 | + }; | |
109 | + } | |
110 | + }; | |
111 | + // PhotoSwipe opened from URL | |
112 | + if (fromURL) { | |
113 | + if (options.galleryPIDs) { | |
114 | + // parse real index when custom PIDs are used | |
115 | + // http://photoswipe.com/documentation/faq.html#custom-pid-in-url | |
116 | + for (var j = 0; j < items.length; j++) { | |
117 | + if (items[ j ].pid == index) { | |
118 | + options.index = j; | |
119 | + break; | |
120 | + } | |
121 | + } | |
122 | + } else { | |
123 | + // in URL indexes start from 1 | |
124 | + options.index = parseInt(index, 10) - 1; | |
125 | + } | |
126 | + } else { | |
127 | + options.index = parseInt(index, 10); | |
128 | + } | |
129 | + // exit if index not found | |
130 | + if (isNaN(options.index)) { | |
131 | + return; | |
132 | + } | |
133 | + if (disableAnimation) { | |
134 | + options.showAnimationDuration = 0; | |
135 | + } | |
136 | + // Pass data to PhotoSwipe and initialize it | |
137 | + gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); | |
138 | + gallery.init(); | |
139 | + }; | |
140 | + // loop through all gallery elements and bind events | |
141 | + var galleryElements = document.querySelectorAll(gallerySelector); | |
142 | + for (var i = 0, l = galleryElements.length; i < l; i++) { | |
143 | + galleryElements[ i ].setAttribute('data-pswp-uid', i + 1); | |
144 | + galleryElements[ i ].onclick = onThumbnailsClick; | |
145 | + } | |
146 | + // Parse URL and open gallery if it contains #&pid=3&gid=1 | |
147 | + var hashData = photoswipeParseHash(); | |
148 | + if (hashData.pid && hashData.gid) { | |
149 | + openPhotoSwipe(hashData.pid, galleryElements[ hashData.gid - 1 ], true, true); | |
150 | + } | |
151 | +}; | |
152 | +// execute above function | |
153 | +initPhotoSwipeFromDOM('.my-gallery'); | ... | ... |