add lightbox
This commit is contained in:
kevin
@@ -24,6 +24,7 @@
|
|||||||
"drupal/core-recommended": "^8.8",
|
"drupal/core-recommended": "^8.8",
|
||||||
"drupal/entity_browser_enhanced": "^1.0",
|
"drupal/entity_browser_enhanced": "^1.0",
|
||||||
"drupal/field_group": "^3.0",
|
"drupal/field_group": "^3.0",
|
||||||
|
"drupal/field_pager": "^2.0@beta",
|
||||||
"drupal/field_token_value": "^1.0",
|
"drupal/field_token_value": "^1.0",
|
||||||
"drupal/geocoder": "^3.7",
|
"drupal/geocoder": "^3.7",
|
||||||
"drupal/geofield": "^1.15",
|
"drupal/geofield": "^1.15",
|
||||||
@@ -48,6 +49,7 @@
|
|||||||
"drupal/transliterate_filenames": "^1.4",
|
"drupal/transliterate_filenames": "^1.4",
|
||||||
"drupal/varbase_total_control": "^6.11",
|
"drupal/varbase_total_control": "^6.11",
|
||||||
"drupal/video_embed_field": "^2.4",
|
"drupal/video_embed_field": "^2.4",
|
||||||
|
"drupal/views_infinite_scroll": "^1.7",
|
||||||
"drupal/views_url_path_arguments": "^1.1",
|
"drupal/views_url_path_arguments": "^1.1",
|
||||||
"drush/drush": "^10.2",
|
"drush/drush": "^10.2",
|
||||||
"geocoder-php/chain-provider": "^4.2",
|
"geocoder-php/chain-provider": "^4.2",
|
||||||
|
|||||||
Generated
+108
-6
@@ -4,7 +4,7 @@
|
|||||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||||
"This file is @generated automatically"
|
"This file is @generated automatically"
|
||||||
],
|
],
|
||||||
"content-hash": "c99b8032f0c1003b6bc4c819b9f0afb2",
|
"content-hash": "a227b81fa65a8149cb57650099cde6cf",
|
||||||
"packages": [
|
"packages": [
|
||||||
{
|
{
|
||||||
"name": "asm89/stack-cors",
|
"name": "asm89/stack-cors",
|
||||||
@@ -111,12 +111,12 @@
|
|||||||
"version": "v1.5.0",
|
"version": "v1.5.0",
|
||||||
"source": {
|
"source": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/clue/php-stream-filter.git",
|
"url": "https://github.com/clue/stream-filter.git",
|
||||||
"reference": "aeb7d8ea49c7963d3b581378955dbf5bc49aa320"
|
"reference": "aeb7d8ea49c7963d3b581378955dbf5bc49aa320"
|
||||||
},
|
},
|
||||||
"dist": {
|
"dist": {
|
||||||
"type": "zip",
|
"type": "zip",
|
||||||
"url": "https://api.github.com/repos/clue/php-stream-filter/zipball/aeb7d8ea49c7963d3b581378955dbf5bc49aa320",
|
"url": "https://api.github.com/repos/clue/stream-filter/zipball/aeb7d8ea49c7963d3b581378955dbf5bc49aa320",
|
||||||
"reference": "aeb7d8ea49c7963d3b581378955dbf5bc49aa320",
|
"reference": "aeb7d8ea49c7963d3b581378955dbf5bc49aa320",
|
||||||
"shasum": ""
|
"shasum": ""
|
||||||
},
|
},
|
||||||
@@ -2874,6 +2874,50 @@
|
|||||||
"issues": "https://www.drupal.org/project/issues/field_group"
|
"issues": "https://www.drupal.org/project/issues/field_group"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "drupal/field_pager",
|
||||||
|
"version": "2.0.0-beta1",
|
||||||
|
"source": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://git.drupalcode.org/project/field_pager.git",
|
||||||
|
"reference": "2.0.0-beta1"
|
||||||
|
},
|
||||||
|
"dist": {
|
||||||
|
"type": "zip",
|
||||||
|
"url": "https://ftp.drupal.org/files/projects/field_pager-2.0.0-beta1.zip",
|
||||||
|
"reference": "2.0.0-beta1",
|
||||||
|
"shasum": "a00f784e2cd666d8ae35421a62afb3e6c587a9b5"
|
||||||
|
},
|
||||||
|
"require": {
|
||||||
|
"drupal/core": "^8 || ^9"
|
||||||
|
},
|
||||||
|
"type": "drupal-module",
|
||||||
|
"extra": {
|
||||||
|
"drupal": {
|
||||||
|
"version": "2.0.0-beta1",
|
||||||
|
"datestamp": "1601500230",
|
||||||
|
"security-coverage": {
|
||||||
|
"status": "not-covered",
|
||||||
|
"message": "Project has not opted into security advisory coverage!"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"notification-url": "https://packages.drupal.org/8/downloads",
|
||||||
|
"license": [
|
||||||
|
"GPL-2.0-or-later"
|
||||||
|
],
|
||||||
|
"authors": [
|
||||||
|
{
|
||||||
|
"name": "NuWans",
|
||||||
|
"homepage": "https://www.drupal.org/user/3250178"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": "Field Pager (field_pager) To use fields as multiple pages",
|
||||||
|
"homepage": "https://www.drupal.org/project/field_pager",
|
||||||
|
"support": {
|
||||||
|
"source": "https://git.drupalcode.org/project/field_pager"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "drupal/field_token_value",
|
"name": "drupal/field_token_value",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
@@ -5067,6 +5111,62 @@
|
|||||||
"source": "https://git.drupalcode.org/project/video_embed_field"
|
"source": "https://git.drupalcode.org/project/video_embed_field"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "drupal/views_infinite_scroll",
|
||||||
|
"version": "1.7.0",
|
||||||
|
"source": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://git.drupalcode.org/project/views_infinite_scroll.git",
|
||||||
|
"reference": "8.x-1.7"
|
||||||
|
},
|
||||||
|
"dist": {
|
||||||
|
"type": "zip",
|
||||||
|
"url": "https://ftp.drupal.org/files/projects/views_infinite_scroll-8.x-1.7.zip",
|
||||||
|
"reference": "8.x-1.7",
|
||||||
|
"shasum": "42ff1b7c835a2cb0755425999bb8251f19c62fac"
|
||||||
|
},
|
||||||
|
"require": {
|
||||||
|
"drupal/core": "^8.8 || ^9"
|
||||||
|
},
|
||||||
|
"type": "drupal-module",
|
||||||
|
"extra": {
|
||||||
|
"drupal": {
|
||||||
|
"version": "8.x-1.7",
|
||||||
|
"datestamp": "1584489857",
|
||||||
|
"security-coverage": {
|
||||||
|
"status": "covered",
|
||||||
|
"message": "Covered by Drupal's security advisory policy"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"notification-url": "https://packages.drupal.org/8/downloads",
|
||||||
|
"license": [
|
||||||
|
"GPL-2.0-or-later"
|
||||||
|
],
|
||||||
|
"authors": [
|
||||||
|
{
|
||||||
|
"name": "Bobík",
|
||||||
|
"homepage": "https://www.drupal.org/user/123612"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Neslee Canil Pinto",
|
||||||
|
"homepage": "https://www.drupal.org/user/3580850"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Remon",
|
||||||
|
"homepage": "https://www.drupal.org/user/143827"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Sam152",
|
||||||
|
"homepage": "https://www.drupal.org/user/1485048"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": "A pager which allows an infinite scroll effect for views.",
|
||||||
|
"homepage": "https://www.drupal.org/project/views_infinite_scroll",
|
||||||
|
"support": {
|
||||||
|
"source": "https://git.drupalcode.org/project/views_infinite_scroll"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "drupal/views_url_path_arguments",
|
"name": "drupal/views_url_path_arguments",
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
@@ -9858,12 +9958,12 @@
|
|||||||
"version": "1.9.1",
|
"version": "1.9.1",
|
||||||
"source": {
|
"source": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/webmozart/assert.git",
|
"url": "https://github.com/webmozarts/assert.git",
|
||||||
"reference": "bafc69caeb4d49c39fd0779086c03a3738cbb389"
|
"reference": "bafc69caeb4d49c39fd0779086c03a3738cbb389"
|
||||||
},
|
},
|
||||||
"dist": {
|
"dist": {
|
||||||
"type": "zip",
|
"type": "zip",
|
||||||
"url": "https://api.github.com/repos/webmozart/assert/zipball/bafc69caeb4d49c39fd0779086c03a3738cbb389",
|
"url": "https://api.github.com/repos/webmozarts/assert/zipball/bafc69caeb4d49c39fd0779086c03a3738cbb389",
|
||||||
"reference": "bafc69caeb4d49c39fd0779086c03a3738cbb389",
|
"reference": "bafc69caeb4d49c39fd0779086c03a3738cbb389",
|
||||||
"shasum": ""
|
"shasum": ""
|
||||||
},
|
},
|
||||||
@@ -10011,7 +10111,9 @@
|
|||||||
"packages-dev": [],
|
"packages-dev": [],
|
||||||
"aliases": [],
|
"aliases": [],
|
||||||
"minimum-stability": "dev",
|
"minimum-stability": "dev",
|
||||||
"stability-flags": [],
|
"stability-flags": {
|
||||||
|
"drupal/field_pager": 10
|
||||||
|
},
|
||||||
"prefer-stable": true,
|
"prefer-stable": true,
|
||||||
"prefer-lowest": false,
|
"prefer-lowest": false,
|
||||||
"platform": [],
|
"platform": [],
|
||||||
|
|||||||
@@ -4,6 +4,9 @@
|
|||||||
# 'example.settings.local.php' file, which sits next to this file.
|
# 'example.settings.local.php' file, which sits next to this file.
|
||||||
parameters:
|
parameters:
|
||||||
http.response.debug_cacheability_headers: true
|
http.response.debug_cacheability_headers: true
|
||||||
|
twig.config:
|
||||||
|
debug: true
|
||||||
|
auto_reload: true
|
||||||
services:
|
services:
|
||||||
cache.backend.null:
|
cache.backend.null:
|
||||||
class: Drupal\Core\Cache\NullBackendFactory
|
class: Drupal\Core\Cache\NullBackendFactory
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,204 @@
|
|||||||
|
body.lb-disable-scrolling {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightboxOverlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 9999;
|
||||||
|
background-color: black;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||||
|
opacity: 0.8;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 10000;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox .lb-image {
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
max-width: inherit;
|
||||||
|
max-height: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
/* Image border */
|
||||||
|
border: 4px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox a img {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-outerContainer {
|
||||||
|
position: relative;
|
||||||
|
*zoom: 1;
|
||||||
|
width: 250px;
|
||||||
|
height: 250px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
/* Background color behind image.
|
||||||
|
This is visible during transitions. */
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-outerContainer:after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-loader {
|
||||||
|
position: absolute;
|
||||||
|
top: 43%;
|
||||||
|
left: 0;
|
||||||
|
height: 25%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-cancel {
|
||||||
|
display: block;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: url(../images/loading.gif) no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-nav {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-container > .nav {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-nav a {
|
||||||
|
outline: none;
|
||||||
|
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-prev, .lb-next {
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-nav a.lb-prev {
|
||||||
|
width: 34%;
|
||||||
|
left: 0;
|
||||||
|
float: left;
|
||||||
|
background: url(../images/prev.png) left 48% no-repeat;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.6s;
|
||||||
|
-moz-transition: opacity 0.6s;
|
||||||
|
-o-transition: opacity 0.6s;
|
||||||
|
transition: opacity 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-nav a.lb-prev:hover {
|
||||||
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-nav a.lb-next {
|
||||||
|
width: 64%;
|
||||||
|
right: 0;
|
||||||
|
float: right;
|
||||||
|
background: url(../images/next.png) right 48% no-repeat;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.6s;
|
||||||
|
-moz-transition: opacity 0.6s;
|
||||||
|
-o-transition: opacity 0.6s;
|
||||||
|
transition: opacity 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-nav a.lb-next:hover {
|
||||||
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-dataContainer {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 5px;
|
||||||
|
*zoom: 1;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-dataContainer:after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-data {
|
||||||
|
padding: 0 4px;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-data .lb-details {
|
||||||
|
width: 85%;
|
||||||
|
float: left;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-data .lb-caption {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-data .lb-caption a {
|
||||||
|
color: #4ae;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-data .lb-number {
|
||||||
|
display: block;
|
||||||
|
clear: left;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-data .lb-close {
|
||||||
|
display: block;
|
||||||
|
float: right;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: url(../images/close.png) top right no-repeat;
|
||||||
|
text-align: right;
|
||||||
|
outline: none;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
|
||||||
|
opacity: 0.7;
|
||||||
|
-webkit-transition: opacity 0.2s;
|
||||||
|
-moz-transition: opacity 0.2s;
|
||||||
|
-o-transition: opacity 0.2s;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-data .lb-close:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
@@ -1,5 +1,19 @@
|
|||||||
.media{
|
.medias{
|
||||||
.paragraph--type--images{
|
.paragraph--type--images{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.paragraph--type--video{
|
||||||
|
margin: 4rem 0;
|
||||||
|
& > div{
|
||||||
|
font-family: dukefill;
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -67,7 +67,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
#block-views-block-gallerie-block-1,
|
||||||
#block-views-block-slide-programme-block-1,
|
#block-views-block-slide-programme-block-1,
|
||||||
#block-views-block-slide-programme-node-intervenant-block-1,
|
#block-views-block-slide-programme-node-intervenant-block-1,
|
||||||
#block-views-block-dernieres-publications-block-1{
|
#block-views-block-dernieres-publications-block-1{
|
||||||
|
|||||||
@@ -81,6 +81,75 @@ header{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#block-views-block-gallerie-block-1{
|
||||||
|
section:not(.wrap_head){
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin:0 -1rem!important;
|
||||||
|
figure{
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 400px;
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
width: calc( 100% / 3);
|
||||||
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1024px) {
|
||||||
|
width: calc( 100% / 6);
|
||||||
|
max-height:200px;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pager{
|
||||||
|
text-align: center;
|
||||||
|
margin: 2rem;
|
||||||
|
.wrap--btn{
|
||||||
|
a{
|
||||||
|
@include shadow;
|
||||||
|
background: white;
|
||||||
|
width: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
font-size: 12px;
|
||||||
|
display: block;
|
||||||
|
font-family: 'truenobold';
|
||||||
|
color: $color2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox{
|
||||||
|
position: fixed!important;
|
||||||
|
top: 50%!important;
|
||||||
|
transform: translateY(-50%)!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-dataContainer{
|
||||||
|
width: 100%;
|
||||||
|
background:white;
|
||||||
|
.lb-details{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.lb-number{
|
||||||
|
font-family: 'truenobold';
|
||||||
|
padding-bottom:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#block-views-block-gallerie-block-1,
|
||||||
#block-views-block-slide-programme-block-1,
|
#block-views-block-slide-programme-block-1,
|
||||||
#block-views-block-dernieres-publications-block-1{
|
#block-views-block-dernieres-publications-block-1{
|
||||||
margin: 2rem 0;
|
margin: 2rem 0;
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,554 @@
|
|||||||
|
/*!
|
||||||
|
* Lightbox v2.11.2
|
||||||
|
* by Lokesh Dhakar
|
||||||
|
*
|
||||||
|
* More info:
|
||||||
|
* http://lokeshdhakar.com/projects/lightbox2/
|
||||||
|
*
|
||||||
|
* Copyright Lokesh Dhakar
|
||||||
|
* Released under the MIT license
|
||||||
|
* https://github.com/lokesh/lightbox2/blob/master/LICENSE
|
||||||
|
*
|
||||||
|
* @preserve
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Uses Node, AMD or browser globals to create a module.
|
||||||
|
(function (root, factory) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
// AMD. Register as an anonymous module.
|
||||||
|
define(['jquery'], factory);
|
||||||
|
} else if (typeof exports === 'object') {
|
||||||
|
// Node. Does not work with strict CommonJS, but
|
||||||
|
// only CommonJS-like environments that support module.exports,
|
||||||
|
// like Node.
|
||||||
|
module.exports = factory(require('jquery'));
|
||||||
|
} else {
|
||||||
|
// Browser globals (root is window)
|
||||||
|
root.lightbox = factory(root.jQuery);
|
||||||
|
}
|
||||||
|
}(this, function ($) {
|
||||||
|
|
||||||
|
function Lightbox(options) {
|
||||||
|
this.album = [];
|
||||||
|
this.currentImageIndex = void 0;
|
||||||
|
this.init();
|
||||||
|
|
||||||
|
// options
|
||||||
|
this.options = $.extend({}, this.constructor.defaults);
|
||||||
|
this.option(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Descriptions of all options available on the demo site:
|
||||||
|
// http://lokeshdhakar.com/projects/lightbox2/index.html#options
|
||||||
|
Lightbox.defaults = {
|
||||||
|
albumLabel: 'Image %1 of %2',
|
||||||
|
alwaysShowNavOnTouchDevices: false,
|
||||||
|
fadeDuration: 600,
|
||||||
|
fitImagesInViewport: true,
|
||||||
|
imageFadeDuration: 600,
|
||||||
|
// maxWidth: 800,
|
||||||
|
// maxHeight: 600,
|
||||||
|
positionFromTop: 50,
|
||||||
|
resizeDuration: 700,
|
||||||
|
showImageNumberLabel: true,
|
||||||
|
wrapAround: false,
|
||||||
|
disableScrolling: false,
|
||||||
|
/*
|
||||||
|
Sanitize Title
|
||||||
|
If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
|
||||||
|
This will free you to add html tags, such as links, in the caption.
|
||||||
|
|
||||||
|
If the caption data is user submitted or from some other untrusted source, then set this to true
|
||||||
|
to prevent xss and other injection attacks.
|
||||||
|
*/
|
||||||
|
sanitizeTitle: false
|
||||||
|
};
|
||||||
|
|
||||||
|
Lightbox.prototype.option = function(options) {
|
||||||
|
$.extend(this.options, options);
|
||||||
|
};
|
||||||
|
|
||||||
|
Lightbox.prototype.imageCountLabel = function(currentImageNum, totalImages) {
|
||||||
|
return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages);
|
||||||
|
};
|
||||||
|
|
||||||
|
Lightbox.prototype.init = function() {
|
||||||
|
var self = this;
|
||||||
|
// Both enable and build methods require the body tag to be in the DOM.
|
||||||
|
$(document).ready(function() {
|
||||||
|
self.enable();
|
||||||
|
self.build();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
|
||||||
|
// that contain 'lightbox'. When these are clicked, start lightbox.
|
||||||
|
Lightbox.prototype.enable = function() {
|
||||||
|
var self = this;
|
||||||
|
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
|
||||||
|
self.start($(event.currentTarget));
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Build html for the lightbox and the overlay.
|
||||||
|
// Attach event handlers to the new DOM elements. click click click
|
||||||
|
Lightbox.prototype.build = function() {
|
||||||
|
if ($('#lightbox').length > 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
// The two root notes generated, #lightboxOverlay and #lightbox are given
|
||||||
|
// tabindex attrs so they are focusable. We attach our keyboard event
|
||||||
|
// listeners to these two elements, and not the document. Clicking anywhere
|
||||||
|
// while Lightbox is opened will keep the focus on or inside one of these
|
||||||
|
// two elements.
|
||||||
|
//
|
||||||
|
// We do this so we can prevent propogation of the Esc keypress when
|
||||||
|
// Lightbox is open. This prevents it from intefering with other components
|
||||||
|
// on the page below.
|
||||||
|
//
|
||||||
|
// Github issue: https://github.com/lokesh/lightbox2/issues/663
|
||||||
|
$('<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" aria-label="Previous image" href="" ></a><a class="lb-next" aria-label="Next image" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
|
||||||
|
|
||||||
|
// Cache jQuery objects
|
||||||
|
this.$lightbox = $('#lightbox');
|
||||||
|
this.$overlay = $('#lightboxOverlay');
|
||||||
|
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
|
||||||
|
this.$container = this.$lightbox.find('.lb-container');
|
||||||
|
this.$image = this.$lightbox.find('.lb-image');
|
||||||
|
this.$nav = this.$lightbox.find('.lb-nav');
|
||||||
|
|
||||||
|
// Store css values for future lookup
|
||||||
|
this.containerPadding = {
|
||||||
|
top: parseInt(this.$container.css('padding-top'), 10),
|
||||||
|
right: parseInt(this.$container.css('padding-right'), 10),
|
||||||
|
bottom: parseInt(this.$container.css('padding-bottom'), 10),
|
||||||
|
left: parseInt(this.$container.css('padding-left'), 10)
|
||||||
|
};
|
||||||
|
|
||||||
|
this.imageBorderWidth = {
|
||||||
|
top: parseInt(this.$image.css('border-top-width'), 10),
|
||||||
|
right: parseInt(this.$image.css('border-right-width'), 10),
|
||||||
|
bottom: parseInt(this.$image.css('border-bottom-width'), 10),
|
||||||
|
left: parseInt(this.$image.css('border-left-width'), 10)
|
||||||
|
};
|
||||||
|
|
||||||
|
// Attach event handlers to the newly minted DOM elements
|
||||||
|
this.$overlay.hide().on('click', function() {
|
||||||
|
self.end();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$lightbox.hide().on('click', function(event) {
|
||||||
|
if ($(event.target).attr('id') === 'lightbox') {
|
||||||
|
self.end();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$outerContainer.on('click', function(event) {
|
||||||
|
if ($(event.target).attr('id') === 'lightbox') {
|
||||||
|
self.end();
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$lightbox.find('.lb-prev').on('click', function() {
|
||||||
|
if (self.currentImageIndex === 0) {
|
||||||
|
self.changeImage(self.album.length - 1);
|
||||||
|
} else {
|
||||||
|
self.changeImage(self.currentImageIndex - 1);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$lightbox.find('.lb-next').on('click', function() {
|
||||||
|
if (self.currentImageIndex === self.album.length - 1) {
|
||||||
|
self.changeImage(0);
|
||||||
|
} else {
|
||||||
|
self.changeImage(self.currentImageIndex + 1);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
Show context menu for image on right-click
|
||||||
|
|
||||||
|
There is a div containing the navigation that spans the entire image and lives above of it. If
|
||||||
|
you right-click, you are right clicking this div and not the image. This prevents users from
|
||||||
|
saving the image or using other context menu actions with the image.
|
||||||
|
|
||||||
|
To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
|
||||||
|
set pointer-events to none on the nav div. This is so that the upcoming right-click event on
|
||||||
|
the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
|
||||||
|
we set the pointer events back to auto for the nav div so it can capture hover and left-click
|
||||||
|
events as usual.
|
||||||
|
*/
|
||||||
|
this.$nav.on('mousedown', function(event) {
|
||||||
|
if (event.which === 3) {
|
||||||
|
self.$nav.css('pointer-events', 'none');
|
||||||
|
|
||||||
|
self.$lightbox.one('contextmenu', function() {
|
||||||
|
setTimeout(function() {
|
||||||
|
this.$nav.css('pointer-events', 'auto');
|
||||||
|
}.bind(self), 0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
|
||||||
|
self.end();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Show overlay and lightbox. If the image is part of a set, add siblings to album array.
|
||||||
|
Lightbox.prototype.start = function($link) {
|
||||||
|
var self = this;
|
||||||
|
var $window = $(window);
|
||||||
|
|
||||||
|
$window.on('resize', $.proxy(this.sizeOverlay, this));
|
||||||
|
|
||||||
|
this.sizeOverlay();
|
||||||
|
|
||||||
|
this.album = [];
|
||||||
|
var imageNumber = 0;
|
||||||
|
|
||||||
|
function addToAlbum($link) {
|
||||||
|
self.album.push({
|
||||||
|
alt: $link.attr('data-alt'),
|
||||||
|
link: $link.attr('href'),
|
||||||
|
title: $link.attr('data-title') || $link.attr('title')
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Support both data-lightbox attribute and rel attribute implementations
|
||||||
|
var dataLightboxValue = $link.attr('data-lightbox');
|
||||||
|
var $links;
|
||||||
|
|
||||||
|
if (dataLightboxValue) {
|
||||||
|
$links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
|
||||||
|
for (var i = 0; i < $links.length; i = ++i) {
|
||||||
|
addToAlbum($($links[i]));
|
||||||
|
if ($links[i] === $link[0]) {
|
||||||
|
imageNumber = i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if ($link.attr('rel') === 'lightbox') {
|
||||||
|
// If image is not part of a set
|
||||||
|
addToAlbum($link);
|
||||||
|
} else {
|
||||||
|
// If image is part of a set
|
||||||
|
$links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
|
||||||
|
for (var j = 0; j < $links.length; j = ++j) {
|
||||||
|
addToAlbum($($links[j]));
|
||||||
|
if ($links[j] === $link[0]) {
|
||||||
|
imageNumber = j;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Position Lightbox
|
||||||
|
var top = $window.scrollTop() + this.options.positionFromTop;
|
||||||
|
var left = $window.scrollLeft();
|
||||||
|
this.$lightbox.css({
|
||||||
|
top: top + 'px',
|
||||||
|
left: left + 'px'
|
||||||
|
}).fadeIn(this.options.fadeDuration);
|
||||||
|
|
||||||
|
// Disable scrolling of the page while open
|
||||||
|
if (this.options.disableScrolling) {
|
||||||
|
$('body').addClass('lb-disable-scrolling');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.changeImage(imageNumber);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Hide most UI elements in preparation for the animated resizing of the lightbox.
|
||||||
|
Lightbox.prototype.changeImage = function(imageNumber) {
|
||||||
|
var self = this;
|
||||||
|
var filename = this.album[imageNumber].link;
|
||||||
|
var filetype = filename.split('.').slice(-1)[0];
|
||||||
|
var $image = this.$lightbox.find('.lb-image');
|
||||||
|
|
||||||
|
// Disable keyboard nav during transitions
|
||||||
|
this.disableKeyboardNav();
|
||||||
|
|
||||||
|
// Show loading state
|
||||||
|
this.$overlay.fadeIn(this.options.fadeDuration);
|
||||||
|
$('.lb-loader').fadeIn('slow');
|
||||||
|
this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
|
||||||
|
this.$outerContainer.addClass('animating');
|
||||||
|
|
||||||
|
// When image to show is preloaded, we send the width and height to sizeContainer()
|
||||||
|
var preloader = new Image();
|
||||||
|
preloader.onload = function() {
|
||||||
|
var $preloader;
|
||||||
|
var imageHeight;
|
||||||
|
var imageWidth;
|
||||||
|
var maxImageHeight;
|
||||||
|
var maxImageWidth;
|
||||||
|
var windowHeight;
|
||||||
|
var windowWidth;
|
||||||
|
|
||||||
|
$image.attr({
|
||||||
|
'alt': self.album[imageNumber].alt,
|
||||||
|
'src': filename
|
||||||
|
});
|
||||||
|
|
||||||
|
$preloader = $(preloader);
|
||||||
|
|
||||||
|
$image.width(preloader.width);
|
||||||
|
$image.height(preloader.height);
|
||||||
|
windowWidth = $(window).width();
|
||||||
|
windowHeight = $(window).height();
|
||||||
|
|
||||||
|
// Calculate the max image dimensions for the current viewport.
|
||||||
|
// Take into account the border around the image and an additional 10px gutter on each side.
|
||||||
|
maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
|
||||||
|
maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop - 70;
|
||||||
|
|
||||||
|
/*
|
||||||
|
Since many SVGs have small intrinsic dimensions, but they support scaling
|
||||||
|
up without quality loss because of their vector format, max out their
|
||||||
|
size.
|
||||||
|
*/
|
||||||
|
if (filetype === 'svg') {
|
||||||
|
$image.width(maxImageWidth);
|
||||||
|
$image.height(maxImageHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fit image inside the viewport.
|
||||||
|
if (self.options.fitImagesInViewport) {
|
||||||
|
|
||||||
|
// Check if image size is larger then maxWidth|maxHeight in settings
|
||||||
|
if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
|
||||||
|
maxImageWidth = self.options.maxWidth;
|
||||||
|
}
|
||||||
|
if (self.options.maxHeight && self.options.maxHeight < maxImageHeight) {
|
||||||
|
maxImageHeight = self.options.maxHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
maxImageWidth = self.options.maxWidth || preloader.width || maxImageWidth;
|
||||||
|
maxImageHeight = self.options.maxHeight || preloader.height || maxImageHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
|
||||||
|
// option than we need to size down while maintaining the aspect ratio.
|
||||||
|
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
|
||||||
|
if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
|
||||||
|
imageWidth = maxImageWidth;
|
||||||
|
imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
|
||||||
|
$image.width(imageWidth);
|
||||||
|
$image.height(imageHeight);
|
||||||
|
} else {
|
||||||
|
imageHeight = maxImageHeight;
|
||||||
|
imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
|
||||||
|
$image.width(imageWidth);
|
||||||
|
$image.height(imageHeight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
self.sizeContainer($image.width(), $image.height());
|
||||||
|
};
|
||||||
|
|
||||||
|
// Preload image before showing
|
||||||
|
preloader.src = this.album[imageNumber].link;
|
||||||
|
this.currentImageIndex = imageNumber;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Stretch overlay to fit the viewport
|
||||||
|
Lightbox.prototype.sizeOverlay = function() {
|
||||||
|
var self = this;
|
||||||
|
/*
|
||||||
|
We use a setTimeout 0 to pause JS execution and let the rendering catch-up.
|
||||||
|
Why do this? If the `disableScrolling` option is set to true, a class is added to the body
|
||||||
|
tag that disables scrolling and hides the scrollbar. We want to make sure the scrollbar is
|
||||||
|
hidden before we measure the document width, as the presence of the scrollbar will affect the
|
||||||
|
number.
|
||||||
|
*/
|
||||||
|
setTimeout(function() {
|
||||||
|
self.$overlay
|
||||||
|
.width($(document).width())
|
||||||
|
.height($(document).height());
|
||||||
|
|
||||||
|
}, 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Animate the size of the lightbox to fit the image we are showing
|
||||||
|
// This method also shows the the image.
|
||||||
|
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
var oldWidth = this.$outerContainer.outerWidth();
|
||||||
|
var oldHeight = this.$outerContainer.outerHeight();
|
||||||
|
var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
|
||||||
|
var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
|
||||||
|
|
||||||
|
function postResize() {
|
||||||
|
self.$lightbox.find('.lb-dataContainer').width(newWidth);
|
||||||
|
self.$lightbox.find('.lb-prevLink').height(newHeight);
|
||||||
|
self.$lightbox.find('.lb-nextLink').height(newHeight);
|
||||||
|
|
||||||
|
// Set focus on one of the two root nodes so keyboard events are captured.
|
||||||
|
self.$overlay.focus();
|
||||||
|
|
||||||
|
self.showImage();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (oldWidth !== newWidth || oldHeight !== newHeight) {
|
||||||
|
this.$outerContainer.animate({
|
||||||
|
width: newWidth,
|
||||||
|
height: newHeight
|
||||||
|
}, this.options.resizeDuration, 'swing', function() {
|
||||||
|
postResize();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
postResize();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Display the image and its details and begin preload neighboring images.
|
||||||
|
Lightbox.prototype.showImage = function() {
|
||||||
|
this.$lightbox.find('.lb-loader').stop(true).hide();
|
||||||
|
this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
|
||||||
|
|
||||||
|
this.updateNav();
|
||||||
|
this.updateDetails();
|
||||||
|
this.preloadNeighboringImages();
|
||||||
|
this.enableKeyboardNav();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Display previous and next navigation if appropriate.
|
||||||
|
Lightbox.prototype.updateNav = function() {
|
||||||
|
// Check to see if the browser supports touch events. If so, we take the conservative approach
|
||||||
|
// and assume that mouse hover events are not supported and always show prev/next navigation
|
||||||
|
// arrows in image sets.
|
||||||
|
var alwaysShowNav = false;
|
||||||
|
try {
|
||||||
|
document.createEvent('TouchEvent');
|
||||||
|
alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices) ? true : false;
|
||||||
|
} catch (e) {}
|
||||||
|
|
||||||
|
this.$lightbox.find('.lb-nav').show();
|
||||||
|
|
||||||
|
if (this.album.length > 1) {
|
||||||
|
if (this.options.wrapAround) {
|
||||||
|
if (alwaysShowNav) {
|
||||||
|
this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
|
||||||
|
}
|
||||||
|
this.$lightbox.find('.lb-prev, .lb-next').show();
|
||||||
|
} else {
|
||||||
|
if (this.currentImageIndex > 0) {
|
||||||
|
this.$lightbox.find('.lb-prev').show();
|
||||||
|
if (alwaysShowNav) {
|
||||||
|
this.$lightbox.find('.lb-prev').css('opacity', '1');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.currentImageIndex < this.album.length - 1) {
|
||||||
|
this.$lightbox.find('.lb-next').show();
|
||||||
|
if (alwaysShowNav) {
|
||||||
|
this.$lightbox.find('.lb-next').css('opacity', '1');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Display caption, image number, and closing button.
|
||||||
|
Lightbox.prototype.updateDetails = function() {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
// Enable anchor clicks in the injected caption html.
|
||||||
|
// Thanks Nate Wright for the fix. @https://github.com/NateWr
|
||||||
|
if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
|
||||||
|
this.album[this.currentImageIndex].title !== '') {
|
||||||
|
var $caption = this.$lightbox.find('.lb-caption');
|
||||||
|
if (this.options.sanitizeTitle) {
|
||||||
|
$caption.text(this.album[this.currentImageIndex].title);
|
||||||
|
} else {
|
||||||
|
$caption.html(this.album[this.currentImageIndex].title);
|
||||||
|
}
|
||||||
|
$caption.fadeIn('fast');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.album.length > 1 && this.options.showImageNumberLabel) {
|
||||||
|
var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
|
||||||
|
this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
|
||||||
|
} else {
|
||||||
|
this.$lightbox.find('.lb-number').hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$outerContainer.removeClass('animating');
|
||||||
|
|
||||||
|
this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
|
||||||
|
return self.sizeOverlay();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Preload previous and next images in set.
|
||||||
|
Lightbox.prototype.preloadNeighboringImages = function() {
|
||||||
|
if (this.album.length > this.currentImageIndex + 1) {
|
||||||
|
var preloadNext = new Image();
|
||||||
|
preloadNext.src = this.album[this.currentImageIndex + 1].link;
|
||||||
|
}
|
||||||
|
if (this.currentImageIndex > 0) {
|
||||||
|
var preloadPrev = new Image();
|
||||||
|
preloadPrev.src = this.album[this.currentImageIndex - 1].link;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Lightbox.prototype.enableKeyboardNav = function() {
|
||||||
|
this.$lightbox.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
|
||||||
|
this.$overlay.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
|
||||||
|
};
|
||||||
|
|
||||||
|
Lightbox.prototype.disableKeyboardNav = function() {
|
||||||
|
this.$lightbox.off('.keyboard');
|
||||||
|
this.$overlay.off('.keyboard');
|
||||||
|
};
|
||||||
|
|
||||||
|
Lightbox.prototype.keyboardAction = function(event) {
|
||||||
|
var KEYCODE_ESC = 27;
|
||||||
|
var KEYCODE_LEFTARROW = 37;
|
||||||
|
var KEYCODE_RIGHTARROW = 39;
|
||||||
|
|
||||||
|
var keycode = event.keyCode;
|
||||||
|
if (keycode === KEYCODE_ESC) {
|
||||||
|
// Prevent bubbling so as to not affect other components on the page.
|
||||||
|
event.stopPropagation();
|
||||||
|
this.end();
|
||||||
|
} else if (keycode === KEYCODE_LEFTARROW) {
|
||||||
|
if (this.currentImageIndex !== 0) {
|
||||||
|
this.changeImage(this.currentImageIndex - 1);
|
||||||
|
} else if (this.options.wrapAround && this.album.length > 1) {
|
||||||
|
this.changeImage(this.album.length - 1);
|
||||||
|
}
|
||||||
|
} else if (keycode === KEYCODE_RIGHTARROW) {
|
||||||
|
if (this.currentImageIndex !== this.album.length - 1) {
|
||||||
|
this.changeImage(this.currentImageIndex + 1);
|
||||||
|
} else if (this.options.wrapAround && this.album.length > 1) {
|
||||||
|
this.changeImage(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Closing time. :-(
|
||||||
|
Lightbox.prototype.end = function() {
|
||||||
|
this.disableKeyboardNav();
|
||||||
|
$(window).off('resize', this.sizeOverlay);
|
||||||
|
this.$lightbox.fadeOut(this.options.fadeDuration);
|
||||||
|
this.$overlay.fadeOut(this.options.fadeDuration);
|
||||||
|
|
||||||
|
if (this.options.disableScrolling) {
|
||||||
|
$('body').removeClass('lb-disable-scrolling');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return new Lightbox();
|
||||||
|
}));
|
||||||
@@ -393,7 +393,68 @@ function scrollReaveal(){
|
|||||||
ScrollReveal().reveal(nodes.node_moment, showUp);
|
ScrollReveal().reveal(nodes.node_moment, showUp);
|
||||||
}
|
}
|
||||||
|
|
||||||
$( document ).ready(function() {
|
function pagination(){
|
||||||
|
|
||||||
|
const $next = $('#block-views-block-gallerie-block-1 .pager a');
|
||||||
|
|
||||||
|
$next.on("click",function(event){
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const $url = $(this).attr('href');
|
||||||
|
var PageMax = $(this).attr('data-totalpages');
|
||||||
|
|
||||||
|
var split = $url.split('=');
|
||||||
|
var base_uri = split[0];
|
||||||
|
var currentPage = split[1];
|
||||||
|
currentPage++;
|
||||||
|
|
||||||
|
ajaxPage(base_uri, currentPage, $url);
|
||||||
|
|
||||||
|
if (currentPage > PageMax) {
|
||||||
|
$(this).remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
function ajaxPage(base_uri, currentPage, $url) {
|
||||||
|
$('.loader').addClass('show');
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
method: "GET",
|
||||||
|
url: $url,
|
||||||
|
async: true,
|
||||||
|
cache: false,
|
||||||
|
dataType: "html",
|
||||||
|
statusCode: {
|
||||||
|
//traitement en cas de succès
|
||||||
|
200: function() {
|
||||||
|
$('.loader').removeClass('show');
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.done(function( data ) {
|
||||||
|
let $data = $(data).find(".wrap--image");
|
||||||
|
$( "#block-views-block-gallerie-block-1 section.d-flex" ).append($data);
|
||||||
|
|
||||||
|
$next.attr('href', base_uri +'='+ currentPage);
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function Light(){
|
||||||
|
lightbox.option({
|
||||||
|
'resizeDuration': 200,
|
||||||
|
'wrapAround': true,
|
||||||
|
'alwaysShowNavOnTouchDevices':true,
|
||||||
|
'positionFromTop': 50,
|
||||||
|
'disableScrolling':true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$( document ).ready(function() {
|
||||||
// currenturl();
|
// currenturl();
|
||||||
scrollReaveal();
|
scrollReaveal();
|
||||||
notes();
|
notes();
|
||||||
@@ -403,6 +464,8 @@ function scrollReaveal(){
|
|||||||
select_custom();
|
select_custom();
|
||||||
remove_isactive();
|
remove_isactive();
|
||||||
hidden_morelinkMoment();
|
hidden_morelinkMoment();
|
||||||
|
pagination();
|
||||||
|
Light();
|
||||||
});
|
});
|
||||||
|
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ global-styling:
|
|||||||
theme:
|
theme:
|
||||||
css/bootstrap/css/bootstrap-reboot.min.css: {}
|
css/bootstrap/css/bootstrap-reboot.min.css: {}
|
||||||
css/bootstrap/css/bootstrap.min.css: {}
|
css/bootstrap/css/bootstrap.min.css: {}
|
||||||
|
css-compiled/lightbox.css: {}
|
||||||
css-compiled/index.min.css: {}
|
css-compiled/index.min.css: {}
|
||||||
|
|
||||||
global-scripts:
|
global-scripts:
|
||||||
@@ -11,6 +12,7 @@ global-scripts:
|
|||||||
css/bootstrap/js/bootstrap.min.js: {}
|
css/bootstrap/js/bootstrap.min.js: {}
|
||||||
js/lazysizes.min.js: {}
|
js/lazysizes.min.js: {}
|
||||||
js/flickity.pkgd.min.js: {}
|
js/flickity.pkgd.min.js: {}
|
||||||
|
js/lightbox.js: {}
|
||||||
js/script.js: {}
|
js/script.js: {}
|
||||||
dependencies:
|
dependencies:
|
||||||
- core/jquery
|
- core/jquery
|
||||||
|
|||||||
@@ -0,0 +1,31 @@
|
|||||||
|
{#
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Default theme implementation of an image.
|
||||||
|
*
|
||||||
|
* Available variables:
|
||||||
|
* - attributes: HTML attributes for the img tag.
|
||||||
|
* - style_name: (optional) The name of the image style applied.
|
||||||
|
*
|
||||||
|
* @see template_preprocess_image()
|
||||||
|
*
|
||||||
|
* @ingroup themeable
|
||||||
|
*/
|
||||||
|
#}
|
||||||
|
|
||||||
|
{% if style_name == "lightbox" %}
|
||||||
|
{#
|
||||||
|
<img{{ attributes }} />
|
||||||
|
#}
|
||||||
|
{# <pre>
|
||||||
|
{{ dump(attributes) }}
|
||||||
|
</pre> #}
|
||||||
|
<a href="{{attributes.src}}" data-lightbox="lightbox" data-title="{{attributes.title}}">
|
||||||
|
<img src="{{attributes.src}}" alt="">
|
||||||
|
</a>
|
||||||
|
{# <a href="{{attributes.src}}" data-lightbox="lightbox">image</a> #}
|
||||||
|
|
||||||
|
{% else %}
|
||||||
|
|
||||||
|
<img{{ attributes }} />
|
||||||
|
{% endif %}
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
{#
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Default theme implementation to display a pager.
|
||||||
|
*
|
||||||
|
* Available variables:
|
||||||
|
* - heading_id: Pagination heading ID.
|
||||||
|
* - items: List of pager items.
|
||||||
|
* The list is keyed by the following elements:
|
||||||
|
* - first: Item for the first page; not present on the first page of results.
|
||||||
|
* - previous: Item for the previous page; not present on the first page
|
||||||
|
* of results.
|
||||||
|
* - next: Item for the next page; not present on the last page of results.
|
||||||
|
* - last: Item for the last page; not present on the last page of results.
|
||||||
|
* - pages: List of pages, keyed by page number.
|
||||||
|
* Sub-sub elements:
|
||||||
|
* items.first, items.previous, items.next, items.last, and each item inside
|
||||||
|
* items.pages contain the following elements:
|
||||||
|
* - href: URL with appropriate query parameters for the item.
|
||||||
|
* - attributes: A keyed list of HTML attributes for the item.
|
||||||
|
* - text: The visible text used for the item link, such as "‹ Previous"
|
||||||
|
* or "Next ›".
|
||||||
|
* - current: The page number of the current page.
|
||||||
|
* - ellipses: If there are more pages than the quantity allows, then an
|
||||||
|
* ellipsis before or after the listed pages may be present.
|
||||||
|
* - previous: Present if the currently visible list of pages does not start
|
||||||
|
* at the first page.
|
||||||
|
* - next: Present if the visible list of pages ends before the last page.
|
||||||
|
*
|
||||||
|
* @see template_preprocess_pager()
|
||||||
|
*
|
||||||
|
* @ingroup themeable
|
||||||
|
*/
|
||||||
|
#}
|
||||||
|
{% if items %}
|
||||||
|
|
||||||
|
<div class="pager" role="navigation" aria-labelledby="{{ heading_id }}">
|
||||||
|
<div class="wrap--btn">
|
||||||
|
<a href="{{ items.next.href }}" data-totalpages="{{items.pages|length}}" title="{{ 'Go to last page'|t }}"{{ items.last.attributes|without('href', 'title') }}>
|
||||||
|
More
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
+62
@@ -0,0 +1,62 @@
|
|||||||
|
{#
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Default view template to display all the fields in a row.
|
||||||
|
*
|
||||||
|
* Available variables:
|
||||||
|
* - view: The view in use.
|
||||||
|
* - fields: A list of fields, each one contains:
|
||||||
|
* - content: The output of the field.
|
||||||
|
* - raw: The raw data for the field, if it exists. This is NOT output safe.
|
||||||
|
* - class: The safe class ID to use.
|
||||||
|
* - handler: The Views field handler controlling this field.
|
||||||
|
* - inline: Whether or not the field should be inline.
|
||||||
|
* - wrapper_element: An HTML element for a wrapper.
|
||||||
|
* - wrapper_attributes: List of attributes for wrapper element.
|
||||||
|
* - separator: An optional separator that may appear before a field.
|
||||||
|
* - label: The field's label text.
|
||||||
|
* - label_element: An HTML element for a label wrapper.
|
||||||
|
* - label_attributes: List of attributes for label wrapper.
|
||||||
|
* - label_suffix: Colon after the label.
|
||||||
|
* - element_type: An HTML element for the field content.
|
||||||
|
* - element_attributes: List of attributes for HTML element for field content.
|
||||||
|
* - has_label_colon: A boolean indicating whether to display a colon after
|
||||||
|
* the label.
|
||||||
|
* - element_type: An HTML element for the field content.
|
||||||
|
* - element_attributes: List of attributes for HTML element for field content.
|
||||||
|
* - row: The raw result from the query, with all data it fetched.
|
||||||
|
*
|
||||||
|
* @see template_preprocess_views_view_fields()
|
||||||
|
*
|
||||||
|
* @ingroup themeable
|
||||||
|
*/
|
||||||
|
#}
|
||||||
|
{% for field in fields -%}
|
||||||
|
{{ field.separator }}
|
||||||
|
|
||||||
|
{%- if field.wrapper_element -%}
|
||||||
|
<{{ field.wrapper_element }}{{ field.wrapper_attributes }}>
|
||||||
|
{%- endif %}
|
||||||
|
|
||||||
|
{%- if field.label -%}
|
||||||
|
{%- if field.label_element -%}
|
||||||
|
<{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
|
||||||
|
{%- else -%}
|
||||||
|
{{ field.label }}{{ field.label_suffix }}
|
||||||
|
{%- endif %}
|
||||||
|
{%- endif %}
|
||||||
|
|
||||||
|
{%- if field.element_type -%}
|
||||||
|
<{{ field.element_type }}{{ field.element_attributes }}>{{ field.content }}</{{ field.element_type }}>
|
||||||
|
{%- else -%}
|
||||||
|
|
||||||
|
{{ field.content }}
|
||||||
|
|
||||||
|
|
||||||
|
{%- endif %}
|
||||||
|
|
||||||
|
{%- if field.wrapper_element -%}
|
||||||
|
</{{ field.wrapper_element }}>
|
||||||
|
{%- endif %}
|
||||||
|
|
||||||
|
{%- endfor %}
|
||||||
+33
@@ -0,0 +1,33 @@
|
|||||||
|
{#
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Default theme implementation to display a view of unformatted rows.
|
||||||
|
*
|
||||||
|
* Available variables:
|
||||||
|
* - title: The title of this group of rows. May be empty.
|
||||||
|
* - rows: A list of the view's row items.
|
||||||
|
* - attributes: The row's HTML attributes.
|
||||||
|
* - content: The row's content.
|
||||||
|
* - view: The view object.
|
||||||
|
* - default_row_class: A flag indicating whether default classes should be
|
||||||
|
* used on rows.
|
||||||
|
*
|
||||||
|
* @see template_preprocess_views_view_unformatted()
|
||||||
|
*
|
||||||
|
* @ingroup themeable
|
||||||
|
*/
|
||||||
|
#}
|
||||||
|
|
||||||
|
{% if title %}
|
||||||
|
<h3>{{ title }}</h3>
|
||||||
|
{% endif %}
|
||||||
|
{% for row in rows %}
|
||||||
|
{%
|
||||||
|
set row_classes = [
|
||||||
|
default_row_class ? 'wrap--image',
|
||||||
|
]
|
||||||
|
%}
|
||||||
|
<figure class="wrap--image">
|
||||||
|
{{- row.content -}}
|
||||||
|
</figure>
|
||||||
|
{% endfor %}
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
{#
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Theme override for a views mini-pager.
|
||||||
|
*
|
||||||
|
* Available variables:
|
||||||
|
* - items: List of pager items.
|
||||||
|
*
|
||||||
|
* @see template_preprocess_views_mini_pager()
|
||||||
|
*/
|
||||||
|
#}
|
||||||
|
{% if items.previous or items.next %}
|
||||||
|
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
|
||||||
|
<h4 class="pager__heading visually-hidden">{{ 'Pagination'|t }}</h4>
|
||||||
|
<ul class="pager__items js-pager__items">
|
||||||
|
{% if items.previous %}
|
||||||
|
<li class="pager__item pager__item--previous">
|
||||||
|
<a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel') }}>
|
||||||
|
<span class="visually-hidden">{{ 'Previous page'|t }}</span>
|
||||||
|
<span aria-hidden="true">{{ items.previous.text|default('‹‹'|t) }}</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
{% if items.current %}
|
||||||
|
<li class="pager__item is-active">
|
||||||
|
{% trans %}
|
||||||
|
Page {{ items.current }}
|
||||||
|
{% endtrans %}
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
{% if items.next %}
|
||||||
|
{# <pre>
|
||||||
|
{{ dump(items.next) }}
|
||||||
|
</pre> #}
|
||||||
|
<li class="pager__item pager__item--next">
|
||||||
|
<a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }}>
|
||||||
|
<span class="visually-hidden">{{ 'Next page'|t }}</span>
|
||||||
|
<span aria-hidden="true">{{ items.next.text|default('››'|t) }}</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
{% endif %}
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
{#
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Default theme implementation for main view template.
|
||||||
|
*
|
||||||
|
* Available variables:
|
||||||
|
* - attributes: Remaining HTML attributes for the element.
|
||||||
|
* - css_name: A CSS-safe version of the view name.
|
||||||
|
* - css_class: The user-specified classes names, if any.
|
||||||
|
* - header: The optional header.
|
||||||
|
* - footer: The optional footer.
|
||||||
|
* - rows: The results of the view query, if any.
|
||||||
|
* - empty: The content to display if there are no rows.
|
||||||
|
* - pager: The optional pager next/prev links to display.
|
||||||
|
* - exposed: Exposed widget form/info to display.
|
||||||
|
* - feed_icons: Optional feed icons to display.
|
||||||
|
* - more: An optional link to the next page of results.
|
||||||
|
* - title: Title of the view, only used when displaying in the admin preview.
|
||||||
|
* - title_prefix: Additional output populated by modules, intended to be
|
||||||
|
* displayed in front of the view title.
|
||||||
|
* - title_suffix: Additional output populated by modules, intended to be
|
||||||
|
* displayed after the view title.
|
||||||
|
* - attachment_before: An optional attachment view to be displayed before the
|
||||||
|
* view content.
|
||||||
|
* - attachment_after: An optional attachment view to be displayed after the
|
||||||
|
* view content.
|
||||||
|
* - dom_id: Unique id for every view being printed to give unique class for
|
||||||
|
* Javascript.
|
||||||
|
*
|
||||||
|
* @see template_preprocess_views_view()
|
||||||
|
*
|
||||||
|
* @ingroup themeable
|
||||||
|
*/
|
||||||
|
#}
|
||||||
|
|
||||||
|
|
||||||
|
<div class="views">
|
||||||
|
|
||||||
|
{{ title_prefix }}
|
||||||
|
{{ title }}
|
||||||
|
{{ title_suffix }}
|
||||||
|
|
||||||
|
{% if header %}
|
||||||
|
<section class="wrap_head">
|
||||||
|
{% include 'themes/custom/popsu_colloque/template/components/header_slide.html.twig' with { croix : true } %}
|
||||||
|
</section>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{{ exposed }}
|
||||||
|
{{ attachment_before }}
|
||||||
|
|
||||||
|
{% if rows -%}
|
||||||
|
<section class="d-flex">
|
||||||
|
{{ rows }}
|
||||||
|
</section>
|
||||||
|
{% elseif empty -%}
|
||||||
|
{{ empty }}
|
||||||
|
{% endif %}
|
||||||
|
{{ pager }}
|
||||||
|
|
||||||
|
{{ attachment_after }}
|
||||||
|
|
||||||
|
{% if footer %}
|
||||||
|
<footer>
|
||||||
|
{{ footer }}
|
||||||
|
</footer>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{{ feed_icons }}
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user