add lightbox
This commit is contained in:
kevin
@@ -24,6 +24,7 @@
|
||||
"drupal/core-recommended": "^8.8",
|
||||
"drupal/entity_browser_enhanced": "^1.0",
|
||||
"drupal/field_group": "^3.0",
|
||||
"drupal/field_pager": "^2.0@beta",
|
||||
"drupal/field_token_value": "^1.0",
|
||||
"drupal/geocoder": "^3.7",
|
||||
"drupal/geofield": "^1.15",
|
||||
@@ -48,6 +49,7 @@
|
||||
"drupal/transliterate_filenames": "^1.4",
|
||||
"drupal/varbase_total_control": "^6.11",
|
||||
"drupal/video_embed_field": "^2.4",
|
||||
"drupal/views_infinite_scroll": "^1.7",
|
||||
"drupal/views_url_path_arguments": "^1.1",
|
||||
"drush/drush": "^10.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",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "c99b8032f0c1003b6bc4c819b9f0afb2",
|
||||
"content-hash": "a227b81fa65a8149cb57650099cde6cf",
|
||||
"packages": [
|
||||
{
|
||||
"name": "asm89/stack-cors",
|
||||
@@ -111,12 +111,12 @@
|
||||
"version": "v1.5.0",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/clue/php-stream-filter.git",
|
||||
"url": "https://github.com/clue/stream-filter.git",
|
||||
"reference": "aeb7d8ea49c7963d3b581378955dbf5bc49aa320"
|
||||
},
|
||||
"dist": {
|
||||
"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",
|
||||
"shasum": ""
|
||||
},
|
||||
@@ -2874,6 +2874,50 @@
|
||||
"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",
|
||||
"version": "1.0.0",
|
||||
@@ -5067,6 +5111,62 @@
|
||||
"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",
|
||||
"version": "1.1.0",
|
||||
@@ -9858,12 +9958,12 @@
|
||||
"version": "1.9.1",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/webmozart/assert.git",
|
||||
"url": "https://github.com/webmozarts/assert.git",
|
||||
"reference": "bafc69caeb4d49c39fd0779086c03a3738cbb389"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/webmozart/assert/zipball/bafc69caeb4d49c39fd0779086c03a3738cbb389",
|
||||
"url": "https://api.github.com/repos/webmozarts/assert/zipball/bafc69caeb4d49c39fd0779086c03a3738cbb389",
|
||||
"reference": "bafc69caeb4d49c39fd0779086c03a3738cbb389",
|
||||
"shasum": ""
|
||||
},
|
||||
@@ -10011,7 +10111,9 @@
|
||||
"packages-dev": [],
|
||||
"aliases": [],
|
||||
"minimum-stability": "dev",
|
||||
"stability-flags": [],
|
||||
"stability-flags": {
|
||||
"drupal/field_pager": 10
|
||||
},
|
||||
"prefer-stable": true,
|
||||
"prefer-lowest": false,
|
||||
"platform": [],
|
||||
|
||||
@@ -4,6 +4,9 @@
|
||||
# 'example.settings.local.php' file, which sits next to this file.
|
||||
parameters:
|
||||
http.response.debug_cacheability_headers: true
|
||||
twig.config:
|
||||
debug: true
|
||||
auto_reload: true
|
||||
services:
|
||||
cache.backend.null:
|
||||
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{
|
||||
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-node-intervenant-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-dernieres-publications-block-1{
|
||||
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);
|
||||
}
|
||||
|
||||
$( 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();
|
||||
scrollReaveal();
|
||||
notes();
|
||||
@@ -403,6 +464,8 @@ function scrollReaveal(){
|
||||
select_custom();
|
||||
remove_isactive();
|
||||
hidden_morelinkMoment();
|
||||
pagination();
|
||||
Light();
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
||||
@@ -4,6 +4,7 @@ global-styling:
|
||||
theme:
|
||||
css/bootstrap/css/bootstrap-reboot.min.css: {}
|
||||
css/bootstrap/css/bootstrap.min.css: {}
|
||||
css-compiled/lightbox.css: {}
|
||||
css-compiled/index.min.css: {}
|
||||
|
||||
global-scripts:
|
||||
@@ -11,6 +12,7 @@ global-scripts:
|
||||
css/bootstrap/js/bootstrap.min.js: {}
|
||||
js/lazysizes.min.js: {}
|
||||
js/flickity.pkgd.min.js: {}
|
||||
js/lightbox.js: {}
|
||||
js/script.js: {}
|
||||
dependencies:
|
||||
- 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