node projet diapo et lightbox
This commit is contained in:
@@ -562,7 +562,7 @@ $(document).ready(function(){
|
||||
|
||||
//////////////// start lightbox galerie image page site////////////////////////
|
||||
// Sélection des images à ouvrir dans la lightbox
|
||||
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
|
||||
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger');
|
||||
let currentIndex;
|
||||
|
||||
// Création de la lightbox
|
||||
@@ -732,7 +732,6 @@ if (elementsToWrap.length > 0) {
|
||||
|
||||
|
||||
//////////////////// start div infos actualité ////////////////////////
|
||||
|
||||
$(document).ready(function () {
|
||||
// Vérifier si .layout-container A l'ID #page-node (et non un élément enfant)
|
||||
if ($(".layout-container").attr("id") === "page-node") {
|
||||
@@ -758,11 +757,9 @@ $(document).ready(function () {
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//////////////////// end div infos actualité ////////////////////////
|
||||
|
||||
//////////////////////////////////////////////////////////////////
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Sélectionner les éléments à déplacer
|
||||
const documentsField = document.querySelector(".field_field_documents");
|
||||
@@ -819,9 +816,9 @@ function moveLanguageSwitcher() {
|
||||
moveLanguageSwitcher();
|
||||
window.addEventListener("resize", moveLanguageSwitcher);
|
||||
});
|
||||
|
||||
/////////////////// end langswitcher position responsive///////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
/////////////// start class à view-rows-ressources ////////
|
||||
$(document).ready(function () {
|
||||
$(".view-rows-wrapper").each(function () {
|
||||
@@ -923,8 +920,6 @@ $(document).ready(function () {
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
/////////////////// end voir plus... ressources ////////////////////
|
||||
|
||||
|
||||
@@ -983,96 +978,9 @@ $(document).ready(function () {
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/////////////////// end voir plus... actualite dans /actualites & /home ////////////////////
|
||||
|
||||
|
||||
//////////////////////////////////////////
|
||||
|
||||
|
||||
// /////////// Start script ressources ////////////////////////////////
|
||||
|
||||
// document.addEventListener("DOMContentLoaded", () => {
|
||||
// const view = document.querySelector(".view");
|
||||
// const elements = Array.from(view.children);
|
||||
|
||||
// let newView = document.createElement("div");
|
||||
// newView.classList.add("view");
|
||||
|
||||
// let group = null;
|
||||
// let groupContent = null;
|
||||
|
||||
// elements.forEach((el) => {
|
||||
// if (el.tagName === "H3") {
|
||||
// if (group) {
|
||||
// newView.appendChild(group);
|
||||
// }
|
||||
|
||||
// group = document.createElement("div");
|
||||
// group.classList.add("group");
|
||||
|
||||
// groupContent = document.createElement("div");
|
||||
// groupContent.classList.add("group-content");
|
||||
|
||||
// groupContent.appendChild(el);
|
||||
// group.appendChild(groupContent);
|
||||
// } else if (el.classList.contains("views-row")) {
|
||||
// groupContent.appendChild(el);
|
||||
// }
|
||||
// });
|
||||
|
||||
// if (group) {
|
||||
// newView.appendChild(group);
|
||||
// }
|
||||
|
||||
// view.replaceWith(newView);
|
||||
|
||||
// // Ajouter un bouton "Voir plus" dans chaque groupe
|
||||
// document.querySelectorAll(".group").forEach((group) => {
|
||||
// const rows = group.querySelectorAll(".views-row");
|
||||
// const button = document.createElement("button");
|
||||
// button.classList.add("toggle-btn");
|
||||
// button.textContent = "Voir plus de";
|
||||
|
||||
// rows.forEach((row, index) => {
|
||||
// if (index >= 3) {
|
||||
// row.classList.add("hidden");
|
||||
// row.style.maxHeight = "0";
|
||||
// row.style.opacity = "0";
|
||||
// }
|
||||
// });
|
||||
|
||||
// button.addEventListener("click", () => {
|
||||
// const isExpanded = button.textContent === "Voir moins de";
|
||||
// const hiddenRows = group.querySelectorAll(".views-row.hidden");
|
||||
|
||||
// if (isExpanded) {
|
||||
// // Cacher les lignes avec un délai pour l'effet de transition
|
||||
// hiddenRows.forEach((row) => {
|
||||
// row.style.maxHeight = "0";
|
||||
// row.style.opacity = "0";
|
||||
// setTimeout(() => row.classList.add("hidden"), 500); // Délai pour la transition
|
||||
// });
|
||||
// } else {
|
||||
// // Afficher les lignes
|
||||
// hiddenRows.forEach((row) => {
|
||||
// row.classList.remove("hidden");
|
||||
// row.style.maxHeight = row.scrollHeight + "px";
|
||||
// row.style.opacity = "1";
|
||||
// });
|
||||
// }
|
||||
|
||||
// button.textContent = isExpanded ? "Voir plus de" : "Voir moins de";
|
||||
// });
|
||||
|
||||
// group.appendChild(button);
|
||||
// });
|
||||
// });
|
||||
|
||||
|
||||
// /////////// end script ressources ////////////////////////////////
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -4242,6 +4242,32 @@ body {
|
||||
font-family: "gilroy-light";
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
}
|
||||
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet .cadre-img-zoom img {
|
||||
object-fit: cover;
|
||||
width: 220px;
|
||||
height: 145px;
|
||||
}
|
||||
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet .image-field-caption {
|
||||
margin: 0;
|
||||
max-width: 200px;
|
||||
}
|
||||
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet .image-field-caption p {
|
||||
margin-top: 0;
|
||||
font-size: 0.5rem;
|
||||
font-family: "gilroy-light";
|
||||
}
|
||||
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_documents,
|
||||
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_liens {
|
||||
width: fit-content;
|
||||
|
||||
@@ -504,7 +504,7 @@ $(document).ready(function(){
|
||||
|
||||
//////////////// start lightbox galerie image page site////////////////////////
|
||||
// Sélection des images à ouvrir dans la lightbox
|
||||
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
|
||||
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger');
|
||||
let currentIndex;
|
||||
|
||||
// Création de la lightbox
|
||||
@@ -674,7 +674,6 @@ if (elementsToWrap.length > 0) {
|
||||
|
||||
|
||||
//////////////////// start div infos actualité ////////////////////////
|
||||
|
||||
$(document).ready(function () {
|
||||
// Vérifier si .layout-container A l'ID #page-node (et non un élément enfant)
|
||||
if ($(".layout-container").attr("id") === "page-node") {
|
||||
@@ -700,11 +699,9 @@ $(document).ready(function () {
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//////////////////// end div infos actualité ////////////////////////
|
||||
|
||||
//////////////////////////////////////////////////////////////////
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Sélectionner les éléments à déplacer
|
||||
const documentsField = document.querySelector(".field_field_documents");
|
||||
@@ -761,9 +758,9 @@ function moveLanguageSwitcher() {
|
||||
moveLanguageSwitcher();
|
||||
window.addEventListener("resize", moveLanguageSwitcher);
|
||||
});
|
||||
|
||||
/////////////////// end langswitcher position responsive///////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
/////////////// start class à view-rows-ressources ////////
|
||||
$(document).ready(function () {
|
||||
$(".view-rows-wrapper").each(function () {
|
||||
@@ -865,8 +862,6 @@ $(document).ready(function () {
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
/////////////////// end voir plus... ressources ////////////////////
|
||||
|
||||
|
||||
@@ -925,96 +920,9 @@ $(document).ready(function () {
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/////////////////// end voir plus... actualite dans /actualites & /home ////////////////////
|
||||
|
||||
|
||||
//////////////////////////////////////////
|
||||
|
||||
|
||||
// /////////// Start script ressources ////////////////////////////////
|
||||
|
||||
// document.addEventListener("DOMContentLoaded", () => {
|
||||
// const view = document.querySelector(".view");
|
||||
// const elements = Array.from(view.children);
|
||||
|
||||
// let newView = document.createElement("div");
|
||||
// newView.classList.add("view");
|
||||
|
||||
// let group = null;
|
||||
// let groupContent = null;
|
||||
|
||||
// elements.forEach((el) => {
|
||||
// if (el.tagName === "H3") {
|
||||
// if (group) {
|
||||
// newView.appendChild(group);
|
||||
// }
|
||||
|
||||
// group = document.createElement("div");
|
||||
// group.classList.add("group");
|
||||
|
||||
// groupContent = document.createElement("div");
|
||||
// groupContent.classList.add("group-content");
|
||||
|
||||
// groupContent.appendChild(el);
|
||||
// group.appendChild(groupContent);
|
||||
// } else if (el.classList.contains("views-row")) {
|
||||
// groupContent.appendChild(el);
|
||||
// }
|
||||
// });
|
||||
|
||||
// if (group) {
|
||||
// newView.appendChild(group);
|
||||
// }
|
||||
|
||||
// view.replaceWith(newView);
|
||||
|
||||
// // Ajouter un bouton "Voir plus" dans chaque groupe
|
||||
// document.querySelectorAll(".group").forEach((group) => {
|
||||
// const rows = group.querySelectorAll(".views-row");
|
||||
// const button = document.createElement("button");
|
||||
// button.classList.add("toggle-btn");
|
||||
// button.textContent = "Voir plus de";
|
||||
|
||||
// rows.forEach((row, index) => {
|
||||
// if (index >= 3) {
|
||||
// row.classList.add("hidden");
|
||||
// row.style.maxHeight = "0";
|
||||
// row.style.opacity = "0";
|
||||
// }
|
||||
// });
|
||||
|
||||
// button.addEventListener("click", () => {
|
||||
// const isExpanded = button.textContent === "Voir moins de";
|
||||
// const hiddenRows = group.querySelectorAll(".views-row.hidden");
|
||||
|
||||
// if (isExpanded) {
|
||||
// // Cacher les lignes avec un délai pour l'effet de transition
|
||||
// hiddenRows.forEach((row) => {
|
||||
// row.style.maxHeight = "0";
|
||||
// row.style.opacity = "0";
|
||||
// setTimeout(() => row.classList.add("hidden"), 500); // Délai pour la transition
|
||||
// });
|
||||
// } else {
|
||||
// // Afficher les lignes
|
||||
// hiddenRows.forEach((row) => {
|
||||
// row.classList.remove("hidden");
|
||||
// row.style.maxHeight = row.scrollHeight + "px";
|
||||
// row.style.opacity = "1";
|
||||
// });
|
||||
// }
|
||||
|
||||
// button.textContent = isExpanded ? "Voir plus de" : "Voir moins de";
|
||||
// });
|
||||
|
||||
// group.appendChild(button);
|
||||
// });
|
||||
// });
|
||||
|
||||
|
||||
// /////////// end script ressources ////////////////////////////////
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -144,7 +144,32 @@
|
||||
}
|
||||
.paragraph--type--projet-diapo{
|
||||
.field_field_images_projet{
|
||||
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
// justify-content: space-between;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2rem;
|
||||
@media(max-width: 500px){
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.cadre-img-zoom{
|
||||
// margin: auto;
|
||||
img{
|
||||
object-fit: cover;
|
||||
width: 220px;
|
||||
height: 145px;
|
||||
}
|
||||
}
|
||||
.image-field-caption{
|
||||
margin: 0;
|
||||
max-width: 200px;
|
||||
p{
|
||||
margin-top: 0;
|
||||
font-size: 0.5rem;
|
||||
font-family: 'gilroy-light';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation for a field.
|
||||
*
|
||||
* To override output, copy the "field.html.twig" from the templates directory
|
||||
* to your theme's directory and customize it, just like customizing other
|
||||
* Drupal templates such as page.html.twig or node.html.twig.
|
||||
*
|
||||
* Instead of overriding the theming for all fields, you can also just override
|
||||
* theming for a subset of fields using
|
||||
* @link themeable Theme hook suggestions. @endlink For example,
|
||||
* here are some theme hook suggestions that can be used for a field_foo field
|
||||
* on an article node type:
|
||||
* - field--node--field-foo--article.html.twig
|
||||
* - field--node--field-foo.html.twig
|
||||
* - field--node--article.html.twig
|
||||
* - field--field-foo.html.twig
|
||||
* - field--text-with-summary.html.twig
|
||||
* - field.html.twig
|
||||
*
|
||||
* Available variables:
|
||||
* - attributes: HTML attributes for the containing element.
|
||||
* - label_hidden: Whether to show the field label or not.
|
||||
* - title_attributes: HTML attributes for the title.
|
||||
* - label: The label for the field.
|
||||
* - multiple: TRUE if a field can contain multiple items.
|
||||
* - items: List of all the field items. Each item contains:
|
||||
* - attributes: List of HTML attributes for each item.
|
||||
* - content: The field item's content.
|
||||
* - entity_type: The entity type to which the field belongs.
|
||||
* - field_name: The name of the field.
|
||||
* - field_type: The type of the field.
|
||||
* - label_display: The display settings for the label.
|
||||
*
|
||||
* @see template_preprocess_field()
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
{%
|
||||
set title_classes = [
|
||||
'field',
|
||||
'field--name-' ~ field_name|clean_class,
|
||||
'field--type-' ~ field_type|clean_class,
|
||||
'field--label-' ~ label_display,
|
||||
label_display == 'visually_hidden' ? 'visually-hidden',
|
||||
]
|
||||
%}
|
||||
{%
|
||||
set ancre_href = '#paragraph-id--' ~ paragraph.id()
|
||||
%}
|
||||
{% if label_hidden %}
|
||||
{% if multiple %}
|
||||
<div{{ attributes }}>
|
||||
{% for item in items %}
|
||||
<div{{ item.attributes }}>{{ item.content }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% for item in items %}
|
||||
<div{{ attributes }}>{{ item.content }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div{{ attributes }}>
|
||||
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
|
||||
{% if multiple %}
|
||||
<div class='diaporama'>
|
||||
{% endif %}
|
||||
{% for item in items %}
|
||||
<div{{ item.attributes }}>{{ item.content }}</div>
|
||||
{% endfor %}
|
||||
{% if multiple %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div id="lightbox" class="lightbox">
|
||||
<span class="close">×</span>
|
||||
<img class="lightbox-content" id="lightbox-img">
|
||||
<a class="prev" id="prev"><img src="/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg" alt="Précédent"></a>
|
||||
<a class="next" id="next"><img src="/themes/custom/quartiers_de_demain/dist/assets/img/next.svg" alt="Suivant"></a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
Reference in New Issue
Block a user