Zola2024-08-19T00:00:00+00:00https://lapinchatware.ca/atom.xmlPrivacy Policy2024-08-19T00:00:00+00:002024-08-19T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/legals/privacy-policy/<p>Pierre Tremblay-Thériault built the Morning Rush app and this website. Those SERVICES are provided by Pierre
Tremblay-Thériault and are intended for use as is.</p>
<p>This page is used to inform visitors regarding my policies with the collection, use, and disclosure of Personal
Information if anyone decided to use my Service.</p>
<p>If you choose to use our Services, then you agree to the collection and use of information in relation to this policy.</p>
<p>Our apps and websites do not collect Personal Information.</p>
<p>The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which are accessible
<a href="https://lapinchatware.ca/legals/terms-and-conditions">here</a> unless otherwise defined in this Privacy Policy.</p>
<h2 id="information-collection-and-use">Information Collection and Use</h2>
<p>Our apps and websites do not collect Personal Information.</p>
<h2 id="log-data">Log Data</h2>
<p>Our apps and websites do not collect log data.</p>
<h2 id="cookies">Cookies</h2>
<p>Our apps and websites do not use cookies</p>
<h2 id="service-providers">Service Providers</h2>
<p>Our apps and websites do not employ third-party companies and individuals.</p>
<h2 id="security">Security</h2>
<p>Our apps and websites do not collect any informations.</p>
<h2 id="links-to-other-sites">Links to Other Sites</h2>
<p>This Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note
that these external sites are not operated by me. Therefore, I strongly advise you to review the Privacy Policy of these
websites. I have no control over and assume no responsibility for the content, privacy policies, or practices of any
third-party sites or services.</p>
<h2 id="children-s-privacy">Children’s Privacy</h2>
<p>Our apps and websites do not collect any informations from the user.</p>
<h2 id="changes-to-this-privacy-policy">Changes to This Privacy Policy</h2>
<p>I may update our Privacy Policy from time to time. Thus, you are advised to review this page periodically for any
changes. I will notify you of any changes by posting the new Privacy Policy on this page.</p>
<h2 id="this-policy-is-effective-as-of-2024-08-19">This policy is effective as of 2024-08-19</h2>
<h2 id="contact-us">Contact Us</h2>
<p>If you have any questions or suggestions about my Privacy Policy, do not hesitate to contact me with the form below.</p>
<form novalidate class="contact-form" action="https://submit-form.com/qKVEOeHw6" method="POST">
<section class="contact-form__errors contact-form__errors--no-errors" tabindex="-1">
<h2 class="contact-form__errors__title">Le formulaire n'a pu être soumis car <span class="contact-form__errors__count">6</span> erreurs ont été trouvées.</h2>
<ol class="contact-form__errors__list">
<li class="contact-form__errors__list__item contact-form__error-name-required">
<a class="contact-form__errors__list__link" href="#name">
<span class="contact-form__errors__list__item__error-notice">Erreur : </span>
Nom - Ce champ est obligatoire.
</a>
</li>
<li class="contact-form__errors__list__item contact-form__error-name-short">
<a class="contact-form__errors__list__link" href="#name">
<span class="contact-form__errors__list__item__error-notice">Erreur : </span>
Nom - Ce champ doit contenir au minimum deux caractères.
</a>
</li>
<li class="contact-form__errors__list__item contact-form__error-name-invalid">
<a class="contact-form__errors__list__link" href="#name">
<span class="contact-form__errors__list__item__error-notice">Erreur : </span>
Nom - Les caractères admissibles sont des chiffres, des lettres et des traits d'union.
</a>
</li>
<li class="contact-form__errors__list__item contact-form__error-email-required">
<a class="contact-form__errors__list__link" href="#email">
<span class="contact-form__errors__list__item__error-notice">Erreur : </span>
Courriel - Ce champ est obligatoire.
</a>
</li>
<li class="contact-form__errors__list__item contact-form__error-email-invalid">
<a class="contact-form__errors__list__link" href="#email">
<span class="contact-form__errors__list__item__error-notice">Erreur : </span>
Courriel - Le format de l'adresse est invalide. Il doit ressembler à votre nom@domaine.com .
</a>
</li>
<li class="contact-form__errors__list__item contact-form__error-message-required">
<a class="contact-form__errors__list__link" href="#message">
<span class="contact-form__errors__list__item__error-notice">Erreur : </span>
Message - Ce champ est obligatoire.
</a>
</li>
</ol>
</section>
<section class="contact-form__submission-messages contact-form__submission-messages--hidden" tabindex="-1">
<span class="contact-form__submission-message contact-form__submission-message--success contact-form__submission-message--hidden">Votre message a bien été envoyé. Merci.</span>
<span class="contact-form__submission-message contact-form__submission-message--failed contact-form__submission-message--hidden">Un problème est survenue lors de l'envoie du message. Veuillez réessayer.</span>
<span class="contact-form__submission-message contact-form__submission-message--panic contact-form__submission-message--hidden">Une erreur inconnue est survenue. Veuillez rafraîchir la page et réessayer.</span>
</section>
<div class="contact-form__group">
<label class="contact-form__label contact-form__label--required" for="name">
<span class="contact-form__label--required-notice">* </span>
Name
<span class="contact-form__label--required-notice">(obligatoire)</span>
</label>
<span aria-live="polite" class="contact-form__error contact-form__error--no-error contact-form__error-name-required">Ce champ est obligatoire.</span>
<span aria-live="polite" class="contact-form__error contact-form__error--no-error contact-form__error-name-short">Ce champ doit contenir au minimum deux caractères.</span>
<span aria-live="polite" class="contact-form__error contact-form__error--no-error contact-form__error-name-invalid">Les caractères admissibles sont des chiffres, des lettres et des traits d'union.</span>
<input class="contact-form__field contact-form__field--input" id="name" name="name" type="text" minlength="2" pattern="[A-Za-z0-9\-\s]*" required="required" aria-required="true" />
</div>
<div class="contact-form__group">
<label class="contact-form__label contact-form__label--required" for="email">
<span class="contact-form__label--required-notice">* </span>
Email
<span class="contact-form__label--required-notice">(obligatoire)</span>
</label>
<span aria-live="polite" class="contact-form__error contact-form__error--no-error contact-form__error-email-required">Ce champ est obligatoire.</span>
<span aria-live="polite" class="contact-form__error contact-form__error--no-error contact-form__error-email-invalid">Le format de l'adresse est invalide. Il doit ressembler à votre nom@domaine.com .</span>
<input class="contact-form__field contact-form__field--input" id="email" name="email" type="email" pattern="^[a-zA-Z0-9.!#$%&'*+\/=?^_`\{\|\}~\-]+@[a-zA-Z0-9](?:[a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?)*$" required aria-required="true" />
</div>
<div class="contact-form__group">
<label class="contact-form__label contact-form__label--required" for="message">
<span class="contact-form__label--required-notice">* </span>
Message
<span class="contact-form__label--required-notice">(obligatoire)</span>
</label>
<span aria-live="polite" class="contact-form__error contact-form__error--no-error contact-form__error-message-required">Ce champ est obligatoire.</span>
<textarea class="contact-form__field contact-form__field--textarea" id="message" name="message" rows="10" required aria-required="true" ></textarea>
</div>
<div class="contact-form__controls">
<button class="contact-form__button contact-form__button--submit" type="submit">Send</button>
<button class="contact-form__button contact-form__button--reset" type="reset">Reset form</button>
</div>
</form>
<script id="botpoisonScript" src="https://unpkg.com/@botpoison/browser" async></script>
<script>
/*
Captcha management
*/
// Init captcha
let botpoison = undefined;
let botpoisonScript = document.getElementById("botpoisonScript");
botpoisonScript.addEventListener("load", function() {
botpoison = new Botpoison({
publicKey: "pk_0cdf5d2f-1278-4085-9639-7ef4bf05ec6a",
});
})
const form = document.getElementsByClassName("contact-form")[0];
/*
Form Validation
*/
const errorList = document.getElementsByClassName("contact-form__errors")[0];
const errorListErrorCount = document.getElementsByClassName("contact-form__errors__count")[0];
let totalErrorCount = 0;
// Name input
const name = document.getElementById("name");
const nameErrorRequired = document.getElementsByClassName("contact-form__error-name-required");
const nameErrorShort = document.getElementsByClassName("contact-form__error-name-short");
const nameErrorInvalid = document.getElementsByClassName("contact-form__error-name-invalid");
let nameErrorCount = 0;
name.addEventListener("focusout", (event) => {
validateName();
errorListErrorCount.textContent = totalErrorCount;
if (totalErrorCount === 0) {
errorList.classList.add("contact-form__errors--no-errors");
}
});
function validateName() {
totalErrorCount -= nameErrorCount;
let errorCount = 0;
if (name.validity.valueMissing) {
for (let i = 0; i < nameErrorRequired.length; i++) {
nameErrorRequired[i].classList.remove("contact-form__error--no-error");
}
errorCount++;
} else {
for (let i = 0; i < nameErrorRequired.length; i++) {
nameErrorRequired[i].classList.add("contact-form__error--no-error");
}
}
if (name.validity.tooShort) {
for (let i = 0; i < nameErrorShort.length; i++) {
nameErrorShort[i].classList.remove("contact-form__error--no-error");
}
errorCount++;
} else {
for (let i = 0; i < nameErrorShort.length; i++) {
nameErrorShort[i].classList.add("contact-form__error--no-error");
}
}
if (name.validity.patternMismatch) {
for (let i = 0; i < nameErrorInvalid.length; i++) {
nameErrorInvalid[i].classList.remove("contact-form__error--no-error");
}
errorCount++;
} else {
for (let i = 0; i < nameErrorInvalid.length; i++) {
nameErrorInvalid[i].classList.add("contact-form__error--no-error");
}
}
nameErrorCount = errorCount;
totalErrorCount += nameErrorCount;
}
// Email input
const email = document.getElementById("email");
const emailErrorRequired = document.getElementsByClassName("contact-form__error-email-required");
const emailErrorInvalid = document.getElementsByClassName("contact-form__error-email-invalid");
let emailErrorCount = 0;
email.addEventListener("focusout", (event) => {
validateEmail();
errorListErrorCount.textContent = totalErrorCount;
if (totalErrorCount === 0) {
errorList.classList.add("contact-form__errors--no-errors");
}
});
function validateEmail() {
totalErrorCount -= emailErrorCount;
let errorCount = 0;
if (email.validity.valueMissing) {
for (let i = 0; i < emailErrorRequired.length; i++) {
emailErrorRequired[i].classList.remove("contact-form__error--no-error");
}
errorCount++;
} else {
for (let i = 0; i < emailErrorRequired.length; i++) {
emailErrorRequired[i].classList.add("contact-form__error--no-error");
}
}
if (email.validity.patternMismatch) {
for (let i = 0; i < emailErrorInvalid.length; i++) {
emailErrorInvalid[i].classList.remove("contact-form__error--no-error");
}
errorCount++;
} else {
for (let i = 0; i < emailErrorInvalid.length; i++) {
emailErrorInvalid[i].classList.add("contact-form__error--no-error");
}
}
emailErrorCount = errorCount;
totalErrorCount += emailErrorCount;
}
// Message input
const message = document.getElementById("message");
const messageErrorRequired = document.getElementsByClassName("contact-form__error-message-required");
let messageErrorCount = 0;
message.addEventListener("focusout", (event) => {
validateMessage();
errorListErrorCount.textContent = totalErrorCount;
if (totalErrorCount === 0) {
errorList.classList.add("contact-form__errors--no-errors");
}
});
function validateMessage() {
totalErrorCount -= messageErrorCount;
let errorCount = 0;
if (message.validity.valueMissing) {
for (let i = 0; i < messageErrorRequired.length; i++) {
messageErrorRequired[i].classList.remove("contact-form__error--no-error");
}
errorCount++;
} else {
for (let i = 0; i < messageErrorRequired.length; i++) {
messageErrorRequired[i].classList.add("contact-form__error--no-error");
}
}
messageErrorCount = errorCount;
totalErrorCount += messageErrorCount;
}
function validateFields() {
validateName();
validateEmail();
validateMessage();
}
// Reset Form
const allErrorMessage = document.getElementsByClassName("contact-form__error");
form.addEventListener("reset", (event) => {
// Hide and reset form error messages
nameErrorCount = 0;
emailErrorCount = 0;
messageErrorCount = 0;
totalErrorCount = 0;
for (let i = 0; i < allErrorMessage.length; i++) {
allErrorMessage[i].classList.add("contact-form__error--no-error");
}
errorList.classList.add("contact-form__errors--no-errors");
errorListErrorCount.textContent = 0;
// Hide and reset form submission error messages
submissionMessages.classList.add("contact-form__submission-messages--hidden");
submissionSuccess.classList.add("contact-form__submission-message--hidden");
submissionFailed.classList.add("contact-form__submission-message--hidden");
submissionPanic.classList.add("contact-form__submission-message--hidden");
});
// Submit Form
const submissionMessages = document.getElementsByClassName("contact-form__submission-messages")[0];
const submissionSuccess = document.getElementsByClassName("contact-form__submission-message--success")[0];
const submissionFailed = document.getElementsByClassName("contact-form__submission-message--failed")[0];
const submissionPanic = document.getElementsByClassName("contact-form__submission-message--panic")[0];
form.addEventListener("submit", (event) => {
event.preventDefault();
const isFormValid = name.validity.valid && email.validity.valid && message.validity.valid;
if (isFormValid) {
let formData = new FormData(event.target);
if (botpoison === undefined) {
console.log("Captcha not loaded yet");
} else {
botpoison.challenge().then(({ solution }) => {
fetch(event.target.action, {
method: form.method,
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({
name: formData.get("name"),
email: formData.get("email"),
message: formData.get("message"),
_botpoison: solution,
}),
}).then(function (response) {
submissionMessages.classList.remove("contact-form__submission-messages--hidden");
if (response.ok) {
submissionSuccess.classList.remove("contact-form__submission-message--hidden");
form.reset();
} else {
submissionFailed.classList.remove("contact-form__submission-message--hidden");
}
}).catch(function(response) {
submissionMessages.classList.remove("contact-form__submission-messages--hidden")
submissionPanic.classList.remove("contact-form__submission-message--hidden");
});
});
}
} else {
// Validate form internally
form.checkValidity();
// Analyse validation results
validateFields();
// Set and display errors list
errorListErrorCount.textContent = totalErrorCount;
errorList.classList.remove("contact-form__errors--no-errors");
}
});
</script>Terms & Conditions2024-08-19T00:00:00+00:002024-08-19T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/legals/terms-and-conditions/<p>By downloading or using our apps and websites, these terms will automatically apply to you – you should make sure
therefore that you read them carefully before using our apss and websites. You’re not allowed to copy or modify our apps
and websites, any part of our apps and websites, or our trademarks in any way. You’re not allowed to attempt to extract
the source code of our apps and websites, and you also shouldn’t try to translate our apps and websites into other
languages or make derivative versions. Our apps itself and websites itself, and all the trademarks, copyright,
database rights, and other intellectual property rights related to it, still belong to Pierre Tremblay-Thériault.</p>
<p>Pierre Tremblay-Thériault is committed to ensuring that our apps and websites are as useful and efficient as possible.
For that reason, we reserve the right to make changes to our apps and websites or to charge for its services, at any
time and for any reason. We will never charge you for our apps and websites or its services without making it very clear
to you exactly what you’re paying for.</p>
<p>our apps and websites do not stores and do not processes personal data.</p>
<p>You should be aware that there are certain things that Pierre Tremblay-Thériault will not take responsibility for.
Certain functions of our apps and websites will require our apps and websites to have an active internet connection.
The connection can be Wi-Fi or provided by your mobile network provider, but Pierre Tremblay-Thériault cannot take
responsibility for our apps and websites not working at full functionality if you don’t have access to Wi-Fi, and you
don’t have any of your data allowance left.</p>
<p>If you’re using our apps and websites outside of an area with Wi-Fi, you should remember that the terms of the agreement
with your mobile network provider will still apply. As a result, you may be charged by your mobile provider for the cost
of data for the duration of the connection while accessing our apps and websites, or other third-party charges. In using
our apps and websites, you’re accepting responsibility for any such charges, including roaming data charges if you use
our apps and websites outside of your home territory (i.e. region or country) without turning off data roaming. If you
are not the bill payer for the device on which you’re using our apps and websites, please be aware that we assume that
you have received permission from the bill payer for using the app.</p>
<p>Along the same lines, Pierre Tremblay-Thériault cannot always take responsibility for the way you use our apps and
websites i.e. You need to make sure that your device stays charged – if it runs out of battery and you can’t turn it on
to avail the Service, Pierre Tremblay-Thériault cannot accept responsibility.</p>
<p>With respect to Pierre Tremblay-Thériault’s responsibility for your use of our apps and websites, when you’re using our
apps and websites, it’s important to bear in mind that although we endeavor to ensure that it is updated and correct at
all times, we do rely on third parties to provide information to us so that we can make it available to you. Pierre
Tremblay-Thériault accepts no liability for any loss, direct or indirect, you experience as a result of relying wholly
on this functionality of our apps and websites.</p>
<p>At some point, we may wish to update our apps and websites. Our apps and websites are currently available on Android
& iOS – the requirements for both systems(and for any additional systems we decide to extend the availability of our
apps and websites to) may change, and you’ll need to download the updates if you want to keep using our apps and websites.
Pierre Tremblay-Thériault does not promise that it will always update our apps and websites so that it is relevant to
you and/or works with the Android & iOS version that you have installed on your device. However, you promise to
always accept updates to the application when offered to you, We may also wish to stop providing our apps and websites,
and may terminate use of it at any time without giving notice of termination to you. Unless we tell you otherwise, upon
any termination, (a) the rights and licenses granted to you in these terms will end; (b) you must stop using our apps
and websites, and (if needed) delete it from your device.</p>
<h2 id="changes-to-this-terms-and-conditions">Changes to This Terms and Conditions</h2>
<p>I may update our Terms and Conditions from time to time. Thus, you are advised to review this page periodically for any
changes. I will notify you of any changes by posting the new Terms and Conditions on this page.</p>
<p>These terms and conditions are effective as of 2024-08-19</p>
<h2 id="contact-us">Contact Us</h2>
<p>If you have any questions or suggestions about my Terms and Conditions, do not hesitate to contact me with the form below.</p>
<form novalidate class="contact-form" action="https://submit-form.com/mgSQy1itS" method="POST">
<section class="contact-form__errors contact-form__errors--no-errors" tabindex="-1">
<h2 class="contact-form__errors__title">Le formulaire n'a pu être soumis car <span class="contact-form__errors__count">6</span> erreurs ont été trouvées.</h2>
<ol class="contact-form__errors__list">
<li class="contact-form__errors__list__item contact-form__error-name-required">
<a class="contact-form__errors__list__link" href="#name">
<span class="contact-form__errors__list__item__error-notice">Erreur : </span>
Nom - Ce champ est obligatoire.
</a>
</li>
<li class="contact-form__errors__list__item contact-form__error-name-short">
<a class="contact-form__errors__list__link" href="#name">
<span class="contact-form__errors__list__item__error-notice">Erreur : </span>
Nom - Ce champ doit contenir au minimum deux caractères.
</a>
</li>
<li class="contact-form__errors__list__item contact-form__error-name-invalid">
<a class="contact-form__errors__list__link" href="#name">
<span class="contact-form__errors__list__item__error-notice">Erreur : </span>
Nom - Les caractères admissibles sont des chiffres, des lettres et des traits d'union.
</a>
</li>
<li class="contact-form__errors__list__item contact-form__error-email-required">
<a class="contact-form__errors__list__link" href="#email">
<span class="contact-form__errors__list__item__error-notice">Erreur : </span>
Courriel - Ce champ est obligatoire.
</a>
</li>
<li class="contact-form__errors__list__item contact-form__error-email-invalid">
<a class="contact-form__errors__list__link" href="#email">
<span class="contact-form__errors__list__item__error-notice">Erreur : </span>
Courriel - Le format de l'adresse est invalide. Il doit ressembler à votre nom@domaine.com .
</a>
</li>
<li class="contact-form__errors__list__item contact-form__error-message-required">
<a class="contact-form__errors__list__link" href="#message">
<span class="contact-form__errors__list__item__error-notice">Erreur : </span>
Message - Ce champ est obligatoire.
</a>
</li>
</ol>
</section>
<section class="contact-form__submission-messages contact-form__submission-messages--hidden" tabindex="-1">
<span class="contact-form__submission-message contact-form__submission-message--success contact-form__submission-message--hidden">Votre message a bien été envoyé. Merci.</span>
<span class="contact-form__submission-message contact-form__submission-message--failed contact-form__submission-message--hidden">Un problème est survenue lors de l'envoie du message. Veuillez réessayer.</span>
<span class="contact-form__submission-message contact-form__submission-message--panic contact-form__submission-message--hidden">Une erreur inconnue est survenue. Veuillez rafraîchir la page et réessayer.</span>
</section>
<div class="contact-form__group">
<label class="contact-form__label contact-form__label--required" for="name">
<span class="contact-form__label--required-notice">* </span>
Name
<span class="contact-form__label--required-notice">(obligatoire)</span>
</label>
<span aria-live="polite" class="contact-form__error contact-form__error--no-error contact-form__error-name-required">Ce champ est obligatoire.</span>
<span aria-live="polite" class="contact-form__error contact-form__error--no-error contact-form__error-name-short">Ce champ doit contenir au minimum deux caractères.</span>
<span aria-live="polite" class="contact-form__error contact-form__error--no-error contact-form__error-name-invalid">Les caractères admissibles sont des chiffres, des lettres et des traits d'union.</span>
<input class="contact-form__field contact-form__field--input" id="name" name="name" type="text" minlength="2" pattern="[A-Za-z0-9\-\s]*" required="required" aria-required="true" />
</div>
<div class="contact-form__group">
<label class="contact-form__label contact-form__label--required" for="email">
<span class="contact-form__label--required-notice">* </span>
Email
<span class="contact-form__label--required-notice">(obligatoire)</span>
</label>
<span aria-live="polite" class="contact-form__error contact-form__error--no-error contact-form__error-email-required">Ce champ est obligatoire.</span>
<span aria-live="polite" class="contact-form__error contact-form__error--no-error contact-form__error-email-invalid">Le format de l'adresse est invalide. Il doit ressembler à votre nom@domaine.com .</span>
<input class="contact-form__field contact-form__field--input" id="email" name="email" type="email" pattern="^[a-zA-Z0-9.!#$%&'*+\/=?^_`\{\|\}~\-]+@[a-zA-Z0-9](?:[a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?)*$" required aria-required="true" />
</div>
<div class="contact-form__group">
<label class="contact-form__label contact-form__label--required" for="message">
<span class="contact-form__label--required-notice">* </span>
Message
<span class="contact-form__label--required-notice">(obligatoire)</span>
</label>
<span aria-live="polite" class="contact-form__error contact-form__error--no-error contact-form__error-message-required">Ce champ est obligatoire.</span>
<textarea class="contact-form__field contact-form__field--textarea" id="message" name="message" rows="10" required aria-required="true" ></textarea>
</div>
<div class="contact-form__controls">
<button class="contact-form__button contact-form__button--submit" type="submit">Send</button>
<button class="contact-form__button contact-form__button--reset" type="reset">Reset form</button>
</div>
</form>
<script id="botpoisonScript" src="https://unpkg.com/@botpoison/browser" async></script>
<script>
/*
Captcha management
*/
// Init captcha
let botpoison = undefined;
let botpoisonScript = document.getElementById("botpoisonScript");
botpoisonScript.addEventListener("load", function() {
botpoison = new Botpoison({
publicKey: "pk_0cdf5d2f-1278-4085-9639-7ef4bf05ec6a",
});
})
const form = document.getElementsByClassName("contact-form")[0];
/*
Form Validation
*/
const errorList = document.getElementsByClassName("contact-form__errors")[0];
const errorListErrorCount = document.getElementsByClassName("contact-form__errors__count")[0];
let totalErrorCount = 0;
// Name input
const name = document.getElementById("name");
const nameErrorRequired = document.getElementsByClassName("contact-form__error-name-required");
const nameErrorShort = document.getElementsByClassName("contact-form__error-name-short");
const nameErrorInvalid = document.getElementsByClassName("contact-form__error-name-invalid");
let nameErrorCount = 0;
name.addEventListener("focusout", (event) => {
validateName();
errorListErrorCount.textContent = totalErrorCount;
if (totalErrorCount === 0) {
errorList.classList.add("contact-form__errors--no-errors");
}
});
function validateName() {
totalErrorCount -= nameErrorCount;
let errorCount = 0;
if (name.validity.valueMissing) {
for (let i = 0; i < nameErrorRequired.length; i++) {
nameErrorRequired[i].classList.remove("contact-form__error--no-error");
}
errorCount++;
} else {
for (let i = 0; i < nameErrorRequired.length; i++) {
nameErrorRequired[i].classList.add("contact-form__error--no-error");
}
}
if (name.validity.tooShort) {
for (let i = 0; i < nameErrorShort.length; i++) {
nameErrorShort[i].classList.remove("contact-form__error--no-error");
}
errorCount++;
} else {
for (let i = 0; i < nameErrorShort.length; i++) {
nameErrorShort[i].classList.add("contact-form__error--no-error");
}
}
if (name.validity.patternMismatch) {
for (let i = 0; i < nameErrorInvalid.length; i++) {
nameErrorInvalid[i].classList.remove("contact-form__error--no-error");
}
errorCount++;
} else {
for (let i = 0; i < nameErrorInvalid.length; i++) {
nameErrorInvalid[i].classList.add("contact-form__error--no-error");
}
}
nameErrorCount = errorCount;
totalErrorCount += nameErrorCount;
}
// Email input
const email = document.getElementById("email");
const emailErrorRequired = document.getElementsByClassName("contact-form__error-email-required");
const emailErrorInvalid = document.getElementsByClassName("contact-form__error-email-invalid");
let emailErrorCount = 0;
email.addEventListener("focusout", (event) => {
validateEmail();
errorListErrorCount.textContent = totalErrorCount;
if (totalErrorCount === 0) {
errorList.classList.add("contact-form__errors--no-errors");
}
});
function validateEmail() {
totalErrorCount -= emailErrorCount;
let errorCount = 0;
if (email.validity.valueMissing) {
for (let i = 0; i < emailErrorRequired.length; i++) {
emailErrorRequired[i].classList.remove("contact-form__error--no-error");
}
errorCount++;
} else {
for (let i = 0; i < emailErrorRequired.length; i++) {
emailErrorRequired[i].classList.add("contact-form__error--no-error");
}
}
if (email.validity.patternMismatch) {
for (let i = 0; i < emailErrorInvalid.length; i++) {
emailErrorInvalid[i].classList.remove("contact-form__error--no-error");
}
errorCount++;
} else {
for (let i = 0; i < emailErrorInvalid.length; i++) {
emailErrorInvalid[i].classList.add("contact-form__error--no-error");
}
}
emailErrorCount = errorCount;
totalErrorCount += emailErrorCount;
}
// Message input
const message = document.getElementById("message");
const messageErrorRequired = document.getElementsByClassName("contact-form__error-message-required");
let messageErrorCount = 0;
message.addEventListener("focusout", (event) => {
validateMessage();
errorListErrorCount.textContent = totalErrorCount;
if (totalErrorCount === 0) {
errorList.classList.add("contact-form__errors--no-errors");
}
});
function validateMessage() {
totalErrorCount -= messageErrorCount;
let errorCount = 0;
if (message.validity.valueMissing) {
for (let i = 0; i < messageErrorRequired.length; i++) {
messageErrorRequired[i].classList.remove("contact-form__error--no-error");
}
errorCount++;
} else {
for (let i = 0; i < messageErrorRequired.length; i++) {
messageErrorRequired[i].classList.add("contact-form__error--no-error");
}
}
messageErrorCount = errorCount;
totalErrorCount += messageErrorCount;
}
function validateFields() {
validateName();
validateEmail();
validateMessage();
}
// Reset Form
const allErrorMessage = document.getElementsByClassName("contact-form__error");
form.addEventListener("reset", (event) => {
// Hide and reset form error messages
nameErrorCount = 0;
emailErrorCount = 0;
messageErrorCount = 0;
totalErrorCount = 0;
for (let i = 0; i < allErrorMessage.length; i++) {
allErrorMessage[i].classList.add("contact-form__error--no-error");
}
errorList.classList.add("contact-form__errors--no-errors");
errorListErrorCount.textContent = 0;
// Hide and reset form submission error messages
submissionMessages.classList.add("contact-form__submission-messages--hidden");
submissionSuccess.classList.add("contact-form__submission-message--hidden");
submissionFailed.classList.add("contact-form__submission-message--hidden");
submissionPanic.classList.add("contact-form__submission-message--hidden");
});
// Submit Form
const submissionMessages = document.getElementsByClassName("contact-form__submission-messages")[0];
const submissionSuccess = document.getElementsByClassName("contact-form__submission-message--success")[0];
const submissionFailed = document.getElementsByClassName("contact-form__submission-message--failed")[0];
const submissionPanic = document.getElementsByClassName("contact-form__submission-message--panic")[0];
form.addEventListener("submit", (event) => {
event.preventDefault();
const isFormValid = name.validity.valid && email.validity.valid && message.validity.valid;
if (isFormValid) {
let formData = new FormData(event.target);
if (botpoison === undefined) {
console.log("Captcha not loaded yet");
} else {
botpoison.challenge().then(({ solution }) => {
fetch(event.target.action, {
method: form.method,
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({
name: formData.get("name"),
email: formData.get("email"),
message: formData.get("message"),
_botpoison: solution,
}),
}).then(function (response) {
submissionMessages.classList.remove("contact-form__submission-messages--hidden");
if (response.ok) {
submissionSuccess.classList.remove("contact-form__submission-message--hidden");
form.reset();
} else {
submissionFailed.classList.remove("contact-form__submission-message--hidden");
}
}).catch(function(response) {
submissionMessages.classList.remove("contact-form__submission-messages--hidden")
submissionPanic.classList.remove("contact-form__submission-message--hidden");
});
});
}
} else {
// Validate form internally
form.checkValidity();
// Analyse validation results
validateFields();
// Set and display errors list
errorListErrorCount.textContent = totalErrorCount;
errorList.classList.remove("contact-form__errors--no-errors");
}
});
</script>lapinchatware.ca fait peau neuve2024-08-16T00:00:00+00:002024-08-16T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/blog/lapinchatware-ca-fait-peau-neuve/<p>C'est avec grand plaisir que je mets en ligne mon nouveau site web. Cette refonte majeure ma permis de restructurer
le contenu, d'ouvrir un blog, de faire des choix techniques plus judicieux et de permettre l'accessibilité
du site à un plus grand nombre.</p>
lapinchatware.ca2024-08-16T00:00:00+00:002024-08-16T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/web/lapinchatware-ca/Maintenant professionnel de l'accessibilité2024-07-08T00:00:00+00:002024-07-08T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/blog/maintenant-professionnel-de-laccessibilite/<p>Après un formation d’une durée de 45 heures, du 21 mars au 25 juin 2024, j'ai obtenu mon attestion de formation avec une
note excellente! Cette formation donné par Jean-Marie d'Amour, formateur au Regroupement des aveugles et amblyopes du
Montréal métropolitain (RAAMM), portait <q cite="https://raamm.org/services-grand-public/accessibilite-numerique/formation-sites-web-universellement-accessibles/">notamment [sur] les différentes clientèles de l’accessibilité, les outils
d’adaptation, les règles d’accessibilité, l’évaluation fonctionnelle et technique de l’accessibilité, la conception de
documents numériques accessibles et les enjeux d’accessibilité des contenus Web enrichis.</q></p>
Morning Rush2024-06-12T00:00:00+00:002024-06-12T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/games/morning-rush/<p>!!! Morning Rush !!!</p>
<p>Serve as many breakfasts as you can!
Become the richest barista in existence!
Fill the screen with the gratuities of your happy customers!</p>
<p>Complete breakfast and extend the wait line.
Failed breakfast shortens the wait line.</p>
<p>When the wait line is empty you lose... PLAY AGAIN!</p>
Andrée-Anne Giguère - Artiste interdisciplinaire2024-02-01T00:00:00+00:002024-02-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/web/aagiguere-ca/Phonographie Maritime2019-01-01T00:00:00+00:002019-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/phono-maritime/<div id="galleryphonomaritime" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryphonomaritimeimage0" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/avosrisk_40.jpg" alt="Photo d'archive du spectacle: Edouard Germain (poète/performeur) assit sur le sol appuyé sur un mur. Sur lui et le mur, une projection vidéo d'un pont levant de St-Nazaire."/>
<img id="galleryphonomaritimeimage1" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle et parlant dans un micro. Sur le mur derrière, une projection vidéo."/>
<img id="galleryphonomaritimeimage2" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_1.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle et parlant dans un micro. Dans les bras de deux hommes, Jean-Paul Quéinnec (performeur/artiste) et Pierre Tremblay-Thériault (performeur/artiste), elle tente de toucher le plafond du bout des doigts."/>
<img id="galleryphonomaritimeimage3" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_10.jpg" alt="Photo d'archive du spectacle: Vue au travers de la structure d'une tour en bois, Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle parle dans un micro. Edouard Germain (poète/performeur), Jean-Paul Quéinnec (performeur/artiste) et Pierre Tremblay-Thériault (performeur/artiste) l'accompagne."/>
<img id="galleryphonomaritimeimage4" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_11.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle et parlant dans un micro. Dans les bras de deux hommes, Jean-Paul Quéinnec (performeur/artiste) et Edouard Germain (poète/performeur). Pierre Tremblay-Thériault (performeur/artiste) la filme avec un téléphone."/>
<img id="galleryphonomaritimeimage5" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_12.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle parle dans un micro. Pierre Tremblay-Thériault (performeur/artiste) la filme avec un téléphone. Edouard Germain (poète/performeur), Jean-Paul Quéinnec (performeur/artiste) l'accompagne."/>
<img id="galleryphonomaritimeimage6" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_13.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle et parlant dans un micro."/>
<img id="galleryphonomaritimeimage7" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_14.jpg" alt="Photo d'archive du spectacle: François Harvey (concepteur sonore) et Florian Solesse (assistant) assis derrière leur console."/>
<img id="galleryphonomaritimeimage8" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_15.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) parlant dans un micro. Il tient un amplficateur de guitare. Sur et derrière lui, une projection vidéo verte."/>
<img id="galleryphonomaritimeimage9" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_16.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) parlant dans un micro. Il tient un amplficateur de guitare. Sur et derrière lui, une projection vidéo verte."/>
<img id="galleryphonomaritimeimage10" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_17.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) parlant dans un micro. Il tient un amplficateur de guitare. Andrée-Anne Giguère (actrice/concepteur vidéo) filme Edouard Germain (poète/performeur) avec un téléphone. Edouard pointe du doigt Maria Juliana Vélez (danseuse/actrice). Sur eux derrière eux, une projection vidéo verte."/>
<img id="galleryphonomaritimeimage11" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_18.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), Andrée-Anne Giguère (actrice/concepteur vidéo) et Edouard Germain (poète/performeur) se bousculent. Jean-Paul récite un poème. Andrée-Anne filme Jean-Paul. Sur eux derrière eux, une projection vidéo verte."/>
<img id="galleryphonomaritimeimage12" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_19.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) parle dans un micro."/>
<img id="galleryphonomaritimeimage13" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_2.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), Andrée-Anne Giguère (actrice/concepteur vidéo), Maria Juliana Vélez (danseuse/actrice) et Edouard Germain (poète/performeur) se bousculent. Jean-Paul récite un poème. Andrée-Anne filme Jean-Paul. Sur eux derrière eux, une projection vidéo verte."/>
<img id="galleryphonomaritimeimage14" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_20.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), bousculé, parle dans un micro."/>
<img id="galleryphonomaritimeimage15" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_21.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), bousculé, parle dans un micro."/>
<img id="galleryphonomaritimeimage16" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_22.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), bousculé, parle dans un micro. Andrée-Anne Giguère (actrice/concepteur vidéo) filme Jean-Paul."/>
<img id="galleryphonomaritimeimage17" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_23.jpg" alt="Photo d'archive du spectacle: Photo rapprochée de plusieurs corps entremêlés."/>
<img id="galleryphonomaritimeimage18" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_24.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) debout sur les dos de Jean-Paul Quéinnec (performeur/artiste) et Andrée-Anne Giguère (actrice/concepteur vidéo). Elle tient un micro pointé sur Jean-Paul et Andrée-Anne."/>
<img id="galleryphonomaritimeimage19" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_25.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) frotte un micro sur sa hanche. Derrière elle, une projection vidéo rouge remplit de mots blancs."/>
<img id="galleryphonomaritimeimage20" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_26.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) est appuyée sur un mur et frotte un micro sur son coup. Derrière elle, une projection vidéo bleue remplit de mots blancs."/>
<img id="galleryphonomaritimeimage21" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_27.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) danse un micro à la main. Derrière elle, une projection vidéo bleue remplit de mots blancs."/>
<img id="galleryphonomaritimeimage22" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_28.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) danse un micro à la main. Derrière elle, une projection vidéo bleue remplit de mots blancs."/>
<img id="galleryphonomaritimeimage23" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_29.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) danse un micro à la main. Derrière elle, une projection vidéo bleue remplit de mots blancs."/>
<img id="galleryphonomaritimeimage24" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_3.jpg" alt="Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo) tient un micro devant la bouche d'une spectatrice. La spectatrice porte un casque de réalité virtuelle et parle dans le micro."/>
<img id="galleryphonomaritimeimage25" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_30.jpg" alt="Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo) tient un micro devant la bouche d'une spectatrice. La spectatrice porte un casque de réalité virtuelle et parle dans le micro."/>
<img id="galleryphonomaritimeimage26" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_31.jpg" alt="Photo d'archive du spectacle: Main de Andrée-Anne Giguère (actrice/concepteur vidéo) qui tient un micro devant la bouche d'une spectatrice."/>
<img id="galleryphonomaritimeimage27" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_32.jpg" alt="Photo d'archive du spectacle: Photo noir et blanche. Andrée-Anne Giguère (actrice/concepteur vidéo) qui tient un micro devant la bouche d'une spectatrice. La spectatrice porte un casque de réalité virtuelle et parle dans le micro. Derrière, sur le mur, une projection vidéo de modèles 3D."/>
<img id="galleryphonomaritimeimage28" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_33.jpg" alt="Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo) qui parle au micro devant une projection vidéo de modèles 3D."/>
<img id="galleryphonomaritimeimage29" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_34.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) se glisse dans une structure en bois en forme de tour maritime. On y voit aussi un contenant d'eau, de la terre glaise, un couteau et un papier sablé sur une tablette en bois."/>
<img id="galleryphonomaritimeimage30" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_35.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son de la manipulation. Assis sur le sol, sous la tablette, Andrée-Anne Giguère (actrice/concepteur vidéo) et Jean-Paul Quéinnec (performeur/artiste) se tiennent la main."/>
<img id="galleryphonomaritimeimage31" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_36.jpg" alt="Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo), les yeux fermés, se filme avec un téléphone et tient le bras de Jean-Paul Quéinnec (performeur/artiste). Jean-Paul tient un micro dans sa main et regarde au loin."/>
<img id="galleryphonomaritimeimage32" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_37.jpg" alt="Photo d'archive du spectacle: Deux mains se tiennent. Les deux bras sont étirés. Ce sont les mains de Edouard Germain (poète/performeur) et Jean-Paul Quéinnec (performeur/artiste)."/>
<img id="galleryphonomaritimeimage33" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_38.jpg" alt="Photo d'archive du spectacle: Dos collé au mur, Andrée-Anne Giguère (actrice/concepteur vidéo), les yeux fermés, se filme avec un téléphone et tient le bras de Jean-Paul Quéinnec (performeur/artiste), lui aussi le dos collé au mur. Jean-Paul tient un micro et regarde vers le plafond les yeux fermés."/>
<img id="galleryphonomaritimeimage34" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_39.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule du papier sablé déposé sur de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son des manipulations. On peut voir devant lui un contenant d'eau et un couteau. Pierre se trouve dans une structure en bois en forme de tour maritime. Au dessus de la tablette se trouve un petit projecteur lumineux et une caméra."/>
<img id="galleryphonomaritimeimage35" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_4.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule du papier sablé déposé sur de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son des manipulations. On peut voir devant lui un contenant d'eau et un couteau. Pierre se trouve dans une structure en bois en forme de tour maritime. Au dessus de la tablette se trouve un petit projecteur lumineux et une caméra. Derrière, sur le mur, une projection vidéo des actions effectuées sur la tablette."/>
<img id="galleryphonomaritimeimage36" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_40.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule du papier sablé déposé sur de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son des manipulations. On peut voir devant lui un contenant d'eau et un couteau. Pierre se trouve dans une structure en bois en forme de tour maritime. À gauche de la tour, Maria Juliana Vélez (danseuse/actrice) touche la tour doucement."/>
<img id="galleryphonomaritimeimage37" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_41.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) de dos se trouve dans une structure en bois en forme de tour maritime. Andrée-Anne Giguère (actrice/concepteur vidéo), Jean-Paul Quéinnec (performeur/artiste) et Maria Juliana Vélez (danseuse/actrice) se tiennent la main et forme un cercle autour de la tour."/>
<img id="galleryphonomaritimeimage38" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_42.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) caché se trouve dans une structure en bois en forme de tour maritime. Andrée-Anne Giguère (actrice/concepteur vidéo), Jean-Paul Quéinnec (performeur/artiste) et Maria Juliana Vélez (danseuse/actrice) se tiennent la main et forme un cercle autour de la tour."/>
<img id="galleryphonomaritimeimage39" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_44.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice), assis au sol, touche la tour doucement. Pierre Tremblay-Thériault (performeur/artiste) caché se trouve dans une structure en bois en forme de tour maritime."/>
<img id="galleryphonomaritimeimage40" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_45.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule du papier sablé déposé sur de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son des manipulations. On peut voir devant lui un contenant d'eau. Pierre se trouve dans une structure en bois en forme de tour maritime."/>
<img id="galleryphonomaritimeimage41" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_46.jpg" alt="Photo d'archive du spectacle: Appuyé sur un mur, des silouhettes non identifiables se tiennent debout. Une projection vidéo abstraite peut être vu sur le mur."/>
<img id="galleryphonomaritimeimage42" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_47.jpg" alt="Photo d'archive du spectacle: Image d'une guitare très rapprochée. La main du musicien manipule les cordes avec un outil fin en métal."/>
<img id="galleryphonomaritimeimage43" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_49.jpg" alt="Photo d'archive du spectacle: Image d'une guitare très rapprochée. Devant les cordes de la guitare on voit un micro tenu par une main inconnu. La main d'un musicien manipule les cordes avec un outil fin en métal."/>
<img id="galleryphonomaritimeimage44" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_5.jpg" alt="Photo d'archive du spectacle: Formes difficiles à identifier. C'est l'image rapproché d'un musicien qui joue de la guitare."/>
<img id="galleryphonomaritimeimage45" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_50.jpg" alt="Photo d'archive du spectacle: Le devant du corps de Maria Juliana Vélez (danseuse/actrice) est ouvert vers le public. Jean-Paul Quéinnec (performeur/artiste), pencher vers l'avant, attrappe Maria par les hanches. Sur leurs corps on peut voir une projection vidéo d'un bateau se déplaçant dans un canal."/>
<img id="galleryphonomaritimeimage46" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_51.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) est debout et collé à un mur qu'elle touche doucement. Derrière elle, à genoux sur le sol, Jean-Paul Quéinnec (performeur/artiste) la tient par les hanches. Derrière lui, Andrée-Anne Giguère (actrice/concepteur vidéo), assise sur le sol, le tient par les hanches. Sur le eux et sur le mur on peut voir une projection vidéo abstraite d'un dégradé bleu."/>
<img id="galleryphonomaritimeimage47" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_52.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) est à genoux sur le sol. Il tient les jambes d'un autre performeur. Sur sa figure, on peut voir une projection vidéo d'un paysage gazonné."/>
<img id="galleryphonomaritimeimage48" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_53.jpg" alt="Photo d'archive du spectacle: Formes difficiles à identifier. C'est une image de plusieurs performeurs à contrejour."/>
<img id="galleryphonomaritimeimage49" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_54.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) tient un performeur dans ses bras. Sur sa figure et le dos du performeur, on peut voir une projection vidéo d'un mur remplit de graffiti."/>
<img id="galleryphonomaritimeimage50" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_55.jpg" alt="Photo d'archive du spectacle: Formes difficiles à identifier. C'est une image de plusieurs performeurs à contrejour."/>
<img id="galleryphonomaritimeimage51" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_56.jpg" alt="Photo d'archive du spectacle: Formes difficiles à identifier. C'est une image de plusieurs performeurs à contrejour."/>
<img id="galleryphonomaritimeimage52" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_57.jpg" alt="Photo d'archive du spectacle: Florian Solesse (assistant) assis derrière sa console."/>
<img id="galleryphonomaritimeimage53" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_58.jpg" alt="Photo d'archive du spectacle: Edouard Germain (poète/performeur) debout et appuyé sur un mur. Sur lui et le mur, une projection vidéo abstraite mauve, blanche et noire."/>
<img id="galleryphonomaritimeimage54" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_59.jpg" alt="Photo d'archive du spectacle: Edouard Germain (poète/performeur) assit sur le sol appuyé sur un mur. Sur lui et le mur, une projection vidéo abstraite rouge, blanche et noire."/>
<img id="galleryphonomaritimeimage55" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_6.jpg" alt="Photo d'archive du spectacle: François Harvey (concepteur sonore) debout et appuyé sur un mur. Sur lui et le mur, une projection vidéo abstraite rouge, blanche et noire."/>
<img id="galleryphonomaritimeimage56" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_60.jpg" alt="Photo d'archive du spectacle: François Harvey (concepteur sonore) joue de la guitare. Derrière lui sur le mur, une projection vidéo abstraite rouge, blanche et noire."/>
<img id="galleryphonomaritimeimage57" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_61.jpg" alt="Photo d'archive du spectacle: Image noire et blanche. Les performeurs se tient ensemble. Les corps sont collés les uns sur les autres. Derrière eux on aperçoit la tour maritime. En arrière-plan on aperçoit le public assis au sol devant une projection vidéo abstraite sur deux murs."/>
<img id="galleryphonomaritimeimage58" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_62.jpg" alt="Photo d'archive du spectacle: François Harvey (concepteur sonore) joue de la guitare. Pierre Tremblay-Thériault (performeur/artiste) est assis sur une chaise et film François avec un téléphone. Derrière, sur le mur, on voit une projection vidéo abstraite rouge, blanche et noire."/>
<img id="galleryphonomaritimeimage59" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_63.jpg" alt="Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo), Jean-Paul Quéinnec (performeur/artiste) et Maria Juliana Vélez (danseuse/actrice) sont collés face au mur et touche la surface avec leurs mains. Sur eux et le mur on voit une projection de mots blancs."/>
<img id="galleryphonomaritimeimage60" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_64.jpg" alt="Photo d'archive du spectacle: Edouard Germain (poète/performeur) est dos au mur et collé sur celui-ci. Sur lui et le mur on peut voir une projection de mots blancs."/>
<img id="galleryphonomaritimeimage61" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_65.jpg" alt="Photo d'archive du spectacle: On voit en premier plan la silouhette de Pierre Tremblay-Thériault (performeur/artiste), Maria Juliana Vélez (danseuse/actrice) et la tour maritime. En arrière-plan, les murs sont rouges."/>
<img id="galleryphonomaritimeimage62" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_7.jpg" alt="Photo d'archive du spectacle: La main de Edouard Germain (poète/performeur) touche doucement le mur. Sur la main et le mur on peut voir une projection de mots blancs."/>
<img id="galleryphonomaritimeimage63" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_8.jpg" alt="Photo d'archive du spectacle: On voit la silouhette d'une femme collé à un mur. Sur elle et le mur on peut voir une projection de mots blancs."/>
<img id="galleryphonomaritimeimage64" class="gallery__viewport__image" src="/arts/phono-maritime/gallery/phonographie_9.jpg" alt="Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo) est le dos collé au mur. Ses bras sont étendus. Sur elle et le mur on peut voir une projection de mots blancs."/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage0"
aria-label="Voir l'image "Photo d'archive du spectacle: Edouard Germain (poète/performeur) assit sur le sol appuyé sur un mur. Sur lui et le mur, une projection vidéo d'un pont levant de St-Nazaire.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/avosrisk_40.jpg" alt="Photo d'archive du spectacle: Edouard Germain (poète/performeur) assit sur le sol appuyé sur un mur. Sur lui et le mur, une projection vidéo d'un pont levant de St-Nazaire."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage1"
aria-label="Voir l'image "Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle et parlant dans un micro. Sur le mur derrière, une projection vidéo.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle et parlant dans un micro. Sur le mur derrière, une projection vidéo."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage2"
aria-label="Voir l'image "Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle et parlant dans un micro. Dans les bras de deux hommes, Jean-Paul Quéinnec (performeur/artiste) et Pierre Tremblay-Thériault (performeur/artiste), elle tente de toucher le plafond du bout des doigts.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_1.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle et parlant dans un micro. Dans les bras de deux hommes, Jean-Paul Quéinnec (performeur/artiste) et Pierre Tremblay-Thériault (performeur/artiste), elle tente de toucher le plafond du bout des doigts."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage3"
aria-label="Voir l'image "Photo d'archive du spectacle: Vue au travers de la structure d'une tour en bois, Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle parle dans un micro. Edouard Germain (poète/performeur), Jean-Paul Quéinnec (performeur/artiste) et Pierre Tremblay-Thériault (performeur/artiste) l'accompagne.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_10.jpg" alt="Photo d'archive du spectacle: Vue au travers de la structure d'une tour en bois, Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle parle dans un micro. Edouard Germain (poète/performeur), Jean-Paul Quéinnec (performeur/artiste) et Pierre Tremblay-Thériault (performeur/artiste) l'accompagne."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage4"
aria-label="Voir l'image "Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle et parlant dans un micro. Dans les bras de deux hommes, Jean-Paul Quéinnec (performeur/artiste) et Edouard Germain (poète/performeur). Pierre Tremblay-Thériault (performeur/artiste) la filme avec un téléphone.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_11.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle et parlant dans un micro. Dans les bras de deux hommes, Jean-Paul Quéinnec (performeur/artiste) et Edouard Germain (poète/performeur). Pierre Tremblay-Thériault (performeur/artiste) la filme avec un téléphone."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage5"
aria-label="Voir l'image "Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle parle dans un micro. Pierre Tremblay-Thériault (performeur/artiste) la filme avec un téléphone. Edouard Germain (poète/performeur), Jean-Paul Quéinnec (performeur/artiste) l'accompagne.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_12.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle parle dans un micro. Pierre Tremblay-Thériault (performeur/artiste) la filme avec un téléphone. Edouard Germain (poète/performeur), Jean-Paul Quéinnec (performeur/artiste) l'accompagne."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage6"
aria-label="Voir l'image "Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle et parlant dans un micro.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_13.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) portant un casque de réalité virtuelle et parlant dans un micro."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage7"
aria-label="Voir l'image "Photo d'archive du spectacle: François Harvey (concepteur sonore) et Florian Solesse (assistant) assis derrière leur console.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_14.jpg" alt="Photo d'archive du spectacle: François Harvey (concepteur sonore) et Florian Solesse (assistant) assis derrière leur console."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage8"
aria-label="Voir l'image "Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) parlant dans un micro. Il tient un amplficateur de guitare. Sur et derrière lui, une projection vidéo verte.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_15.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) parlant dans un micro. Il tient un amplficateur de guitare. Sur et derrière lui, une projection vidéo verte."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage9"
aria-label="Voir l'image "Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) parlant dans un micro. Il tient un amplficateur de guitare. Sur et derrière lui, une projection vidéo verte.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_16.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) parlant dans un micro. Il tient un amplficateur de guitare. Sur et derrière lui, une projection vidéo verte."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage10"
aria-label="Voir l'image "Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) parlant dans un micro. Il tient un amplficateur de guitare. Andrée-Anne Giguère (actrice/concepteur vidéo) filme Edouard Germain (poète/performeur) avec un téléphone. Edouard pointe du doigt Maria Juliana Vélez (danseuse/actrice). Sur eux derrière eux, une projection vidéo verte.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_17.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) parlant dans un micro. Il tient un amplficateur de guitare. Andrée-Anne Giguère (actrice/concepteur vidéo) filme Edouard Germain (poète/performeur) avec un téléphone. Edouard pointe du doigt Maria Juliana Vélez (danseuse/actrice). Sur eux derrière eux, une projection vidéo verte."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage11"
aria-label="Voir l'image "Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), Andrée-Anne Giguère (actrice/concepteur vidéo) et Edouard Germain (poète/performeur) se bousculent. Jean-Paul récite un poème. Andrée-Anne filme Jean-Paul. Sur eux derrière eux, une projection vidéo verte.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_18.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), Andrée-Anne Giguère (actrice/concepteur vidéo) et Edouard Germain (poète/performeur) se bousculent. Jean-Paul récite un poème. Andrée-Anne filme Jean-Paul. Sur eux derrière eux, une projection vidéo verte."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage12"
aria-label="Voir l'image "Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) parle dans un micro.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_19.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) parle dans un micro."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage13"
aria-label="Voir l'image "Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), Andrée-Anne Giguère (actrice/concepteur vidéo), Maria Juliana Vélez (danseuse/actrice) et Edouard Germain (poète/performeur) se bousculent. Jean-Paul récite un poème. Andrée-Anne filme Jean-Paul. Sur eux derrière eux, une projection vidéo verte.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_2.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), Andrée-Anne Giguère (actrice/concepteur vidéo), Maria Juliana Vélez (danseuse/actrice) et Edouard Germain (poète/performeur) se bousculent. Jean-Paul récite un poème. Andrée-Anne filme Jean-Paul. Sur eux derrière eux, une projection vidéo verte."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage14"
aria-label="Voir l'image "Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), bousculé, parle dans un micro.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_20.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), bousculé, parle dans un micro."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage15"
aria-label="Voir l'image "Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), bousculé, parle dans un micro.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_21.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), bousculé, parle dans un micro."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage16"
aria-label="Voir l'image "Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), bousculé, parle dans un micro. Andrée-Anne Giguère (actrice/concepteur vidéo) filme Jean-Paul.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_22.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste), bousculé, parle dans un micro. Andrée-Anne Giguère (actrice/concepteur vidéo) filme Jean-Paul."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage17"
aria-label="Voir l'image "Photo d'archive du spectacle: Photo rapprochée de plusieurs corps entremêlés.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_23.jpg" alt="Photo d'archive du spectacle: Photo rapprochée de plusieurs corps entremêlés."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage18"
aria-label="Voir l'image "Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) debout sur les dos de Jean-Paul Quéinnec (performeur/artiste) et Andrée-Anne Giguère (actrice/concepteur vidéo). Elle tient un micro pointé sur Jean-Paul et Andrée-Anne.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_24.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) debout sur les dos de Jean-Paul Quéinnec (performeur/artiste) et Andrée-Anne Giguère (actrice/concepteur vidéo). Elle tient un micro pointé sur Jean-Paul et Andrée-Anne."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage19"
aria-label="Voir l'image "Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) frotte un micro sur sa hanche. Derrière elle, une projection vidéo rouge remplit de mots blancs.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_25.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) frotte un micro sur sa hanche. Derrière elle, une projection vidéo rouge remplit de mots blancs."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage20"
aria-label="Voir l'image "Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) est appuyée sur un mur et frotte un micro sur son coup. Derrière elle, une projection vidéo bleue remplit de mots blancs.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_26.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) est appuyée sur un mur et frotte un micro sur son coup. Derrière elle, une projection vidéo bleue remplit de mots blancs."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage21"
aria-label="Voir l'image "Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) danse un micro à la main. Derrière elle, une projection vidéo bleue remplit de mots blancs.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_27.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) danse un micro à la main. Derrière elle, une projection vidéo bleue remplit de mots blancs."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage22"
aria-label="Voir l'image "Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) danse un micro à la main. Derrière elle, une projection vidéo bleue remplit de mots blancs.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_28.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) danse un micro à la main. Derrière elle, une projection vidéo bleue remplit de mots blancs."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage23"
aria-label="Voir l'image "Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) danse un micro à la main. Derrière elle, une projection vidéo bleue remplit de mots blancs.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_29.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) danse un micro à la main. Derrière elle, une projection vidéo bleue remplit de mots blancs."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage24"
aria-label="Voir l'image "Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo) tient un micro devant la bouche d'une spectatrice. La spectatrice porte un casque de réalité virtuelle et parle dans le micro.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_3.jpg" alt="Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo) tient un micro devant la bouche d'une spectatrice. La spectatrice porte un casque de réalité virtuelle et parle dans le micro."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage25"
aria-label="Voir l'image "Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo) tient un micro devant la bouche d'une spectatrice. La spectatrice porte un casque de réalité virtuelle et parle dans le micro.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_30.jpg" alt="Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo) tient un micro devant la bouche d'une spectatrice. La spectatrice porte un casque de réalité virtuelle et parle dans le micro."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage26"
aria-label="Voir l'image "Photo d'archive du spectacle: Main de Andrée-Anne Giguère (actrice/concepteur vidéo) qui tient un micro devant la bouche d'une spectatrice.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_31.jpg" alt="Photo d'archive du spectacle: Main de Andrée-Anne Giguère (actrice/concepteur vidéo) qui tient un micro devant la bouche d'une spectatrice."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage27"
aria-label="Voir l'image "Photo d'archive du spectacle: Photo noir et blanche. Andrée-Anne Giguère (actrice/concepteur vidéo) qui tient un micro devant la bouche d'une spectatrice. La spectatrice porte un casque de réalité virtuelle et parle dans le micro. Derrière, sur le mur, une projection vidéo de modèles 3D.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_32.jpg" alt="Photo d'archive du spectacle: Photo noir et blanche. Andrée-Anne Giguère (actrice/concepteur vidéo) qui tient un micro devant la bouche d'une spectatrice. La spectatrice porte un casque de réalité virtuelle et parle dans le micro. Derrière, sur le mur, une projection vidéo de modèles 3D."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage28"
aria-label="Voir l'image "Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo) qui parle au micro devant une projection vidéo de modèles 3D.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_33.jpg" alt="Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo) qui parle au micro devant une projection vidéo de modèles 3D."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage29"
aria-label="Voir l'image "Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) se glisse dans une structure en bois en forme de tour maritime. On y voit aussi un contenant d'eau, de la terre glaise, un couteau et un papier sablé sur une tablette en bois.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_34.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) se glisse dans une structure en bois en forme de tour maritime. On y voit aussi un contenant d'eau, de la terre glaise, un couteau et un papier sablé sur une tablette en bois."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage30"
aria-label="Voir l'image "Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son de la manipulation. Assis sur le sol, sous la tablette, Andrée-Anne Giguère (actrice/concepteur vidéo) et Jean-Paul Quéinnec (performeur/artiste) se tiennent la main.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_35.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son de la manipulation. Assis sur le sol, sous la tablette, Andrée-Anne Giguère (actrice/concepteur vidéo) et Jean-Paul Quéinnec (performeur/artiste) se tiennent la main."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage31"
aria-label="Voir l'image "Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo), les yeux fermés, se filme avec un téléphone et tient le bras de Jean-Paul Quéinnec (performeur/artiste). Jean-Paul tient un micro dans sa main et regarde au loin.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_36.jpg" alt="Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo), les yeux fermés, se filme avec un téléphone et tient le bras de Jean-Paul Quéinnec (performeur/artiste). Jean-Paul tient un micro dans sa main et regarde au loin."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage32"
aria-label="Voir l'image "Photo d'archive du spectacle: Deux mains se tiennent. Les deux bras sont étirés. Ce sont les mains de Edouard Germain (poète/performeur) et Jean-Paul Quéinnec (performeur/artiste).""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_37.jpg" alt="Photo d'archive du spectacle: Deux mains se tiennent. Les deux bras sont étirés. Ce sont les mains de Edouard Germain (poète/performeur) et Jean-Paul Quéinnec (performeur/artiste)."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage33"
aria-label="Voir l'image "Photo d'archive du spectacle: Dos collé au mur, Andrée-Anne Giguère (actrice/concepteur vidéo), les yeux fermés, se filme avec un téléphone et tient le bras de Jean-Paul Quéinnec (performeur/artiste), lui aussi le dos collé au mur. Jean-Paul tient un micro et regarde vers le plafond les yeux fermés.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_38.jpg" alt="Photo d'archive du spectacle: Dos collé au mur, Andrée-Anne Giguère (actrice/concepteur vidéo), les yeux fermés, se filme avec un téléphone et tient le bras de Jean-Paul Quéinnec (performeur/artiste), lui aussi le dos collé au mur. Jean-Paul tient un micro et regarde vers le plafond les yeux fermés."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage34"
aria-label="Voir l'image "Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule du papier sablé déposé sur de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son des manipulations. On peut voir devant lui un contenant d'eau et un couteau. Pierre se trouve dans une structure en bois en forme de tour maritime. Au dessus de la tablette se trouve un petit projecteur lumineux et une caméra.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_39.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule du papier sablé déposé sur de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son des manipulations. On peut voir devant lui un contenant d'eau et un couteau. Pierre se trouve dans une structure en bois en forme de tour maritime. Au dessus de la tablette se trouve un petit projecteur lumineux et une caméra."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage35"
aria-label="Voir l'image "Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule du papier sablé déposé sur de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son des manipulations. On peut voir devant lui un contenant d'eau et un couteau. Pierre se trouve dans une structure en bois en forme de tour maritime. Au dessus de la tablette se trouve un petit projecteur lumineux et une caméra. Derrière, sur le mur, une projection vidéo des actions effectuées sur la tablette.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_4.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule du papier sablé déposé sur de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son des manipulations. On peut voir devant lui un contenant d'eau et un couteau. Pierre se trouve dans une structure en bois en forme de tour maritime. Au dessus de la tablette se trouve un petit projecteur lumineux et une caméra. Derrière, sur le mur, une projection vidéo des actions effectuées sur la tablette."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage36"
aria-label="Voir l'image "Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule du papier sablé déposé sur de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son des manipulations. On peut voir devant lui un contenant d'eau et un couteau. Pierre se trouve dans une structure en bois en forme de tour maritime. À gauche de la tour, Maria Juliana Vélez (danseuse/actrice) touche la tour doucement.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_40.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule du papier sablé déposé sur de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son des manipulations. On peut voir devant lui un contenant d'eau et un couteau. Pierre se trouve dans une structure en bois en forme de tour maritime. À gauche de la tour, Maria Juliana Vélez (danseuse/actrice) touche la tour doucement."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage37"
aria-label="Voir l'image "Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) de dos se trouve dans une structure en bois en forme de tour maritime. Andrée-Anne Giguère (actrice/concepteur vidéo), Jean-Paul Quéinnec (performeur/artiste) et Maria Juliana Vélez (danseuse/actrice) se tiennent la main et forme un cercle autour de la tour.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_41.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) de dos se trouve dans une structure en bois en forme de tour maritime. Andrée-Anne Giguère (actrice/concepteur vidéo), Jean-Paul Quéinnec (performeur/artiste) et Maria Juliana Vélez (danseuse/actrice) se tiennent la main et forme un cercle autour de la tour."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage38"
aria-label="Voir l'image "Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) caché se trouve dans une structure en bois en forme de tour maritime. Andrée-Anne Giguère (actrice/concepteur vidéo), Jean-Paul Quéinnec (performeur/artiste) et Maria Juliana Vélez (danseuse/actrice) se tiennent la main et forme un cercle autour de la tour.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_42.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) caché se trouve dans une structure en bois en forme de tour maritime. Andrée-Anne Giguère (actrice/concepteur vidéo), Jean-Paul Quéinnec (performeur/artiste) et Maria Juliana Vélez (danseuse/actrice) se tiennent la main et forme un cercle autour de la tour."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage39"
aria-label="Voir l'image "Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice), assis au sol, touche la tour doucement. Pierre Tremblay-Thériault (performeur/artiste) caché se trouve dans une structure en bois en forme de tour maritime.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_44.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice), assis au sol, touche la tour doucement. Pierre Tremblay-Thériault (performeur/artiste) caché se trouve dans une structure en bois en forme de tour maritime."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage40"
aria-label="Voir l'image "Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule du papier sablé déposé sur de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son des manipulations. On peut voir devant lui un contenant d'eau. Pierre se trouve dans une structure en bois en forme de tour maritime.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_45.jpg" alt="Photo d'archive du spectacle: Pierre Tremblay-Thériault (performeur/artiste) manipule du papier sablé déposé sur de la terre glaise mouillée sur une tablette de bois. Un micro est positionné très proche de la terre glaise et capte les son des manipulations. On peut voir devant lui un contenant d'eau. Pierre se trouve dans une structure en bois en forme de tour maritime."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage41"
aria-label="Voir l'image "Photo d'archive du spectacle: Appuyé sur un mur, des silouhettes non identifiables se tiennent debout. Une projection vidéo abstraite peut être vu sur le mur.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_46.jpg" alt="Photo d'archive du spectacle: Appuyé sur un mur, des silouhettes non identifiables se tiennent debout. Une projection vidéo abstraite peut être vu sur le mur."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage42"
aria-label="Voir l'image "Photo d'archive du spectacle: Image d'une guitare très rapprochée. La main du musicien manipule les cordes avec un outil fin en métal.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_47.jpg" alt="Photo d'archive du spectacle: Image d'une guitare très rapprochée. La main du musicien manipule les cordes avec un outil fin en métal."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage43"
aria-label="Voir l'image "Photo d'archive du spectacle: Image d'une guitare très rapprochée. Devant les cordes de la guitare on voit un micro tenu par une main inconnu. La main d'un musicien manipule les cordes avec un outil fin en métal.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_49.jpg" alt="Photo d'archive du spectacle: Image d'une guitare très rapprochée. Devant les cordes de la guitare on voit un micro tenu par une main inconnu. La main d'un musicien manipule les cordes avec un outil fin en métal."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage44"
aria-label="Voir l'image "Photo d'archive du spectacle: Formes difficiles à identifier. C'est l'image rapproché d'un musicien qui joue de la guitare.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_5.jpg" alt="Photo d'archive du spectacle: Formes difficiles à identifier. C'est l'image rapproché d'un musicien qui joue de la guitare."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage45"
aria-label="Voir l'image "Photo d'archive du spectacle: Le devant du corps de Maria Juliana Vélez (danseuse/actrice) est ouvert vers le public. Jean-Paul Quéinnec (performeur/artiste), pencher vers l'avant, attrappe Maria par les hanches. Sur leurs corps on peut voir une projection vidéo d'un bateau se déplaçant dans un canal.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_50.jpg" alt="Photo d'archive du spectacle: Le devant du corps de Maria Juliana Vélez (danseuse/actrice) est ouvert vers le public. Jean-Paul Quéinnec (performeur/artiste), pencher vers l'avant, attrappe Maria par les hanches. Sur leurs corps on peut voir une projection vidéo d'un bateau se déplaçant dans un canal."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage46"
aria-label="Voir l'image "Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) est debout et collé à un mur qu'elle touche doucement. Derrière elle, à genoux sur le sol, Jean-Paul Quéinnec (performeur/artiste) la tient par les hanches. Derrière lui, Andrée-Anne Giguère (actrice/concepteur vidéo), assise sur le sol, le tient par les hanches. Sur le eux et sur le mur on peut voir une projection vidéo abstraite d'un dégradé bleu.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_51.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) est debout et collé à un mur qu'elle touche doucement. Derrière elle, à genoux sur le sol, Jean-Paul Quéinnec (performeur/artiste) la tient par les hanches. Derrière lui, Andrée-Anne Giguère (actrice/concepteur vidéo), assise sur le sol, le tient par les hanches. Sur le eux et sur le mur on peut voir une projection vidéo abstraite d'un dégradé bleu."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage47"
aria-label="Voir l'image "Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) est à genoux sur le sol. Il tient les jambes d'un autre performeur. Sur sa figure, on peut voir une projection vidéo d'un paysage gazonné.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_52.jpg" alt="Photo d'archive du spectacle: Jean-Paul Quéinnec (performeur/artiste) est à genoux sur le sol. Il tient les jambes d'un autre performeur. Sur sa figure, on peut voir une projection vidéo d'un paysage gazonné."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage48"
aria-label="Voir l'image "Photo d'archive du spectacle: Formes difficiles à identifier. C'est une image de plusieurs performeurs à contrejour.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_53.jpg" alt="Photo d'archive du spectacle: Formes difficiles à identifier. C'est une image de plusieurs performeurs à contrejour."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage49"
aria-label="Voir l'image "Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) tient un performeur dans ses bras. Sur sa figure et le dos du performeur, on peut voir une projection vidéo d'un mur remplit de graffiti.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_54.jpg" alt="Photo d'archive du spectacle: Maria Juliana Vélez (danseuse/actrice) tient un performeur dans ses bras. Sur sa figure et le dos du performeur, on peut voir une projection vidéo d'un mur remplit de graffiti."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage50"
aria-label="Voir l'image "Photo d'archive du spectacle: Formes difficiles à identifier. C'est une image de plusieurs performeurs à contrejour.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_55.jpg" alt="Photo d'archive du spectacle: Formes difficiles à identifier. C'est une image de plusieurs performeurs à contrejour."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage51"
aria-label="Voir l'image "Photo d'archive du spectacle: Formes difficiles à identifier. C'est une image de plusieurs performeurs à contrejour.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_56.jpg" alt="Photo d'archive du spectacle: Formes difficiles à identifier. C'est une image de plusieurs performeurs à contrejour."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage52"
aria-label="Voir l'image "Photo d'archive du spectacle: Florian Solesse (assistant) assis derrière sa console.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_57.jpg" alt="Photo d'archive du spectacle: Florian Solesse (assistant) assis derrière sa console."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage53"
aria-label="Voir l'image "Photo d'archive du spectacle: Edouard Germain (poète/performeur) debout et appuyé sur un mur. Sur lui et le mur, une projection vidéo abstraite mauve, blanche et noire.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_58.jpg" alt="Photo d'archive du spectacle: Edouard Germain (poète/performeur) debout et appuyé sur un mur. Sur lui et le mur, une projection vidéo abstraite mauve, blanche et noire."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage54"
aria-label="Voir l'image "Photo d'archive du spectacle: Edouard Germain (poète/performeur) assit sur le sol appuyé sur un mur. Sur lui et le mur, une projection vidéo abstraite rouge, blanche et noire.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_59.jpg" alt="Photo d'archive du spectacle: Edouard Germain (poète/performeur) assit sur le sol appuyé sur un mur. Sur lui et le mur, une projection vidéo abstraite rouge, blanche et noire."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage55"
aria-label="Voir l'image "Photo d'archive du spectacle: François Harvey (concepteur sonore) debout et appuyé sur un mur. Sur lui et le mur, une projection vidéo abstraite rouge, blanche et noire.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_6.jpg" alt="Photo d'archive du spectacle: François Harvey (concepteur sonore) debout et appuyé sur un mur. Sur lui et le mur, une projection vidéo abstraite rouge, blanche et noire."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage56"
aria-label="Voir l'image "Photo d'archive du spectacle: François Harvey (concepteur sonore) joue de la guitare. Derrière lui sur le mur, une projection vidéo abstraite rouge, blanche et noire.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_60.jpg" alt="Photo d'archive du spectacle: François Harvey (concepteur sonore) joue de la guitare. Derrière lui sur le mur, une projection vidéo abstraite rouge, blanche et noire."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage57"
aria-label="Voir l'image "Photo d'archive du spectacle: Image noire et blanche. Les performeurs se tient ensemble. Les corps sont collés les uns sur les autres. Derrière eux on aperçoit la tour maritime. En arrière-plan on aperçoit le public assis au sol devant une projection vidéo abstraite sur deux murs.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_61.jpg" alt="Photo d'archive du spectacle: Image noire et blanche. Les performeurs se tient ensemble. Les corps sont collés les uns sur les autres. Derrière eux on aperçoit la tour maritime. En arrière-plan on aperçoit le public assis au sol devant une projection vidéo abstraite sur deux murs."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage58"
aria-label="Voir l'image "Photo d'archive du spectacle: François Harvey (concepteur sonore) joue de la guitare. Pierre Tremblay-Thériault (performeur/artiste) est assis sur une chaise et film François avec un téléphone. Derrière, sur le mur, on voit une projection vidéo abstraite rouge, blanche et noire.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_62.jpg" alt="Photo d'archive du spectacle: François Harvey (concepteur sonore) joue de la guitare. Pierre Tremblay-Thériault (performeur/artiste) est assis sur une chaise et film François avec un téléphone. Derrière, sur le mur, on voit une projection vidéo abstraite rouge, blanche et noire."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage59"
aria-label="Voir l'image "Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo), Jean-Paul Quéinnec (performeur/artiste) et Maria Juliana Vélez (danseuse/actrice) sont collés face au mur et touche la surface avec leurs mains. Sur eux et le mur on voit une projection de mots blancs.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_63.jpg" alt="Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo), Jean-Paul Quéinnec (performeur/artiste) et Maria Juliana Vélez (danseuse/actrice) sont collés face au mur et touche la surface avec leurs mains. Sur eux et le mur on voit une projection de mots blancs."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage60"
aria-label="Voir l'image "Photo d'archive du spectacle: Edouard Germain (poète/performeur) est dos au mur et collé sur celui-ci. Sur lui et le mur on peut voir une projection de mots blancs.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_64.jpg" alt="Photo d'archive du spectacle: Edouard Germain (poète/performeur) est dos au mur et collé sur celui-ci. Sur lui et le mur on peut voir une projection de mots blancs."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage61"
aria-label="Voir l'image "Photo d'archive du spectacle: On voit en premier plan la silouhette de Pierre Tremblay-Thériault (performeur/artiste), Maria Juliana Vélez (danseuse/actrice) et la tour maritime. En arrière-plan, les murs sont rouges.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_65.jpg" alt="Photo d'archive du spectacle: On voit en premier plan la silouhette de Pierre Tremblay-Thériault (performeur/artiste), Maria Juliana Vélez (danseuse/actrice) et la tour maritime. En arrière-plan, les murs sont rouges."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage62"
aria-label="Voir l'image "Photo d'archive du spectacle: La main de Edouard Germain (poète/performeur) touche doucement le mur. Sur la main et le mur on peut voir une projection de mots blancs.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_7.jpg" alt="Photo d'archive du spectacle: La main de Edouard Germain (poète/performeur) touche doucement le mur. Sur la main et le mur on peut voir une projection de mots blancs."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage63"
aria-label="Voir l'image "Photo d'archive du spectacle: On voit la silouhette d'une femme collé à un mur. Sur elle et le mur on peut voir une projection de mots blancs.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_8.jpg" alt="Photo d'archive du spectacle: On voit la silouhette d'une femme collé à un mur. Sur elle et le mur on peut voir une projection de mots blancs."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonomaritimeimage64"
aria-label="Voir l'image "Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo) est le dos collé au mur. Ses bras sont étendus. Sur elle et le mur on peut voir une projection de mots blancs.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-maritime/gallery/phonographie_9.jpg" alt="Photo d'archive du spectacle: Andrée-Anne Giguère (actrice/concepteur vidéo) est le dos collé au mur. Ses bras sont étendus. Sur elle et le mur on peut voir une projection de mots blancs."/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryphonomaritime", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryphonomaritime", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryphonomaritime", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryphonomaritime", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryphonomaritime = document.querySelectorAll("#galleryphonomaritime .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryphonomaritime.length; i++) {
// Click
galleryButtonsgalleryphonomaritime[i].addEventListener("click", function(event) {
displayImageWithButton("galleryphonomaritime", this);
});
// Focus In
galleryButtonsgalleryphonomaritime[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryphonomaritime", displayedImages[i]);
}
}
displayImageWithButton("galleryphonomaritime", this);
}
});
// Focus Out
galleryButtonsgalleryphonomaritime[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryphonomaritime", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryphonomaritime", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryphonomaritime = document.querySelector("#galleryphonomaritime .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryphonomaritime.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryphonomaritime = document.querySelector("#galleryphonomaritime .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryphonomaritime.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryphonomaritime = document.querySelector("#galleryphonomaritime .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryphonomaritime.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryphonomaritime", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryphonomaritime", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryphonomaritime", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryphonomaritime = 0;
let touchendXgalleryphonomaritime = 0;
const galleryViewportgalleryphonomaritime = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryphonomaritime !== undefined) {
galleryViewportgalleryphonomaritime.addEventListener('touchstart', function(event) {
touchstartXgalleryphonomaritime = event.changedTouches[0].screenX
});
galleryViewportgalleryphonomaritime.addEventListener('touchend', function(event) {
touchendXgalleryphonomaritime = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryphonomaritime, touchendXgalleryphonomaritime);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryphonomaritime.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Phonographie St-Nazaire2018-01-01T00:00:00+00:002018-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/phono-st-nazaire/<div id="galleryphonostnazaire" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryphonostnazaireimage0" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/autoportrait_1.jpg" alt="Photo d'archive de la résidence de création: Autoportrait de Jean-Paul Quéinnec (chercheur) devant un silo dans le port de St-Nazaire en France."/>
<img id="galleryphonostnazaireimage1" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/autoportrait_2.jpg" alt="Photo d'archive de la résidence de création: Portrait de Jocelyn Cottencin (concepteur vidéo et sonore) devant la cheminé d'un bunker. Dans l'ouverture de la cheminé un homme habillé de blanc cache sa tête."/>
<img id="galleryphonostnazaireimage2" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/autoportrait_3.jpg" alt="Photo d'archive de la résidence de création: Edouard Germain (performeur et poète) et Christophe Havard (concepteur sonore) performe sur la promenade du port de St-Nazaire. Christophe fait semblant de jouer du violon."/>
<img id="galleryphonostnazaireimage3" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/autoportrait_4.jpg" alt="Photo d'archive de la résidence de création: Edouard Germain (performeur et poète) et Christophe Havard (concepteur sonore) performe sur la promenade du port de St-Nazaire. Christophe fait semblant de jouer du violon."/>
<img id="galleryphonostnazaireimage4" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/binome_1.jpg" alt="Photo d'archive de la résidence de création: Portrait de Gilles Amalvi (poète). La photo est prise depuis l'intérieur d'un gigantesque tuyaux industriel en acier."/>
<img id="galleryphonostnazaireimage5" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/binome_2.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire. Derrière une haute clôture, on peut voir des boués en métal, des montagnes de chaines et des bâtiments industrielles."/>
<img id="galleryphonostnazaireimage6" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/binome_3.jpg" alt="Photo d'archive de la résidence de création: Jocelyn Cottencin (concepteur vidéo et sonore) en train d'enregister l'environnement sonore qui l'entoure. Il regarde au loin, de l'autre côté d'une baie, des bâtiments industrielles."/>
<img id="galleryphonostnazaireimage7" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/binome_4.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire. En premier-plan on observe un petit mur de béton sur lequel est déposé une roche. Derrière, un peu plus loin, un silo industriel dont certaines parties sont rouges."/>
<img id="galleryphonostnazaireimage8" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/binome_5.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire. Sur la promenade du port de St-Nazaire, lorsque l'observateur est positionné au bon endroit, ce dernier peut voir une peinture formé de triangles rouges. L'entiereté de la peinture rouge est appliqué sur les bâtiments industrielles qui forment le paysage au loin de la promenade."/>
<img id="galleryphonostnazaireimage9" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/binome_6.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire. Sur la promenade du port de St-Nazaire, lorsque l'observateur est positionné au bon endroit, ce dernier peut voir une peinture formé de triangles rouges. L'entiereté de la peinture rouge est appliqué sur les bâtiments industrielles qui forment le paysage au loin de la promenade."/>
<img id="galleryphonostnazaireimage10" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/CorpsPontLevant_1.jpg" alt="Photo d'archive de performance: Christophe Havard (concepteur sonore), Jean-Paul Quéinnec (chercheur), Matthieu Doze (acteur et performeur), Edouard Germain (performeur et poète), Karine Ledoyen (danseuse), François Harvey (concepteur sonore) et Emmanuelle Huynh (danseuse) soulève Jocelyn Cottencin (concepteur vidéo et sonore) dans les airs."/>
<img id="galleryphonostnazaireimage11" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/CorpsPontLevant_2.jpg" alt="Photo d'archive de performance: Christophe Havard (concepteur sonore), Jean-Paul Quéinnec (chercheur), Matthieu Doze (acteur et performeur), Edouard Germain (performeur et poète), Karine Ledoyen (danseuse), François Harvey (concepteur sonore) et Jocelyn Cottencin (concepteur vidéo et sonore) soulève Emmanuelle Huynh (danseuse) dans les airs."/>
<img id="galleryphonostnazaireimage12" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/debut_1.jpg" alt="Photo d'archive de la résidence de création: Edouard Germain (performeur et poète), Karine Ledoyen (danseuse), François Harvey (concepteur sonore), Emmanuelle Huynh (danseuse) et Pierre Tremblay-Thériault (concepteur numérique et artiste) regarde le paysage industriel du port de St-Nazaire depuis le haut de la galerie de leur résidence."/>
<img id="galleryphonostnazaireimage13" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/debut_2.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire depuis le haut de la galerie de leur résidence."/>
<img id="galleryphonostnazaireimage14" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/debut_3.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire depuis le haut de la galerie de leur résidence."/>
<img id="galleryphonostnazaireimage15" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/debut_4.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue du pont levant, depuis le haut de la galerie de leur résidence."/>
<img id="galleryphonostnazaireimage16" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/debut_5.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue de l'arrière du pont levant, depuis le sol. Sur le pont levant est écrit "Vaguer la nuit dans des lumières narratives""/>
<img id="galleryphonostnazaireimage17" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/debut_6.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'un bâteau attendant son tour dans une écluse."/>
<img id="galleryphonostnazaireimage18" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/karine_1.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'un pont traversant la rivière."/>
<img id="galleryphonostnazaireimage19" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/karine_10.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'un pont traversant la rivière."/>
<img id="galleryphonostnazaireimage20" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/karine_11.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'un chantier naval fabricant un bâteau de croisière."/>
<img id="galleryphonostnazaireimage21" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/karine_2.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'une gigantesque grue de chantier naval."/>
<img id="galleryphonostnazaireimage22" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/karine_3.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'une gigantesque grue de chantier naval depuis une plage."/>
<img id="galleryphonostnazaireimage23" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/karine_4.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'une gigantesque grue de chantier naval depuis une plage."/>
<img id="galleryphonostnazaireimage24" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/karine_5.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue du dessous d'un viaduc depuis une plage."/>
<img id="galleryphonostnazaireimage25" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/karine_6.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue du dessous d'un viaduc depuis une plage."/>
<img id="galleryphonostnazaireimage26" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/karine_7.jpg" alt="Photo d'archive de la résidence de création: Couloir extérieur d'un bunker datant de la deuxième guerre mondiale."/>
<img id="galleryphonostnazaireimage27" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/karine_8.jpg" alt="Photo d'archive de la résidence de création: Couloir extérieur d'un bunker datant de la deuxième guerre mondiale."/>
<img id="galleryphonostnazaireimage28" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/karine_9.jpg" alt="Photo d'archive de la résidence de création: Arbre ayant été planté et poussant dans les couloirs d'un bunker datant de la deuxième guerre mondiale."/>
<img id="galleryphonostnazaireimage29" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/playback_1.jpg" alt="Photo d'archive de la résidence de création: Sur la promenade d'un bunker dans le port de St-Nazaire, Matthieu Doze (acteur et performeur) est penché au dessus d'une clotûre jaune. Au loin, on peut voir la mer."/>
<img id="galleryphonostnazaireimage30" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/playback_2.jpg" alt="Photo d'archive de la résidence de création: Matthieu Doze (acteur et performeur), Jean-Paul Quéinnec (chercheur) et Edouard Germain (performeur et poète) performe sur la promenande d'un bunker. Jean-Paul, un micro à la main, soutenu par Édouard tente d'escalader Mathieu."/>
<img id="galleryphonostnazaireimage31" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/playback_3.jpg" alt="Photo d'archive de la résidence de création: Matthieu Doze (acteur et performeur), Jean-Paul Quéinnec (chercheur) et Edouard Germain (performeur et poète) performe sur la promenande d'un bunker. Jean-Paul, un micro à la main, soutenu par Édouard tente d'escalader Mathieu."/>
<img id="galleryphonostnazaireimage32" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/pontlevant_3am.jpg" alt="Photo d'archive de la résidence de création: Pont levant en position levée la nuit."/>
<img id="galleryphonostnazaireimage33" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/preparation_performance_1.jpg" alt="Photo d'archive de la résidence de création: Gilles Amalvi (poète) joue de la guitare sur la plage près d'un mur de pierres. Il est accompagné par Christophe Havard (concepteur sonore) et Jocelyn Cottencin (concepteur vidéo et sonore)."/>
<img id="galleryphonostnazaireimage34" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/preparation_performance_2.jpg" alt="Photo d'archive de la résidence de création: Gilles Amalvi (poète) joue de la guitare sur la plage près d'un mur de pierres. Il est accompagné par Christophe Havard (concepteur sonore) et Jocelyn Cottencin (concepteur vidéo et sonore)."/>
<img id="galleryphonostnazaireimage35" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/principenazarien_1.jpg" alt="Photo d'archive de la résidence de création: Jean-Paul Quéinnec (chercheur), Matthieu Doze (acteur et performeur), Edouard Germain (performeur et poète), Emmanuelle Huynh (danseuse), Jocelyn Cottencin, Gilles Amalvi (poète) et Andrée-Anne Giguère (actrice/concepteur vidéo) regarde pensivement le paysage industriel des chantiers navales."/>
<img id="galleryphonostnazaireimage36" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/principenazarien_2.jpg" alt="Photo d'archive de la résidence de création: Matthieu Doze (acteur et performeur), Jocelyn Cottencin, Gilles Amalvi (poète) et Andrée-Anne Giguère (actrice/concepteur vidéo) regarde pensivement le paysage industriel des chantiers navales."/>
<img id="galleryphonostnazaireimage37" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/principenazarien_3.jpg" alt="Photo d'archive de la résidence de création: Tout l'équipe marchant dans un champs près des viaducs voisins des chantiers navales."/>
<img id="galleryphonostnazaireimage38" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/principenazarien_4.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire vue du champs près des viaducs voisins des chantiers navales."/>
<img id="galleryphonostnazaireimage39" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/principenazarien_5.jpg" alt="Photo d'archive de la résidence de création: Autoportrait de Emmanuelle Huynh (danseuse) devant un plan des bunker dessiner sur un mur de béton."/>
<img id="galleryphonostnazaireimage40" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/principenazarien_6.jpg" alt="Photo d'archive de la résidence de création: Photo artistique montrant des ombres de gens."/>
<img id="galleryphonostnazaireimage41" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_1.jpg" alt="Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) présente au public au centre "Les abeilles" une expérience en réalité virtuelle."/>
<img id="galleryphonostnazaireimage42" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_2.jpg" alt="Photo d'archive de la résidence de création: Enfant au centre "Les abeilles" vivant une expérience en réalité virtuelle."/>
<img id="galleryphonostnazaireimage43" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_3.jpg" alt="Photo d'archive de la résidence de création: Monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle."/>
<img id="galleryphonostnazaireimage44" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_4.jpg" alt="Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) accompagne un monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle."/>
<img id="galleryphonostnazaireimage45" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_5.jpg" alt="Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) accompagne un monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle."/>
<img id="galleryphonostnazaireimage46" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_6.jpg" alt="Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) accompagne une enfant et sa famille au centre "Les abeilles" vivant une expérience en réalité virtuelle."/>
<img id="galleryphonostnazaireimage47" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_7.jpg" alt="Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) accompagne un monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle."/>
<img id="galleryphonostnazaireimage48" class="gallery__viewport__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_8.jpg" alt="Photo d'archive de la résidence de création: Monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle."/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage0"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Autoportrait de Jean-Paul Quéinnec (chercheur) devant un silo dans le port de St-Nazaire en France.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/autoportrait_1.jpg" alt="Photo d'archive de la résidence de création: Autoportrait de Jean-Paul Quéinnec (chercheur) devant un silo dans le port de St-Nazaire en France."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage1"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Portrait de Jocelyn Cottencin (concepteur vidéo et sonore) devant la cheminé d'un bunker. Dans l'ouverture de la cheminé un homme habillé de blanc cache sa tête.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/autoportrait_2.jpg" alt="Photo d'archive de la résidence de création: Portrait de Jocelyn Cottencin (concepteur vidéo et sonore) devant la cheminé d'un bunker. Dans l'ouverture de la cheminé un homme habillé de blanc cache sa tête."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage2"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Edouard Germain (performeur et poète) et Christophe Havard (concepteur sonore) performe sur la promenade du port de St-Nazaire. Christophe fait semblant de jouer du violon.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/autoportrait_3.jpg" alt="Photo d'archive de la résidence de création: Edouard Germain (performeur et poète) et Christophe Havard (concepteur sonore) performe sur la promenade du port de St-Nazaire. Christophe fait semblant de jouer du violon."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage3"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Edouard Germain (performeur et poète) et Christophe Havard (concepteur sonore) performe sur la promenade du port de St-Nazaire. Christophe fait semblant de jouer du violon.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/autoportrait_4.jpg" alt="Photo d'archive de la résidence de création: Edouard Germain (performeur et poète) et Christophe Havard (concepteur sonore) performe sur la promenade du port de St-Nazaire. Christophe fait semblant de jouer du violon."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage4"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Portrait de Gilles Amalvi (poète). La photo est prise depuis l'intérieur d'un gigantesque tuyaux industriel en acier.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/binome_1.jpg" alt="Photo d'archive de la résidence de création: Portrait de Gilles Amalvi (poète). La photo est prise depuis l'intérieur d'un gigantesque tuyaux industriel en acier."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage5"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire. Derrière une haute clôture, on peut voir des boués en métal, des montagnes de chaines et des bâtiments industrielles.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/binome_2.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire. Derrière une haute clôture, on peut voir des boués en métal, des montagnes de chaines et des bâtiments industrielles."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage6"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Jocelyn Cottencin (concepteur vidéo et sonore) en train d'enregister l'environnement sonore qui l'entoure. Il regarde au loin, de l'autre côté d'une baie, des bâtiments industrielles.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/binome_3.jpg" alt="Photo d'archive de la résidence de création: Jocelyn Cottencin (concepteur vidéo et sonore) en train d'enregister l'environnement sonore qui l'entoure. Il regarde au loin, de l'autre côté d'une baie, des bâtiments industrielles."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage7"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire. En premier-plan on observe un petit mur de béton sur lequel est déposé une roche. Derrière, un peu plus loin, un silo industriel dont certaines parties sont rouges.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/binome_4.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire. En premier-plan on observe un petit mur de béton sur lequel est déposé une roche. Derrière, un peu plus loin, un silo industriel dont certaines parties sont rouges."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage8"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire. Sur la promenade du port de St-Nazaire, lorsque l'observateur est positionné au bon endroit, ce dernier peut voir une peinture formé de triangles rouges. L'entiereté de la peinture rouge est appliqué sur les bâtiments industrielles qui forment le paysage au loin de la promenade.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/binome_5.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire. Sur la promenade du port de St-Nazaire, lorsque l'observateur est positionné au bon endroit, ce dernier peut voir une peinture formé de triangles rouges. L'entiereté de la peinture rouge est appliqué sur les bâtiments industrielles qui forment le paysage au loin de la promenade."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage9"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire. Sur la promenade du port de St-Nazaire, lorsque l'observateur est positionné au bon endroit, ce dernier peut voir une peinture formé de triangles rouges. L'entiereté de la peinture rouge est appliqué sur les bâtiments industrielles qui forment le paysage au loin de la promenade.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/binome_6.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire. Sur la promenade du port de St-Nazaire, lorsque l'observateur est positionné au bon endroit, ce dernier peut voir une peinture formé de triangles rouges. L'entiereté de la peinture rouge est appliqué sur les bâtiments industrielles qui forment le paysage au loin de la promenade."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage10"
aria-label="Voir l'image "Photo d'archive de performance: Christophe Havard (concepteur sonore), Jean-Paul Quéinnec (chercheur), Matthieu Doze (acteur et performeur), Edouard Germain (performeur et poète), Karine Ledoyen (danseuse), François Harvey (concepteur sonore) et Emmanuelle Huynh (danseuse) soulève Jocelyn Cottencin (concepteur vidéo et sonore) dans les airs.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/CorpsPontLevant_1.jpg" alt="Photo d'archive de performance: Christophe Havard (concepteur sonore), Jean-Paul Quéinnec (chercheur), Matthieu Doze (acteur et performeur), Edouard Germain (performeur et poète), Karine Ledoyen (danseuse), François Harvey (concepteur sonore) et Emmanuelle Huynh (danseuse) soulève Jocelyn Cottencin (concepteur vidéo et sonore) dans les airs."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage11"
aria-label="Voir l'image "Photo d'archive de performance: Christophe Havard (concepteur sonore), Jean-Paul Quéinnec (chercheur), Matthieu Doze (acteur et performeur), Edouard Germain (performeur et poète), Karine Ledoyen (danseuse), François Harvey (concepteur sonore) et Jocelyn Cottencin (concepteur vidéo et sonore) soulève Emmanuelle Huynh (danseuse) dans les airs.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/CorpsPontLevant_2.jpg" alt="Photo d'archive de performance: Christophe Havard (concepteur sonore), Jean-Paul Quéinnec (chercheur), Matthieu Doze (acteur et performeur), Edouard Germain (performeur et poète), Karine Ledoyen (danseuse), François Harvey (concepteur sonore) et Jocelyn Cottencin (concepteur vidéo et sonore) soulève Emmanuelle Huynh (danseuse) dans les airs."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage12"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Edouard Germain (performeur et poète), Karine Ledoyen (danseuse), François Harvey (concepteur sonore), Emmanuelle Huynh (danseuse) et Pierre Tremblay-Thériault (concepteur numérique et artiste) regarde le paysage industriel du port de St-Nazaire depuis le haut de la galerie de leur résidence.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/debut_1.jpg" alt="Photo d'archive de la résidence de création: Edouard Germain (performeur et poète), Karine Ledoyen (danseuse), François Harvey (concepteur sonore), Emmanuelle Huynh (danseuse) et Pierre Tremblay-Thériault (concepteur numérique et artiste) regarde le paysage industriel du port de St-Nazaire depuis le haut de la galerie de leur résidence."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage13"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire depuis le haut de la galerie de leur résidence.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/debut_2.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire depuis le haut de la galerie de leur résidence."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage14"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire depuis le haut de la galerie de leur résidence.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/debut_3.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire depuis le haut de la galerie de leur résidence."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage15"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue du pont levant, depuis le haut de la galerie de leur résidence.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/debut_4.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue du pont levant, depuis le haut de la galerie de leur résidence."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage16"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue de l'arrière du pont levant, depuis le sol. Sur le pont levant est écrit "Vaguer la nuit dans des lumières narratives"""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/debut_5.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue de l'arrière du pont levant, depuis le sol. Sur le pont levant est écrit "Vaguer la nuit dans des lumières narratives""/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage17"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'un bâteau attendant son tour dans une écluse.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/debut_6.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'un bâteau attendant son tour dans une écluse."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage18"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'un pont traversant la rivière.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/karine_1.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'un pont traversant la rivière."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage19"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'un pont traversant la rivière.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/karine_10.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'un pont traversant la rivière."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage20"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'un chantier naval fabricant un bâteau de croisière.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/karine_11.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'un chantier naval fabricant un bâteau de croisière."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage21"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'une gigantesque grue de chantier naval.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/karine_2.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'une gigantesque grue de chantier naval."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage22"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'une gigantesque grue de chantier naval depuis une plage.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/karine_3.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'une gigantesque grue de chantier naval depuis une plage."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage23"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'une gigantesque grue de chantier naval depuis une plage.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/karine_4.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue d'une gigantesque grue de chantier naval depuis une plage."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage24"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue du dessous d'un viaduc depuis une plage.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/karine_5.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue du dessous d'un viaduc depuis une plage."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage25"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue du dessous d'un viaduc depuis une plage.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/karine_6.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire, plus précisément une vue du dessous d'un viaduc depuis une plage."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage26"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Couloir extérieur d'un bunker datant de la deuxième guerre mondiale.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/karine_7.jpg" alt="Photo d'archive de la résidence de création: Couloir extérieur d'un bunker datant de la deuxième guerre mondiale."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage27"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Couloir extérieur d'un bunker datant de la deuxième guerre mondiale.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/karine_8.jpg" alt="Photo d'archive de la résidence de création: Couloir extérieur d'un bunker datant de la deuxième guerre mondiale."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage28"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Arbre ayant été planté et poussant dans les couloirs d'un bunker datant de la deuxième guerre mondiale.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/karine_9.jpg" alt="Photo d'archive de la résidence de création: Arbre ayant été planté et poussant dans les couloirs d'un bunker datant de la deuxième guerre mondiale."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage29"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Sur la promenade d'un bunker dans le port de St-Nazaire, Matthieu Doze (acteur et performeur) est penché au dessus d'une clotûre jaune. Au loin, on peut voir la mer.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/playback_1.jpg" alt="Photo d'archive de la résidence de création: Sur la promenade d'un bunker dans le port de St-Nazaire, Matthieu Doze (acteur et performeur) est penché au dessus d'une clotûre jaune. Au loin, on peut voir la mer."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage30"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Matthieu Doze (acteur et performeur), Jean-Paul Quéinnec (chercheur) et Edouard Germain (performeur et poète) performe sur la promenande d'un bunker. Jean-Paul, un micro à la main, soutenu par Édouard tente d'escalader Mathieu.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/playback_2.jpg" alt="Photo d'archive de la résidence de création: Matthieu Doze (acteur et performeur), Jean-Paul Quéinnec (chercheur) et Edouard Germain (performeur et poète) performe sur la promenande d'un bunker. Jean-Paul, un micro à la main, soutenu par Édouard tente d'escalader Mathieu."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage31"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Matthieu Doze (acteur et performeur), Jean-Paul Quéinnec (chercheur) et Edouard Germain (performeur et poète) performe sur la promenande d'un bunker. Jean-Paul, un micro à la main, soutenu par Édouard tente d'escalader Mathieu.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/playback_3.jpg" alt="Photo d'archive de la résidence de création: Matthieu Doze (acteur et performeur), Jean-Paul Quéinnec (chercheur) et Edouard Germain (performeur et poète) performe sur la promenande d'un bunker. Jean-Paul, un micro à la main, soutenu par Édouard tente d'escalader Mathieu."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage32"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Pont levant en position levée la nuit.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/pontlevant_3am.jpg" alt="Photo d'archive de la résidence de création: Pont levant en position levée la nuit."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage33"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Gilles Amalvi (poète) joue de la guitare sur la plage près d'un mur de pierres. Il est accompagné par Christophe Havard (concepteur sonore) et Jocelyn Cottencin (concepteur vidéo et sonore).""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/preparation_performance_1.jpg" alt="Photo d'archive de la résidence de création: Gilles Amalvi (poète) joue de la guitare sur la plage près d'un mur de pierres. Il est accompagné par Christophe Havard (concepteur sonore) et Jocelyn Cottencin (concepteur vidéo et sonore)."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage34"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Gilles Amalvi (poète) joue de la guitare sur la plage près d'un mur de pierres. Il est accompagné par Christophe Havard (concepteur sonore) et Jocelyn Cottencin (concepteur vidéo et sonore).""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/preparation_performance_2.jpg" alt="Photo d'archive de la résidence de création: Gilles Amalvi (poète) joue de la guitare sur la plage près d'un mur de pierres. Il est accompagné par Christophe Havard (concepteur sonore) et Jocelyn Cottencin (concepteur vidéo et sonore)."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage35"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Jean-Paul Quéinnec (chercheur), Matthieu Doze (acteur et performeur), Edouard Germain (performeur et poète), Emmanuelle Huynh (danseuse), Jocelyn Cottencin, Gilles Amalvi (poète) et Andrée-Anne Giguère (actrice/concepteur vidéo) regarde pensivement le paysage industriel des chantiers navales.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/principenazarien_1.jpg" alt="Photo d'archive de la résidence de création: Jean-Paul Quéinnec (chercheur), Matthieu Doze (acteur et performeur), Edouard Germain (performeur et poète), Emmanuelle Huynh (danseuse), Jocelyn Cottencin, Gilles Amalvi (poète) et Andrée-Anne Giguère (actrice/concepteur vidéo) regarde pensivement le paysage industriel des chantiers navales."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage36"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Matthieu Doze (acteur et performeur), Jocelyn Cottencin, Gilles Amalvi (poète) et Andrée-Anne Giguère (actrice/concepteur vidéo) regarde pensivement le paysage industriel des chantiers navales.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/principenazarien_2.jpg" alt="Photo d'archive de la résidence de création: Matthieu Doze (acteur et performeur), Jocelyn Cottencin, Gilles Amalvi (poète) et Andrée-Anne Giguère (actrice/concepteur vidéo) regarde pensivement le paysage industriel des chantiers navales."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage37"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Tout l'équipe marchant dans un champs près des viaducs voisins des chantiers navales.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/principenazarien_3.jpg" alt="Photo d'archive de la résidence de création: Tout l'équipe marchant dans un champs près des viaducs voisins des chantiers navales."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage38"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire vue du champs près des viaducs voisins des chantiers navales.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/principenazarien_4.jpg" alt="Photo d'archive de la résidence de création: Paysage industriel du port de St-Nazaire vue du champs près des viaducs voisins des chantiers navales."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage39"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Autoportrait de Emmanuelle Huynh (danseuse) devant un plan des bunker dessiner sur un mur de béton.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/principenazarien_5.jpg" alt="Photo d'archive de la résidence de création: Autoportrait de Emmanuelle Huynh (danseuse) devant un plan des bunker dessiner sur un mur de béton."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage40"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Photo artistique montrant des ombres de gens.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/principenazarien_6.jpg" alt="Photo d'archive de la résidence de création: Photo artistique montrant des ombres de gens."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage41"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) présente au public au centre "Les abeilles" une expérience en réalité virtuelle.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_1.jpg" alt="Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) présente au public au centre "Les abeilles" une expérience en réalité virtuelle."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage42"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Enfant au centre "Les abeilles" vivant une expérience en réalité virtuelle.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_2.jpg" alt="Photo d'archive de la résidence de création: Enfant au centre "Les abeilles" vivant une expérience en réalité virtuelle."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage43"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_3.jpg" alt="Photo d'archive de la résidence de création: Monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage44"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) accompagne un monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_4.jpg" alt="Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) accompagne un monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage45"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) accompagne un monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_5.jpg" alt="Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) accompagne un monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage46"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) accompagne une enfant et sa famille au centre "Les abeilles" vivant une expérience en réalité virtuelle.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_6.jpg" alt="Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) accompagne une enfant et sa famille au centre "Les abeilles" vivant une expérience en réalité virtuelle."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage47"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) accompagne un monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_7.jpg" alt="Photo d'archive de la résidence de création: Pierre Tremblay-Thériault (concepteur numérique et artiste) accompagne un monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryphonostnazaireimage48"
aria-label="Voir l'image "Photo d'archive de la résidence de création: Monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle.""
type="button"
>
<img class="gallery__selector__image" src="/arts/phono-st-nazaire/gallery/RV_abeille_8.jpg" alt="Photo d'archive de la résidence de création: Monsieur au centre "Les abeilles" vivant une expérience en réalité virtuelle."/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryphonostnazaire", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryphonostnazaire", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryphonostnazaire", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryphonostnazaire", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryphonostnazaire = document.querySelectorAll("#galleryphonostnazaire .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryphonostnazaire.length; i++) {
// Click
galleryButtonsgalleryphonostnazaire[i].addEventListener("click", function(event) {
displayImageWithButton("galleryphonostnazaire", this);
});
// Focus In
galleryButtonsgalleryphonostnazaire[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryphonostnazaire", displayedImages[i]);
}
}
displayImageWithButton("galleryphonostnazaire", this);
}
});
// Focus Out
galleryButtonsgalleryphonostnazaire[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryphonostnazaire", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryphonostnazaire", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryphonostnazaire = document.querySelector("#galleryphonostnazaire .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryphonostnazaire.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryphonostnazaire = document.querySelector("#galleryphonostnazaire .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryphonostnazaire.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryphonostnazaire = document.querySelector("#galleryphonostnazaire .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryphonostnazaire.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryphonostnazaire", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryphonostnazaire", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryphonostnazaire", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryphonostnazaire = 0;
let touchendXgalleryphonostnazaire = 0;
const galleryViewportgalleryphonostnazaire = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryphonostnazaire !== undefined) {
galleryViewportgalleryphonostnazaire.addEventListener('touchstart', function(event) {
touchstartXgalleryphonostnazaire = event.changedTouches[0].screenX
});
galleryViewportgalleryphonostnazaire.addEventListener('touchend', function(event) {
touchendXgalleryphonostnazaire = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryphonostnazaire, touchendXgalleryphonostnazaire);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryphonostnazaire.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>St-Nazaire Virtuel2018-01-01T00:00:00+00:002018-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/st-nazaire-virtuel/<div id="iframestnazairevirtuel" class="shortcodes-iframe">
<a class="shortcodes-iframe__skip-link sr-only" href="#iFrameSkipiframestnazairevirtuel">Ne pas interagir avec l'expérience artistique web et aller à la suite du contenu.</a>
<div class="shortcodes-iframe__content">
<iframe
class="shortcodes-iframe__iframe"
width="100%"
height="100%"
src="https://st-nazaire-virtuel.dramaturgiesonore.com"
frameborder="0"
webkitallowfullscreen=""
mozallowfullscreen=""
allowfullscreen=""
></iframe>
</div>
<span id="iFrameSkipiframestnazairevirtuel" class="shortcodes-iframe__skip-anchor sr-only">Suite du contenu</span>
</div>
<script type="text/javascript">
// Check if we are on a mobile device
if (typeof globalThis.deviceIsMobile === "undefined") {
globalThis.deviceIsMobile = () => /Mobile|Android|iPhone|iPad/i.test(navigator.userAgent);
}
// Resize iFrame on window resizing
if (typeof globalThis.iFrameResize === "undefined") {
globalThis.iFrameResize = (container) => container.style.height = (container.getBoundingClientRect()["width"] * 0.5625) + "px";
}
const iFrameContaineriframestnazairevirtuel= document.getElementById("iframestnazairevirtuel").querySelector(".shortcodes-iframe__content");
// Hide iFrame if on mobile
if (iFrameContaineriframestnazairevirtuel!== undefined) {
if( deviceIsMobile() &&true) {
iFrameContaineriframestnazairevirtuel.style.display = "none";
} else {
iFrameResize(iFrameContaineriframestnazairevirtuel);
globalThis.addEventListener("resize", function(event) {
iFrameResize(iFrameContaineriframestnazairevirtuel);
});
}
}
</script>
<div id="gallerystnazairevirtuel" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerystnazairevirtuelimage0" class="gallery__viewport__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_01.jpg" alt="Capture d'écran: image 1"/>
<img id="gallerystnazairevirtuelimage1" class="gallery__viewport__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_02.jpg" alt="Capture d'écran: image 2"/>
<img id="gallerystnazairevirtuelimage2" class="gallery__viewport__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_03.jpg" alt="Capture d'écran: image 3"/>
<img id="gallerystnazairevirtuelimage3" class="gallery__viewport__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_04.jpg" alt="Capture d'écran: image 4"/>
<img id="gallerystnazairevirtuelimage4" class="gallery__viewport__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_05.jpg" alt="Capture d'écran: image 5"/>
<img id="gallerystnazairevirtuelimage5" class="gallery__viewport__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_06.jpg" alt="Capture d'écran: image 6"/>
<img id="gallerystnazairevirtuelimage6" class="gallery__viewport__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_07.jpg" alt="Capture d'écran: image 7"/>
<img id="gallerystnazairevirtuelimage7" class="gallery__viewport__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_08.jpg" alt="Capture d'écran: image 8"/>
<img id="gallerystnazairevirtuelimage8" class="gallery__viewport__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_09.jpg" alt="Capture d'écran: image 9"/>
<img id="gallerystnazairevirtuelimage9" class="gallery__viewport__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_10.jpg" alt="Capture d'écran: image 10"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerystnazairevirtuelimage0"
aria-label="Voir l'image "Capture d'écran: image 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_01.jpg" alt="Capture d'écran: image 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerystnazairevirtuelimage1"
aria-label="Voir l'image "Capture d'écran: image 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_02.jpg" alt="Capture d'écran: image 2"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerystnazairevirtuelimage2"
aria-label="Voir l'image "Capture d'écran: image 3""
type="button"
>
<img class="gallery__selector__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_03.jpg" alt="Capture d'écran: image 3"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerystnazairevirtuelimage3"
aria-label="Voir l'image "Capture d'écran: image 4""
type="button"
>
<img class="gallery__selector__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_04.jpg" alt="Capture d'écran: image 4"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerystnazairevirtuelimage4"
aria-label="Voir l'image "Capture d'écran: image 5""
type="button"
>
<img class="gallery__selector__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_05.jpg" alt="Capture d'écran: image 5"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerystnazairevirtuelimage5"
aria-label="Voir l'image "Capture d'écran: image 6""
type="button"
>
<img class="gallery__selector__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_06.jpg" alt="Capture d'écran: image 6"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerystnazairevirtuelimage6"
aria-label="Voir l'image "Capture d'écran: image 7""
type="button"
>
<img class="gallery__selector__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_07.jpg" alt="Capture d'écran: image 7"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerystnazairevirtuelimage7"
aria-label="Voir l'image "Capture d'écran: image 8""
type="button"
>
<img class="gallery__selector__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_08.jpg" alt="Capture d'écran: image 8"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerystnazairevirtuelimage8"
aria-label="Voir l'image "Capture d'écran: image 9""
type="button"
>
<img class="gallery__selector__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_09.jpg" alt="Capture d'écran: image 9"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerystnazairevirtuelimage9"
aria-label="Voir l'image "Capture d'écran: image 10""
type="button"
>
<img class="gallery__selector__image" src="/arts/st-nazaire-virtuel/gallery/phonomaritime_10.jpg" alt="Capture d'écran: image 10"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerystnazairevirtuel", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerystnazairevirtuel", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerystnazairevirtuel", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerystnazairevirtuel", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerystnazairevirtuel = document.querySelectorAll("#gallerystnazairevirtuel .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerystnazairevirtuel.length; i++) {
// Click
galleryButtonsgallerystnazairevirtuel[i].addEventListener("click", function(event) {
displayImageWithButton("gallerystnazairevirtuel", this);
});
// Focus In
galleryButtonsgallerystnazairevirtuel[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerystnazairevirtuel", displayedImages[i]);
}
}
displayImageWithButton("gallerystnazairevirtuel", this);
}
});
// Focus Out
galleryButtonsgallerystnazairevirtuel[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerystnazairevirtuel", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerystnazairevirtuel", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerystnazairevirtuel = document.querySelector("#gallerystnazairevirtuel .gallery__viewport__controls__nav-button--left");
previousImageButtongallerystnazairevirtuel.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerystnazairevirtuel = document.querySelector("#gallerystnazairevirtuel .gallery__viewport__controls__nav-button--right");
nextImageButtongallerystnazairevirtuel.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerystnazairevirtuel = document.querySelector("#gallerystnazairevirtuel .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerystnazairevirtuel.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerystnazairevirtuel", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerystnazairevirtuel", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerystnazairevirtuel", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerystnazairevirtuel = 0;
let touchendXgallerystnazairevirtuel = 0;
const galleryViewportgallerystnazairevirtuel = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerystnazairevirtuel !== undefined) {
galleryViewportgallerystnazairevirtuel.addEventListener('touchstart', function(event) {
touchstartXgallerystnazairevirtuel = event.changedTouches[0].screenX
});
galleryViewportgallerystnazairevirtuel.addEventListener('touchend', function(event) {
touchendXgallerystnazairevirtuel = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerystnazairevirtuel, touchendXgallerystnazairevirtuel);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerystnazairevirtuel.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Val-Jalbert Virtuel2018-01-01T00:00:00+00:002018-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/val-jalbert-virtuel/<div id="iframevaljalbertvirtuel" class="shortcodes-iframe">
<a class="shortcodes-iframe__skip-link sr-only" href="#iFrameSkipiframevaljalbertvirtuel">Ne pas interagir avec l'expérience artistique web et aller à la suite du contenu.</a>
<div class="shortcodes-iframe__content">
<iframe
class="shortcodes-iframe__iframe"
width="100%"
height="100%"
src="https://val-jalbert-virtuel.dramaturgiesonore.com/"
frameborder="0"
webkitallowfullscreen=""
mozallowfullscreen=""
allowfullscreen=""
></iframe>
</div>
<span id="iFrameSkipiframevaljalbertvirtuel" class="shortcodes-iframe__skip-anchor sr-only">Suite du contenu</span>
</div>
<script type="text/javascript">
// Check if we are on a mobile device
if (typeof globalThis.deviceIsMobile === "undefined") {
globalThis.deviceIsMobile = () => /Mobile|Android|iPhone|iPad/i.test(navigator.userAgent);
}
// Resize iFrame on window resizing
if (typeof globalThis.iFrameResize === "undefined") {
globalThis.iFrameResize = (container) => container.style.height = (container.getBoundingClientRect()["width"] * 0.5625) + "px";
}
const iFrameContaineriframevaljalbertvirtuel= document.getElementById("iframevaljalbertvirtuel").querySelector(".shortcodes-iframe__content");
// Hide iFrame if on mobile
if (iFrameContaineriframevaljalbertvirtuel!== undefined) {
if( deviceIsMobile() &&true) {
iFrameContaineriframevaljalbertvirtuel.style.display = "none";
} else {
iFrameResize(iFrameContaineriframevaljalbertvirtuel);
globalThis.addEventListener("resize", function(event) {
iFrameResize(iFrameContaineriframevaljalbertvirtuel);
});
}
}
</script>
<div id="galleryvaljalbertvirtuel" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryvaljalbertvirtuelimage0" class="gallery__viewport__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_1.jpg" alt="Capture d'écran: image 1"/>
<img id="galleryvaljalbertvirtuelimage1" class="gallery__viewport__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_10.jpg" alt="Capture d'écran: image 2"/>
<img id="galleryvaljalbertvirtuelimage2" class="gallery__viewport__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_2.jpg" alt="Capture d'écran: image 3"/>
<img id="galleryvaljalbertvirtuelimage3" class="gallery__viewport__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_3.jpg" alt="Capture d'écran: image 4"/>
<img id="galleryvaljalbertvirtuelimage4" class="gallery__viewport__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_4.jpg" alt="Capture d'écran: image 5"/>
<img id="galleryvaljalbertvirtuelimage5" class="gallery__viewport__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_5.jpg" alt="Capture d'écran: image 6"/>
<img id="galleryvaljalbertvirtuelimage6" class="gallery__viewport__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_6.jpg" alt="Capture d'écran: image 7"/>
<img id="galleryvaljalbertvirtuelimage7" class="gallery__viewport__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_7.jpg" alt="Capture d'écran: image 8"/>
<img id="galleryvaljalbertvirtuelimage8" class="gallery__viewport__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_8.jpg" alt="Capture d'écran: image 9"/>
<img id="galleryvaljalbertvirtuelimage9" class="gallery__viewport__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_9.jpg" alt="Capture d'écran: image 10"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage0"
aria-label="Voir l'image "Capture d'écran: image 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_1.jpg" alt="Capture d'écran: image 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage1"
aria-label="Voir l'image "Capture d'écran: image 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_10.jpg" alt="Capture d'écran: image 2"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage2"
aria-label="Voir l'image "Capture d'écran: image 3""
type="button"
>
<img class="gallery__selector__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_2.jpg" alt="Capture d'écran: image 3"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage3"
aria-label="Voir l'image "Capture d'écran: image 4""
type="button"
>
<img class="gallery__selector__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_3.jpg" alt="Capture d'écran: image 4"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage4"
aria-label="Voir l'image "Capture d'écran: image 5""
type="button"
>
<img class="gallery__selector__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_4.jpg" alt="Capture d'écran: image 5"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage5"
aria-label="Voir l'image "Capture d'écran: image 6""
type="button"
>
<img class="gallery__selector__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_5.jpg" alt="Capture d'écran: image 6"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage6"
aria-label="Voir l'image "Capture d'écran: image 7""
type="button"
>
<img class="gallery__selector__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_6.jpg" alt="Capture d'écran: image 7"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage7"
aria-label="Voir l'image "Capture d'écran: image 8""
type="button"
>
<img class="gallery__selector__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_7.jpg" alt="Capture d'écran: image 8"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage8"
aria-label="Voir l'image "Capture d'écran: image 9""
type="button"
>
<img class="gallery__selector__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_8.jpg" alt="Capture d'écran: image 9"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage9"
aria-label="Voir l'image "Capture d'écran: image 10""
type="button"
>
<img class="gallery__selector__image" src="/arts/val-jalbert-virtuel/gallery/valjalbertvirtuel_9.jpg" alt="Capture d'écran: image 10"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryvaljalbertvirtuel", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryvaljalbertvirtuel", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryvaljalbertvirtuel", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryvaljalbertvirtuel", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryvaljalbertvirtuel = document.querySelectorAll("#galleryvaljalbertvirtuel .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryvaljalbertvirtuel.length; i++) {
// Click
galleryButtonsgalleryvaljalbertvirtuel[i].addEventListener("click", function(event) {
displayImageWithButton("galleryvaljalbertvirtuel", this);
});
// Focus In
galleryButtonsgalleryvaljalbertvirtuel[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryvaljalbertvirtuel", displayedImages[i]);
}
}
displayImageWithButton("galleryvaljalbertvirtuel", this);
}
});
// Focus Out
galleryButtonsgalleryvaljalbertvirtuel[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryvaljalbertvirtuel", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryvaljalbertvirtuel", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryvaljalbertvirtuel = document.querySelector("#galleryvaljalbertvirtuel .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryvaljalbertvirtuel.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryvaljalbertvirtuel = document.querySelector("#galleryvaljalbertvirtuel .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryvaljalbertvirtuel.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryvaljalbertvirtuel = document.querySelector("#galleryvaljalbertvirtuel .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryvaljalbertvirtuel.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryvaljalbertvirtuel", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryvaljalbertvirtuel", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryvaljalbertvirtuel", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryvaljalbertvirtuel = 0;
let touchendXgalleryvaljalbertvirtuel = 0;
const galleryViewportgalleryvaljalbertvirtuel = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryvaljalbertvirtuel !== undefined) {
galleryViewportgalleryvaljalbertvirtuel.addEventListener('touchstart', function(event) {
touchstartXgalleryvaljalbertvirtuel = event.changedTouches[0].screenX
});
galleryViewportgalleryvaljalbertvirtuel.addEventListener('touchend', function(event) {
touchendXgalleryvaljalbertvirtuel = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryvaljalbertvirtuel, touchendXgalleryvaljalbertvirtuel);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryvaljalbertvirtuel.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Cartographies de l'attente2017-01-01T00:00:00+00:002017-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/cartographies-de-lattente/<div style="padding:56.25% 0 0 0;position:relative;">
<iframe
src="https://player.vimeo.com/video/162781268?h=4250ca05b2&title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script><div id="galleryvaljalbertvirtuel" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryvaljalbertvirtuelimage0" class="gallery__viewport__image" src="/arts/cartographies-de-lattente/gallery/carto1.jpg" alt="Vue de la scène de haut. Hélène Juteau (actrice) est assise sur une chaise dans le fond de la scène. En avant scène, Anne-Marie Ouellet (actrice) est couché par terre et maintient une chaise en équilibre sur ses pieds."/>
<img id="galleryvaljalbertvirtuelimage1" class="gallery__viewport__image" src="/arts/cartographies-de-lattente/gallery/carto10.jpg" alt="Hélène Juteau (actrice) est assise sur une chaise. Elle porte plusieurs foulards colorés et des manteaux épais: celui du dessus est un manteau de fourrure. Derrière, sur le mur, on peut voir une projection vidéo de Claudia Torres (actrice) jouant depuis son appartement."/>
<img id="galleryvaljalbertvirtuelimage2" class="gallery__viewport__image" src="/arts/cartographies-de-lattente/gallery/carto2.jpg" alt="Andrée-Anne Giguère (actrice) chante dans son micro tout en regardant dans une caméra. Ce qu'on voit la caméra est montré dans une télévision. On voit aussi une structure de meuble empillé entre l'actrice et la télévision."/>
<img id="galleryvaljalbertvirtuelimage3" class="gallery__viewport__image" src="/arts/cartographies-de-lattente/gallery/carto3.jpg" alt="Andrée-Anne Giguère (actrice) pousse une structure de meubles assemblés avec du papier collant rose. Derrière, sur un panneau sur la scène, une projection vidéo de Claudia Torres (actrice) jouant depuis son appartement."/>
<img id="galleryvaljalbertvirtuelimage4" class="gallery__viewport__image" src="/arts/cartographies-de-lattente/gallery/carto4.jpg" alt="Andrée-Anne Giguère (actrice), Hélène Juteau (actrice) et Claudia Torres (actrice), projetée sur un panneau, se tiennent debout sur la scène. Andrée-Anne et Hélène se tiennent la tête."/>
<img id="galleryvaljalbertvirtuelimage5" class="gallery__viewport__image" src="/arts/cartographies-de-lattente/gallery/carto5.jpg" alt="Andrée-Anne Giguère (actrice), Hélène Juteau (actrice) et Claudia Torres (actrice), projetée sur le mur du fond. Claudia montre des images anciennes de femmes. Assis sur une chaise, Hélène porte plusieurs foulards colorés et des manteaux épais: celui du dessus est un manteau de fourrure. Andrée-Anne, se déplace dans l'espace."/>
<img id="galleryvaljalbertvirtuelimage6" class="gallery__viewport__image" src="/arts/cartographies-de-lattente/gallery/carto6.jpg" alt="Andrée-Anne Giguère (actrice), Hélène Juteau (actrice), Anne-Marie Ouellet (actrice) et Claudia Torres (actrice), projetée sur un panneau, discutent ensemble dans l'obscurité. Sur le mur derrière est projeté une vidéo surveillance capté lors d'une résidence de création."/>
<img id="galleryvaljalbertvirtuelimage7" class="gallery__viewport__image" src="/arts/cartographies-de-lattente/gallery/carto7.jpg" alt="Andrée-Anne Giguère (actrice) est assise dans le fond de la scène sur une télévision. Hélène Juteau (actrice) est assise sur une chaise en avant de la scène. Anne-Marie Ouellet (actrice) est assise sur une chaise dans le fond de la scène. Sur le mur, une projection vidéo de Claudia Torres (actrice) jouant depuis son appartement. Elles attendent."/>
<img id="galleryvaljalbertvirtuelimage8" class="gallery__viewport__image" src="/arts/cartographies-de-lattente/gallery/carto8.jpg" alt="Anne-Marie Ouellet (actrice) est couverte d'une cape et regarde. Hélène Juteau (actrice) parle en tirant des bas dans les airs tel des confettis. Andrée-Anne Giguère (actrice) parle fort dans un vieux téléphone rouge qu'elle tient à la main. Sur le mur, une projection vidéo de Claudia Torres (actrice) jouant depuis son appartement."/>
<img id="galleryvaljalbertvirtuelimage9" class="gallery__viewport__image" src="/arts/cartographies-de-lattente/gallery/carto9.jpg" alt="Andrée-Anne Giguère (actrice) se tient debout à côté d'une structure de meubles assemblés avec du papier collant rose. Elle chante avec une petite boîte à musique. À sa gauche on peut voir une vielle télévision et des revues de mode jetées par terre."/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage0"
aria-label="Voir l'image "Vue de la scène de haut. Hélène Juteau (actrice) est assise sur une chaise dans le fond de la scène. En avant scène, Anne-Marie Ouellet (actrice) est couché par terre et maintient une chaise en équilibre sur ses pieds.""
type="button"
>
<img class="gallery__selector__image" src="/arts/cartographies-de-lattente/gallery/carto1.jpg" alt="Vue de la scène de haut. Hélène Juteau (actrice) est assise sur une chaise dans le fond de la scène. En avant scène, Anne-Marie Ouellet (actrice) est couché par terre et maintient une chaise en équilibre sur ses pieds."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage1"
aria-label="Voir l'image "Hélène Juteau (actrice) est assise sur une chaise. Elle porte plusieurs foulards colorés et des manteaux épais: celui du dessus est un manteau de fourrure. Derrière, sur le mur, on peut voir une projection vidéo de Claudia Torres (actrice) jouant depuis son appartement.""
type="button"
>
<img class="gallery__selector__image" src="/arts/cartographies-de-lattente/gallery/carto10.jpg" alt="Hélène Juteau (actrice) est assise sur une chaise. Elle porte plusieurs foulards colorés et des manteaux épais: celui du dessus est un manteau de fourrure. Derrière, sur le mur, on peut voir une projection vidéo de Claudia Torres (actrice) jouant depuis son appartement."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage2"
aria-label="Voir l'image "Andrée-Anne Giguère (actrice) chante dans son micro tout en regardant dans une caméra. Ce qu'on voit la caméra est montré dans une télévision. On voit aussi une structure de meuble empillé entre l'actrice et la télévision.""
type="button"
>
<img class="gallery__selector__image" src="/arts/cartographies-de-lattente/gallery/carto2.jpg" alt="Andrée-Anne Giguère (actrice) chante dans son micro tout en regardant dans une caméra. Ce qu'on voit la caméra est montré dans une télévision. On voit aussi une structure de meuble empillé entre l'actrice et la télévision."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage3"
aria-label="Voir l'image "Andrée-Anne Giguère (actrice) pousse une structure de meubles assemblés avec du papier collant rose. Derrière, sur un panneau sur la scène, une projection vidéo de Claudia Torres (actrice) jouant depuis son appartement.""
type="button"
>
<img class="gallery__selector__image" src="/arts/cartographies-de-lattente/gallery/carto3.jpg" alt="Andrée-Anne Giguère (actrice) pousse une structure de meubles assemblés avec du papier collant rose. Derrière, sur un panneau sur la scène, une projection vidéo de Claudia Torres (actrice) jouant depuis son appartement."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage4"
aria-label="Voir l'image "Andrée-Anne Giguère (actrice), Hélène Juteau (actrice) et Claudia Torres (actrice), projetée sur un panneau, se tiennent debout sur la scène. Andrée-Anne et Hélène se tiennent la tête.""
type="button"
>
<img class="gallery__selector__image" src="/arts/cartographies-de-lattente/gallery/carto4.jpg" alt="Andrée-Anne Giguère (actrice), Hélène Juteau (actrice) et Claudia Torres (actrice), projetée sur un panneau, se tiennent debout sur la scène. Andrée-Anne et Hélène se tiennent la tête."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage5"
aria-label="Voir l'image "Andrée-Anne Giguère (actrice), Hélène Juteau (actrice) et Claudia Torres (actrice), projetée sur le mur du fond. Claudia montre des images anciennes de femmes. Assis sur une chaise, Hélène porte plusieurs foulards colorés et des manteaux épais: celui du dessus est un manteau de fourrure. Andrée-Anne, se déplace dans l'espace.""
type="button"
>
<img class="gallery__selector__image" src="/arts/cartographies-de-lattente/gallery/carto5.jpg" alt="Andrée-Anne Giguère (actrice), Hélène Juteau (actrice) et Claudia Torres (actrice), projetée sur le mur du fond. Claudia montre des images anciennes de femmes. Assis sur une chaise, Hélène porte plusieurs foulards colorés et des manteaux épais: celui du dessus est un manteau de fourrure. Andrée-Anne, se déplace dans l'espace."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage6"
aria-label="Voir l'image "Andrée-Anne Giguère (actrice), Hélène Juteau (actrice), Anne-Marie Ouellet (actrice) et Claudia Torres (actrice), projetée sur un panneau, discutent ensemble dans l'obscurité. Sur le mur derrière est projeté une vidéo surveillance capté lors d'une résidence de création.""
type="button"
>
<img class="gallery__selector__image" src="/arts/cartographies-de-lattente/gallery/carto6.jpg" alt="Andrée-Anne Giguère (actrice), Hélène Juteau (actrice), Anne-Marie Ouellet (actrice) et Claudia Torres (actrice), projetée sur un panneau, discutent ensemble dans l'obscurité. Sur le mur derrière est projeté une vidéo surveillance capté lors d'une résidence de création."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage7"
aria-label="Voir l'image "Andrée-Anne Giguère (actrice) est assise dans le fond de la scène sur une télévision. Hélène Juteau (actrice) est assise sur une chaise en avant de la scène. Anne-Marie Ouellet (actrice) est assise sur une chaise dans le fond de la scène. Sur le mur, une projection vidéo de Claudia Torres (actrice) jouant depuis son appartement. Elles attendent.""
type="button"
>
<img class="gallery__selector__image" src="/arts/cartographies-de-lattente/gallery/carto7.jpg" alt="Andrée-Anne Giguère (actrice) est assise dans le fond de la scène sur une télévision. Hélène Juteau (actrice) est assise sur une chaise en avant de la scène. Anne-Marie Ouellet (actrice) est assise sur une chaise dans le fond de la scène. Sur le mur, une projection vidéo de Claudia Torres (actrice) jouant depuis son appartement. Elles attendent."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage8"
aria-label="Voir l'image "Anne-Marie Ouellet (actrice) est couverte d'une cape et regarde. Hélène Juteau (actrice) parle en tirant des bas dans les airs tel des confettis. Andrée-Anne Giguère (actrice) parle fort dans un vieux téléphone rouge qu'elle tient à la main. Sur le mur, une projection vidéo de Claudia Torres (actrice) jouant depuis son appartement.""
type="button"
>
<img class="gallery__selector__image" src="/arts/cartographies-de-lattente/gallery/carto8.jpg" alt="Anne-Marie Ouellet (actrice) est couverte d'une cape et regarde. Hélène Juteau (actrice) parle en tirant des bas dans les airs tel des confettis. Andrée-Anne Giguère (actrice) parle fort dans un vieux téléphone rouge qu'elle tient à la main. Sur le mur, une projection vidéo de Claudia Torres (actrice) jouant depuis son appartement."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryvaljalbertvirtuelimage9"
aria-label="Voir l'image "Andrée-Anne Giguère (actrice) se tient debout à côté d'une structure de meubles assemblés avec du papier collant rose. Elle chante avec une petite boîte à musique. À sa gauche on peut voir une vielle télévision et des revues de mode jetées par terre.""
type="button"
>
<img class="gallery__selector__image" src="/arts/cartographies-de-lattente/gallery/carto9.jpg" alt="Andrée-Anne Giguère (actrice) se tient debout à côté d'une structure de meubles assemblés avec du papier collant rose. Elle chante avec une petite boîte à musique. À sa gauche on peut voir une vielle télévision et des revues de mode jetées par terre."/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryvaljalbertvirtuel", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryvaljalbertvirtuel", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryvaljalbertvirtuel", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryvaljalbertvirtuel", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryvaljalbertvirtuel = document.querySelectorAll("#galleryvaljalbertvirtuel .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryvaljalbertvirtuel.length; i++) {
// Click
galleryButtonsgalleryvaljalbertvirtuel[i].addEventListener("click", function(event) {
displayImageWithButton("galleryvaljalbertvirtuel", this);
});
// Focus In
galleryButtonsgalleryvaljalbertvirtuel[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryvaljalbertvirtuel", displayedImages[i]);
}
}
displayImageWithButton("galleryvaljalbertvirtuel", this);
}
});
// Focus Out
galleryButtonsgalleryvaljalbertvirtuel[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryvaljalbertvirtuel", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryvaljalbertvirtuel", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryvaljalbertvirtuel = document.querySelector("#galleryvaljalbertvirtuel .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryvaljalbertvirtuel.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryvaljalbertvirtuel = document.querySelector("#galleryvaljalbertvirtuel .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryvaljalbertvirtuel.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryvaljalbertvirtuel = document.querySelector("#galleryvaljalbertvirtuel .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryvaljalbertvirtuel.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryvaljalbertvirtuel", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryvaljalbertvirtuel", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryvaljalbertvirtuel", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryvaljalbertvirtuel = 0;
let touchendXgalleryvaljalbertvirtuel = 0;
const galleryViewportgalleryvaljalbertvirtuel = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryvaljalbertvirtuel !== undefined) {
galleryViewportgalleryvaljalbertvirtuel.addEventListener('touchstart', function(event) {
touchstartXgalleryvaljalbertvirtuel = event.changedTouches[0].screenX
});
galleryViewportgalleryvaljalbertvirtuel.addEventListener('touchend', function(event) {
touchendXgalleryvaljalbertvirtuel = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryvaljalbertvirtuel, touchendXgalleryvaljalbertvirtuel);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryvaljalbertvirtuel.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Liaisons Sonores2016-01-01T00:00:00+00:002016-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/liaisons-sonores/<div id="galleryliaisonssonores" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryliaisonssonoresimage0" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/cadou_01.jpg" alt="Photo d'archive du spectacle à St-Cadou, France: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle."/>
<img id="galleryliaisonssonoresimage1" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/cadou_02.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage2" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/cadou_03.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage3" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/cadou_04.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage4" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/cadou_05.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage5" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/cadou_06.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage6" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/cadou_07.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage7" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/cadou_08.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage8" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/cadou_09.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage9" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/cadou_10.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage10" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/cadou_11.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage11" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/douarnenez_01.jpg" alt="Photo d'archive du spectacle à Douarnenez, France: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle."/>
<img id="galleryliaisonssonoresimage12" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/douarnenez_02.jpg" alt="Photo d'archive du spectacle à Douarnenez, France"/>
<img id="galleryliaisonssonoresimage13" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/douarnenez_03.jpg" alt="Photo d'archive du spectacle à Douarnenez, France"/>
<img id="galleryliaisonssonoresimage14" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/douarnenez_04.jpg" alt="Photo d'archive du spectacle à Douarnenez, France"/>
<img id="galleryliaisonssonoresimage15" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/douarnenez_05.jpg" alt="Photo d'archive du spectacle à Douarnenez, France"/>
<img id="galleryliaisonssonoresimage16" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/douarnenez_06.jpg" alt="Photo d'archive du spectacle à Douarnenez, France"/>
<img id="galleryliaisonssonoresimage17" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/douarnenez_07.jpg" alt="Photo d'archive du spectacle à Douarnenez, France"/>
<img id="galleryliaisonssonoresimage18" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/douarnenez_08.jpg" alt="Photo d'archive du spectacle à Douarnenez, France"/>
<img id="galleryliaisonssonoresimage19" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/fmc_1.jpg" alt="Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle."/>
<img id="galleryliaisonssonoresimage20" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/fmc_2.jpg" alt="Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec"/>
<img id="galleryliaisonssonoresimage21" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/fmc_3.jpg" alt="Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec"/>
<img id="galleryliaisonssonoresimage22" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/fmc_4.jpg" alt="Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec"/>
<img id="galleryliaisonssonoresimage23" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/fmc_5.jpg" alt="Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec"/>
<img id="galleryliaisonssonoresimage24" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/fmc_6.jpg" alt="Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec"/>
<img id="galleryliaisonssonoresimage25" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/fmc_7.jpg" alt="Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec"/>
<img id="galleryliaisonssonoresimage26" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/horizon_1.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
<img id="galleryliaisonssonoresimage27" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/horizon_2.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
<img id="galleryliaisonssonoresimage28" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/horizon_3.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
<img id="galleryliaisonssonoresimage29" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/horizon_4.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
<img id="galleryliaisonssonoresimage30" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/horizon_5.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
<img id="galleryliaisonssonoresimage31" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/horizon_6.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
<img id="galleryliaisonssonoresimage32" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/horizon_7.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle."/>
<img id="galleryliaisonssonoresimage33" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/horizon_8.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
<img id="galleryliaisonssonoresimage34" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/horizon_9.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
<img id="galleryliaisonssonoresimage35" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/lac_1.jpg" alt="Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France"/>
<img id="galleryliaisonssonoresimage36" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/lac_2.jpg" alt="Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France"/>
<img id="galleryliaisonssonoresimage37" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/lac_3.jpg" alt="Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France"/>
<img id="galleryliaisonssonoresimage38" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/lac_4.jpg" alt="Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France"/>
<img id="galleryliaisonssonoresimage39" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/lac_5.jpg" alt="Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France"/>
<img id="galleryliaisonssonoresimage40" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/lantiss_1.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle."/>
<img id="galleryliaisonssonoresimage41" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/lantiss_2.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec"/>
<img id="galleryliaisonssonoresimage42" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/lantiss_3.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec"/>
<img id="galleryliaisonssonoresimage43" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/lantiss_4.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec"/>
<img id="galleryliaisonssonoresimage44" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/lantiss_5.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec"/>
<img id="galleryliaisonssonoresimage45" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/lantiss_6.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec"/>
<img id="galleryliaisonssonoresimage46" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/lantiss_7.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec"/>
<img id="galleryliaisonssonoresimage47" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/lantiss_8.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec"/>
<img id="galleryliaisonssonoresimage48" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/phonurgia_1.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle."/>
<img id="galleryliaisonssonoresimage49" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/phonurgia_2.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France"/>
<img id="galleryliaisonssonoresimage50" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/phonurgia_3.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France"/>
<img id="galleryliaisonssonoresimage51" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/phonurgia_4.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France"/>
<img id="galleryliaisonssonoresimage52" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/phonurgia_5.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France"/>
<img id="galleryliaisonssonoresimage53" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/phonurgia_6.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France"/>
<img id="galleryliaisonssonoresimage54" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/phonurgia_7.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France"/>
<img id="galleryliaisonssonoresimage55" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/phonurgia_8.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France"/>
<img id="galleryliaisonssonoresimage56" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/pre_01.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage57" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/pre_02.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage58" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/pre_03.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage59" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/pre_04.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage60" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/pre_05.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage61" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/pre_06.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage62" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/pre_07.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage63" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/pre_08.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage64" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/pre_09.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage65" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/pre_10.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage66" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/pre_11.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
<img id="galleryliaisonssonoresimage67" class="gallery__viewport__image" src="/arts/liaisons-sonores/gallery/pre_12.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage0"
aria-label="Voir l'image "Photo d'archive du spectacle à St-Cadou, France: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle.""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/cadou_01.jpg" alt="Photo d'archive du spectacle à St-Cadou, France: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage1"
aria-label="Voir l'image "Photo d'archive du spectacle à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/cadou_02.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage2"
aria-label="Voir l'image "Photo d'archive du spectacle à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/cadou_03.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage3"
aria-label="Voir l'image "Photo d'archive du spectacle à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/cadou_04.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage4"
aria-label="Voir l'image "Photo d'archive du spectacle à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/cadou_05.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage5"
aria-label="Voir l'image "Photo d'archive du spectacle à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/cadou_06.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage6"
aria-label="Voir l'image "Photo d'archive du spectacle à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/cadou_07.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage7"
aria-label="Voir l'image "Photo d'archive du spectacle à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/cadou_08.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage8"
aria-label="Voir l'image "Photo d'archive du spectacle à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/cadou_09.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage9"
aria-label="Voir l'image "Photo d'archive du spectacle à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/cadou_10.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage10"
aria-label="Voir l'image "Photo d'archive du spectacle à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/cadou_11.jpg" alt="Photo d'archive du spectacle à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage11"
aria-label="Voir l'image "Photo d'archive du spectacle à Douarnenez, France: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle.""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/douarnenez_01.jpg" alt="Photo d'archive du spectacle à Douarnenez, France: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage12"
aria-label="Voir l'image "Photo d'archive du spectacle à Douarnenez, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/douarnenez_02.jpg" alt="Photo d'archive du spectacle à Douarnenez, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage13"
aria-label="Voir l'image "Photo d'archive du spectacle à Douarnenez, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/douarnenez_03.jpg" alt="Photo d'archive du spectacle à Douarnenez, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage14"
aria-label="Voir l'image "Photo d'archive du spectacle à Douarnenez, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/douarnenez_04.jpg" alt="Photo d'archive du spectacle à Douarnenez, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage15"
aria-label="Voir l'image "Photo d'archive du spectacle à Douarnenez, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/douarnenez_05.jpg" alt="Photo d'archive du spectacle à Douarnenez, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage16"
aria-label="Voir l'image "Photo d'archive du spectacle à Douarnenez, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/douarnenez_06.jpg" alt="Photo d'archive du spectacle à Douarnenez, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage17"
aria-label="Voir l'image "Photo d'archive du spectacle à Douarnenez, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/douarnenez_07.jpg" alt="Photo d'archive du spectacle à Douarnenez, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage18"
aria-label="Voir l'image "Photo d'archive du spectacle à Douarnenez, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/douarnenez_08.jpg" alt="Photo d'archive du spectacle à Douarnenez, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage19"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle.""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/fmc_1.jpg" alt="Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage20"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/fmc_2.jpg" alt="Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage21"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/fmc_3.jpg" alt="Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage22"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/fmc_4.jpg" alt="Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage23"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/fmc_5.jpg" alt="Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage24"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/fmc_6.jpg" alt="Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage25"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/fmc_7.jpg" alt="Photo d'archive du spectacle au Festival des Musiques de Création, Saguenay, Québec"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage26"
aria-label="Voir l'image "Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/horizon_1.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage27"
aria-label="Voir l'image "Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/horizon_2.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage28"
aria-label="Voir l'image "Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/horizon_3.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage29"
aria-label="Voir l'image "Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/horizon_4.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage30"
aria-label="Voir l'image "Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/horizon_5.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage31"
aria-label="Voir l'image "Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/horizon_6.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage32"
aria-label="Voir l'image "Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle.""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/horizon_7.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage33"
aria-label="Voir l'image "Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/horizon_8.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage34"
aria-label="Voir l'image "Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/horizon_9.jpg" alt="Photo d'archive du spectacle au Théâtre l’Horizon, La Rochelle, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage35"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/lac_1.jpg" alt="Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage36"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/lac_2.jpg" alt="Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage37"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/lac_3.jpg" alt="Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage38"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/lac_4.jpg" alt="Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage39"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/lac_5.jpg" alt="Photo d'archive du spectacle au Festival Le Lac, lac du Drennec, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage40"
aria-label="Voir l'image "Photo d'archive du spectacle au Lantiss, Québec, Québec: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle.""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/lantiss_1.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage41"
aria-label="Voir l'image "Photo d'archive du spectacle au Lantiss, Québec, Québec""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/lantiss_2.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage42"
aria-label="Voir l'image "Photo d'archive du spectacle au Lantiss, Québec, Québec""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/lantiss_3.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage43"
aria-label="Voir l'image "Photo d'archive du spectacle au Lantiss, Québec, Québec""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/lantiss_4.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage44"
aria-label="Voir l'image "Photo d'archive du spectacle au Lantiss, Québec, Québec""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/lantiss_5.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage45"
aria-label="Voir l'image "Photo d'archive du spectacle au Lantiss, Québec, Québec""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/lantiss_6.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage46"
aria-label="Voir l'image "Photo d'archive du spectacle au Lantiss, Québec, Québec""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/lantiss_7.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage47"
aria-label="Voir l'image "Photo d'archive du spectacle au Lantiss, Québec, Québec""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/lantiss_8.jpg" alt="Photo d'archive du spectacle au Lantiss, Québec, Québec"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage48"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle.""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/phonurgia_1.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France: Les performeurs sont en cercle, assis au sol, et regardent Jean-Paul Quéinnec (performeur/artiste) introduire le spectacle."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage49"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/phonurgia_2.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage50"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/phonurgia_3.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage51"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/phonurgia_4.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage52"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/phonurgia_5.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage53"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/phonurgia_6.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage54"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/phonurgia_7.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage55"
aria-label="Voir l'image "Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/phonurgia_8.jpg" alt="Photo d'archive du spectacle au Festival Phonurgia Nova, Arles et radio 3DFM, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage56"
aria-label="Voir l'image "Photo d'archive de la préparation à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/pre_01.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage57"
aria-label="Voir l'image "Photo d'archive de la préparation à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/pre_02.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage58"
aria-label="Voir l'image "Photo d'archive de la préparation à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/pre_03.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage59"
aria-label="Voir l'image "Photo d'archive de la préparation à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/pre_04.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage60"
aria-label="Voir l'image "Photo d'archive de la préparation à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/pre_05.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage61"
aria-label="Voir l'image "Photo d'archive de la préparation à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/pre_06.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage62"
aria-label="Voir l'image "Photo d'archive de la préparation à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/pre_07.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage63"
aria-label="Voir l'image "Photo d'archive de la préparation à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/pre_08.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage64"
aria-label="Voir l'image "Photo d'archive de la préparation à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/pre_09.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage65"
aria-label="Voir l'image "Photo d'archive de la préparation à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/pre_10.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage66"
aria-label="Voir l'image "Photo d'archive de la préparation à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/pre_11.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryliaisonssonoresimage67"
aria-label="Voir l'image "Photo d'archive de la préparation à St-Cadou, France""
type="button"
>
<img class="gallery__selector__image" src="/arts/liaisons-sonores/gallery/pre_12.jpg" alt="Photo d'archive de la préparation à St-Cadou, France"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryliaisonssonores", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryliaisonssonores", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryliaisonssonores", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryliaisonssonores", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryliaisonssonores = document.querySelectorAll("#galleryliaisonssonores .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryliaisonssonores.length; i++) {
// Click
galleryButtonsgalleryliaisonssonores[i].addEventListener("click", function(event) {
displayImageWithButton("galleryliaisonssonores", this);
});
// Focus In
galleryButtonsgalleryliaisonssonores[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryliaisonssonores", displayedImages[i]);
}
}
displayImageWithButton("galleryliaisonssonores", this);
}
});
// Focus Out
galleryButtonsgalleryliaisonssonores[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryliaisonssonores", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryliaisonssonores", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryliaisonssonores = document.querySelector("#galleryliaisonssonores .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryliaisonssonores.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryliaisonssonores = document.querySelector("#galleryliaisonssonores .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryliaisonssonores.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryliaisonssonores = document.querySelector("#galleryliaisonssonores .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryliaisonssonores.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryliaisonssonores", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryliaisonssonores", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryliaisonssonores", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryliaisonssonores = 0;
let touchendXgalleryliaisonssonores = 0;
const galleryViewportgalleryliaisonssonores = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryliaisonssonores !== undefined) {
galleryViewportgalleryliaisonssonores.addEventListener('touchstart', function(event) {
touchstartXgalleryliaisonssonores = event.changedTouches[0].screenX
});
galleryViewportgalleryliaisonssonores.addEventListener('touchend', function(event) {
touchendXgalleryliaisonssonores = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryliaisonssonores, touchendXgalleryliaisonssonores);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryliaisonssonores.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Multijoueurs Candide2015-01-01T00:00:00+00:002015-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/multijoueurs-candide/<div style="padding:56.25% 0 0 0;position:relative;">
<iframe
src="https://player.vimeo.com/video/163048493?h=4250ca05b2&title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script><div style="padding:56.25% 0 0 0;position:relative;">
<iframe
src="https://player.vimeo.com/video/163049981?h=4250ca05b2&title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script><div id="gallerymultijoueurscandide" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerymultijoueurscandideimage0" class="gallery__viewport__image" src="/arts/multijoueurs-candide/gallery/multijoueurCandide1.jpg" alt="Photo de l'événement: Sur le mur de grosse brique grise dans le fond de l'espace, on voit la projection du jeu. En premier plan, deux enfants jouent au jeu vidéo. Ils sont vus de dos et regardent la projection du jeu."/>
<img id="gallerymultijoueurscandideimage1" class="gallery__viewport__image" src="/arts/multijoueurs-candide/gallery/multijoueurCandide2.jpg" alt="Photo de l'événement: Sur le mur de grosse brique grise dans le fond de l'espace, on voit la projection du jeu. Martin Lavertu (artiste) et un enfant jouent au jeu vidéo. Ils sont vus de dos et regardent la projection du jeu. D'autres spectateurs sont autour des joueurs."/>
<img id="gallerymultijoueurscandideimage2" class="gallery__viewport__image" src="/arts/multijoueurs-candide/gallery/multijoueurCandide3.jpg" alt="Photo de l'événement: Martin Lavertu (artiste) et un enfant jouent au jeu vidéo. Ils sont vus de face et regardent la projection du jeu."/>
<img id="gallerymultijoueurscandideimage3" class="gallery__viewport__image" src="/arts/multijoueurs-candide/gallery/multijoueurCandide4.jpg" alt="Photo de l'événement: Sur le mur de grosse brique grise dans le fond de l'espace, on voit la projection du jeu. En premier plan, deux enfants jouent au jeu vidéo. Ils sont vus de dos et regardent la projection du jeu."/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerymultijoueurscandideimage0"
aria-label="Voir l'image "Photo de l'événement: Sur le mur de grosse brique grise dans le fond de l'espace, on voit la projection du jeu. En premier plan, deux enfants jouent au jeu vidéo. Ils sont vus de dos et regardent la projection du jeu.""
type="button"
>
<img class="gallery__selector__image" src="/arts/multijoueurs-candide/gallery/multijoueurCandide1.jpg" alt="Photo de l'événement: Sur le mur de grosse brique grise dans le fond de l'espace, on voit la projection du jeu. En premier plan, deux enfants jouent au jeu vidéo. Ils sont vus de dos et regardent la projection du jeu."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerymultijoueurscandideimage1"
aria-label="Voir l'image "Photo de l'événement: Sur le mur de grosse brique grise dans le fond de l'espace, on voit la projection du jeu. Martin Lavertu (artiste) et un enfant jouent au jeu vidéo. Ils sont vus de dos et regardent la projection du jeu. D'autres spectateurs sont autour des joueurs.""
type="button"
>
<img class="gallery__selector__image" src="/arts/multijoueurs-candide/gallery/multijoueurCandide2.jpg" alt="Photo de l'événement: Sur le mur de grosse brique grise dans le fond de l'espace, on voit la projection du jeu. Martin Lavertu (artiste) et un enfant jouent au jeu vidéo. Ils sont vus de dos et regardent la projection du jeu. D'autres spectateurs sont autour des joueurs."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerymultijoueurscandideimage2"
aria-label="Voir l'image "Photo de l'événement: Martin Lavertu (artiste) et un enfant jouent au jeu vidéo. Ils sont vus de face et regardent la projection du jeu.""
type="button"
>
<img class="gallery__selector__image" src="/arts/multijoueurs-candide/gallery/multijoueurCandide3.jpg" alt="Photo de l'événement: Martin Lavertu (artiste) et un enfant jouent au jeu vidéo. Ils sont vus de face et regardent la projection du jeu."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerymultijoueurscandideimage3"
aria-label="Voir l'image "Photo de l'événement: Sur le mur de grosse brique grise dans le fond de l'espace, on voit la projection du jeu. En premier plan, deux enfants jouent au jeu vidéo. Ils sont vus de dos et regardent la projection du jeu.""
type="button"
>
<img class="gallery__selector__image" src="/arts/multijoueurs-candide/gallery/multijoueurCandide4.jpg" alt="Photo de l'événement: Sur le mur de grosse brique grise dans le fond de l'espace, on voit la projection du jeu. En premier plan, deux enfants jouent au jeu vidéo. Ils sont vus de dos et regardent la projection du jeu."/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerymultijoueurscandide", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerymultijoueurscandide", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerymultijoueurscandide", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerymultijoueurscandide", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerymultijoueurscandide = document.querySelectorAll("#gallerymultijoueurscandide .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerymultijoueurscandide.length; i++) {
// Click
galleryButtonsgallerymultijoueurscandide[i].addEventListener("click", function(event) {
displayImageWithButton("gallerymultijoueurscandide", this);
});
// Focus In
galleryButtonsgallerymultijoueurscandide[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerymultijoueurscandide", displayedImages[i]);
}
}
displayImageWithButton("gallerymultijoueurscandide", this);
}
});
// Focus Out
galleryButtonsgallerymultijoueurscandide[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerymultijoueurscandide", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerymultijoueurscandide", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerymultijoueurscandide = document.querySelector("#gallerymultijoueurscandide .gallery__viewport__controls__nav-button--left");
previousImageButtongallerymultijoueurscandide.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerymultijoueurscandide = document.querySelector("#gallerymultijoueurscandide .gallery__viewport__controls__nav-button--right");
nextImageButtongallerymultijoueurscandide.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerymultijoueurscandide = document.querySelector("#gallerymultijoueurscandide .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerymultijoueurscandide.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerymultijoueurscandide", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerymultijoueurscandide", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerymultijoueurscandide", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerymultijoueurscandide = 0;
let touchendXgallerymultijoueurscandide = 0;
const galleryViewportgallerymultijoueurscandide = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerymultijoueurscandide !== undefined) {
galleryViewportgallerymultijoueurscandide.addEventListener('touchstart', function(event) {
touchstartXgallerymultijoueurscandide = event.changedTouches[0].screenX
});
galleryViewportgallerymultijoueurscandide.addEventListener('touchend', function(event) {
touchendXgallerymultijoueurscandide = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerymultijoueurscandide, touchendXgallerymultijoueurscandide);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerymultijoueurscandide.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Pas de bulle dans ma poche de thé2015-01-01T00:00:00+00:002015-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/pas-de-bulle-dans-ma-poche-de-the/<p>-> <a href="https://pasdebulledansmapochedethecar.lapinchatware.ca/">VISIONNER</a> <-</p>
Super Labyrinthe Candide2015-01-01T00:00:00+00:002015-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/super-labyrinthe-candide/<p>Vous pouvez y jouer! -> <a href="http://superlab.candide.ninja/">JOUER</a></p>
<div id="gallerysuperlc" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerysuperlcimage0" class="gallery__viewport__image" src="/arts/super-labyrinthe-candide/gallery/superlc_01.jpg" alt="Capture d'écran: Écran d'acceuil du jeu."/>
<img id="gallerysuperlcimage1" class="gallery__viewport__image" src="/arts/super-labyrinthe-candide/gallery/superlc_02.jpg" alt="Capture d'écran: Écran d'instructions du jeu."/>
<img id="gallerysuperlcimage2" class="gallery__viewport__image" src="/arts/super-labyrinthe-candide/gallery/superlc_03.jpg" alt="Capture d'écran: Écran de crédits du jeu."/>
<img id="gallerysuperlcimage3" class="gallery__viewport__image" src="/arts/super-labyrinthe-candide/gallery/superlc_04.jpg" alt="Capture d'écran: Écran de sélection du niveau du jeu."/>
<img id="gallerysuperlcimage4" class="gallery__viewport__image" src="/arts/super-labyrinthe-candide/gallery/superlc_05.jpg" alt="Capture d'écran: Écran de départ du niveau "Pulperie"."/>
<img id="gallerysuperlcimage5" class="gallery__viewport__image" src="/arts/super-labyrinthe-candide/gallery/superlc_06.jpg" alt="Capture d'écran: Écran de départ du niveau "Monastère"."/>
<img id="gallerysuperlcimage6" class="gallery__viewport__image" src="/arts/super-labyrinthe-candide/gallery/superlc_07.jpg" alt="Capture d'écran: Écran de départ du niveau "Université"."/>
<img id="gallerysuperlcimage7" class="gallery__viewport__image" src="/arts/super-labyrinthe-candide/gallery/superlc_08.jpg" alt="Capture d'écran: Écran de jeu en action."/>
<img id="gallerysuperlcimage8" class="gallery__viewport__image" src="/arts/super-labyrinthe-candide/gallery/superlc_09.jpg" alt="Capture d'écran: Écran de fin de jeu."/>
<img id="gallerysuperlcimage9" class="gallery__viewport__image" src="/arts/super-labyrinthe-candide/gallery/superlc_10.jpg" alt="Capture d'écran: Écran des scores."/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysuperlcimage0"
aria-label="Voir l'image "Capture d'écran: Écran d'acceuil du jeu.""
type="button"
>
<img class="gallery__selector__image" src="/arts/super-labyrinthe-candide/gallery/superlc_01.jpg" alt="Capture d'écran: Écran d'acceuil du jeu."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysuperlcimage1"
aria-label="Voir l'image "Capture d'écran: Écran d'instructions du jeu.""
type="button"
>
<img class="gallery__selector__image" src="/arts/super-labyrinthe-candide/gallery/superlc_02.jpg" alt="Capture d'écran: Écran d'instructions du jeu."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysuperlcimage2"
aria-label="Voir l'image "Capture d'écran: Écran de crédits du jeu.""
type="button"
>
<img class="gallery__selector__image" src="/arts/super-labyrinthe-candide/gallery/superlc_03.jpg" alt="Capture d'écran: Écran de crédits du jeu."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysuperlcimage3"
aria-label="Voir l'image "Capture d'écran: Écran de sélection du niveau du jeu.""
type="button"
>
<img class="gallery__selector__image" src="/arts/super-labyrinthe-candide/gallery/superlc_04.jpg" alt="Capture d'écran: Écran de sélection du niveau du jeu."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysuperlcimage4"
aria-label="Voir l'image "Capture d'écran: Écran de départ du niveau "Pulperie".""
type="button"
>
<img class="gallery__selector__image" src="/arts/super-labyrinthe-candide/gallery/superlc_05.jpg" alt="Capture d'écran: Écran de départ du niveau "Pulperie"."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysuperlcimage5"
aria-label="Voir l'image "Capture d'écran: Écran de départ du niveau "Monastère".""
type="button"
>
<img class="gallery__selector__image" src="/arts/super-labyrinthe-candide/gallery/superlc_06.jpg" alt="Capture d'écran: Écran de départ du niveau "Monastère"."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysuperlcimage6"
aria-label="Voir l'image "Capture d'écran: Écran de départ du niveau "Université".""
type="button"
>
<img class="gallery__selector__image" src="/arts/super-labyrinthe-candide/gallery/superlc_07.jpg" alt="Capture d'écran: Écran de départ du niveau "Université"."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysuperlcimage7"
aria-label="Voir l'image "Capture d'écran: Écran de jeu en action.""
type="button"
>
<img class="gallery__selector__image" src="/arts/super-labyrinthe-candide/gallery/superlc_08.jpg" alt="Capture d'écran: Écran de jeu en action."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysuperlcimage8"
aria-label="Voir l'image "Capture d'écran: Écran de fin de jeu.""
type="button"
>
<img class="gallery__selector__image" src="/arts/super-labyrinthe-candide/gallery/superlc_09.jpg" alt="Capture d'écran: Écran de fin de jeu."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysuperlcimage9"
aria-label="Voir l'image "Capture d'écran: Écran des scores.""
type="button"
>
<img class="gallery__selector__image" src="/arts/super-labyrinthe-candide/gallery/superlc_10.jpg" alt="Capture d'écran: Écran des scores."/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerysuperlc", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerysuperlc", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerysuperlc", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerysuperlc", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerysuperlc = document.querySelectorAll("#gallerysuperlc .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerysuperlc.length; i++) {
// Click
galleryButtonsgallerysuperlc[i].addEventListener("click", function(event) {
displayImageWithButton("gallerysuperlc", this);
});
// Focus In
galleryButtonsgallerysuperlc[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerysuperlc", displayedImages[i]);
}
}
displayImageWithButton("gallerysuperlc", this);
}
});
// Focus Out
galleryButtonsgallerysuperlc[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerysuperlc", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerysuperlc", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerysuperlc = document.querySelector("#gallerysuperlc .gallery__viewport__controls__nav-button--left");
previousImageButtongallerysuperlc.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerysuperlc = document.querySelector("#gallerysuperlc .gallery__viewport__controls__nav-button--right");
nextImageButtongallerysuperlc.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerysuperlc = document.querySelector("#gallerysuperlc .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerysuperlc.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerysuperlc", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerysuperlc", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerysuperlc", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerysuperlc = 0;
let touchendXgallerysuperlc = 0;
const galleryViewportgallerysuperlc = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerysuperlc !== undefined) {
galleryViewportgallerysuperlc.addEventListener('touchstart', function(event) {
touchstartXgallerysuperlc = event.changedTouches[0].screenX
});
galleryViewportgallerysuperlc.addEventListener('touchend', function(event) {
touchendXgallerysuperlc = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerysuperlc, touchendXgallerysuperlc);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerysuperlc.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Revif pour ma soeur Ginette2014-01-01T00:00:00+00:002014-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/revif-pour-ma-soeur-ginette/<p>Cette création est le fruit des différentes recherches que nous menons depuis 2010 sur un jeu sonore qui déplace les lignes d’une scène théâtrale. Entre un théâtre dramatique et une scène plus événementielle, nous choisissons une écriture plurielle (souvent collective) et in-disciplinaire portée par des artistes de pratiques différentes (théâtre, marionnette, performance, arts numériques, sculpture, vidéo, musique).</p>
<p><em>Ginette marche 30 km entre deux frontières dans un désert brûlant pour atteindre, à 4798 km, son phare sur la côte nord à Natashquan. Pour y arriver, elle s’imagine des gens qui lui parlent, des mojados qui l’attendraient là-bas. Sur son chemin, elle reconnaît un arbre, un palo verde. Le reconnaître c’est comprendre qu’elle tourne en rond. Dès lors, les voix gagnent en autonomie. Ginette plus passive se laissera devenir autrement. Et c’est comme si l’issue n’était plus le but de la traversée…</em></p>
<div id="galleryrevif" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryrevifimage0" class="gallery__viewport__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_01.jpg" alt="Photo d'archive du spectacle: Projection abstraite mauve sur le mur. Des silouhettes sont vus sur la scène au loin. La photo est prise depuis les gradins."/>
<img id="galleryrevifimage1" class="gallery__viewport__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_02.jpg" alt="Photo d'archive du spectacle: Une grande toile de plastique semi transparente est tendu verticalement sur la scène et occupe presque l'entièreté du cadre de la photo. Sur la toile on peut voir des lignes, flèches et pointillés de peintures appliquées par une actrice derrière la toile. D'autres silouettes peuvent être aperçues derrière la toile."/>
<img id="galleryrevifimage2" class="gallery__viewport__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_03.jpg" alt="Photo d'archive du spectacle: Trois sculptures composées de cage à poule, tiges de bois, poubelles en métal, différent textiles et autres matériaux. Yanik Potvin (sculpteur) travail sur ces sculptures. Pierre Tremblay-Thériault (concepteur numérique et artiste) manipule un projecteur vidéo et place une image sur le mur à l'arrière des sculptures."/>
<img id="galleryrevifimage3" class="gallery__viewport__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_04.jpg" alt="Photo d'archive du spectacle: Les performeurs, Fabienne Augié (actrice), Chantale Boulianne (scénographe), Éric Chalifour (acteur), Andrée-Anne Giguère (actrice et conception vidéo), Elaine Juteau (actrice), Anne-Marie Ouellet (actrice), Yanik Potvin (sculpteur), Guillaume Thibert (concepteur sonore) et Pierre Tremblay-Thériault (concepteur numérique et artiste), se tiennent debout sur la scène et regarde le public."/>
<img id="galleryrevifimage4" class="gallery__viewport__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_05.jpg" alt="Photo d'archive du spectacle: En première plan, Guillaume Thibert (concepteur sonore) parle en direction du public. Derrière, une grande toile de plastique semi transparente est mollement tendu verticalement sur la scène. Derrière la toile, d'autres performeurs se déplacent. Yanik Potvin (sculpteur) travail sur des sculptures."/>
<img id="galleryrevifimage5" class="gallery__viewport__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_06.jpg" alt="Photo d'archive du spectacle: Éric Chalifour (acteur) manipule une foule d'objets divers sur le sol en face de la scène. Pierre Tremblay-Thériault (concepteur numérique et artiste) manipule un projecteur vidéo et place une image sur le sol, sur les objets divers sur le sol."/>
<img id="galleryrevifimage6" class="gallery__viewport__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_07.jpg" alt="Photo d'archive du spectacle: Une lumière rouge remplit la scène. Anne-Marie Ouellet (actrice) se tien près d'un poteau de métal et parle. Des cordes tendues sont attachées sur l'extrémité poteau. Au bout de chaque corde, un acteur tire et tien en équilibre le poteau. Les cordes et le poteau suggère un chapiteau."/>
<img id="galleryrevifimage7" class="gallery__viewport__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_08.jpg" alt="Photo d'archive du spectacle: Éric Chalifour (acteur) manipule un petit balais rouge et une canne en métal vide au travers d'une foule d'objets divers sur le sol en face de la scène."/>
<img id="galleryrevifimage8" class="gallery__viewport__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_09.jpg" alt="Photo d'archive du spectacle: Éric Chalifour (acteur) manipule un petit sac jaune et un soulier à talon haut mauve au travers d'une foule d'objets divers sur le sol en face de la scène."/>
<img id="galleryrevifimage9" class="gallery__viewport__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_10.jpg" alt="Photo d'archive du spectacle: Fabienne Augié (actrice) peinture des lignes et des 'x' sur deux gigantesques toiles de plastique semi transparente étendues au sol."/>
<img id="galleryrevifimage10" class="gallery__viewport__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_11.jpg" alt="Photo d'archive du spectacle: Fabienne Augié (actrice), Éric Chalifour (acteur), Elaine Juteau (actrice), Yanik Potvin (sculpteur) et Guillaume Thibert (concepteur sonore) soulèvent Anne-Marie Ouellet (actrice) dans les airs. Pierre Tremblay-Thériault (concepteur numérique et artiste) et Andrée-Anne Giguère (actrice et conception vidéo) sont à l'écart et regarde Anne-Marie."/>
<img id="galleryrevifimage11" class="gallery__viewport__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_12.jpg" alt="Photo d'archive du spectacle: Anne-Marie Ouellet (actrice) se tien debout sur le dos de Yanik Potvin (sculpteur). Elle est soutenue par Fabienne Augié (actrice) et Pierre Tremblay-Thériault (concepteur numérique et artiste)."/>
<img id="galleryrevifimage12" class="gallery__viewport__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_13.jpg" alt="Photo d'archive du spectacle: La scène est remplie de poussière. Chantale Boulianne (scénographe) roule une toile semi transparente. Le rouleau est remplit d'objets divers. Sur le côté de la scène, Pierre Tremblay-Thériault (concepteur numérique et artiste) et Éric Chalifour (acteur) se tiennent debout et attendent. Dans le fond, Yanik Potvin (sculpteur) manipule la matière de ses sculptures."/>
<img id="galleryrevifimage13" class="gallery__viewport__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_14.jpg" alt="Photo d'archive du spectacle: Caché derrière des sculptures composées de cage à poule, tiges de bois, poubelles en métal, différent textiles et autres matériaux, Elaine Juteau (actrice) regarde d'autres performeurs sur la scène."/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryrevifimage0"
aria-label="Voir l'image "Photo d'archive du spectacle: Projection abstraite mauve sur le mur. Des silouhettes sont vus sur la scène au loin. La photo est prise depuis les gradins.""
type="button"
>
<img class="gallery__selector__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_01.jpg" alt="Photo d'archive du spectacle: Projection abstraite mauve sur le mur. Des silouhettes sont vus sur la scène au loin. La photo est prise depuis les gradins."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryrevifimage1"
aria-label="Voir l'image "Photo d'archive du spectacle: Une grande toile de plastique semi transparente est tendu verticalement sur la scène et occupe presque l'entièreté du cadre de la photo. Sur la toile on peut voir des lignes, flèches et pointillés de peintures appliquées par une actrice derrière la toile. D'autres silouettes peuvent être aperçues derrière la toile.""
type="button"
>
<img class="gallery__selector__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_02.jpg" alt="Photo d'archive du spectacle: Une grande toile de plastique semi transparente est tendu verticalement sur la scène et occupe presque l'entièreté du cadre de la photo. Sur la toile on peut voir des lignes, flèches et pointillés de peintures appliquées par une actrice derrière la toile. D'autres silouettes peuvent être aperçues derrière la toile."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryrevifimage2"
aria-label="Voir l'image "Photo d'archive du spectacle: Trois sculptures composées de cage à poule, tiges de bois, poubelles en métal, différent textiles et autres matériaux. Yanik Potvin (sculpteur) travail sur ces sculptures. Pierre Tremblay-Thériault (concepteur numérique et artiste) manipule un projecteur vidéo et place une image sur le mur à l'arrière des sculptures.""
type="button"
>
<img class="gallery__selector__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_03.jpg" alt="Photo d'archive du spectacle: Trois sculptures composées de cage à poule, tiges de bois, poubelles en métal, différent textiles et autres matériaux. Yanik Potvin (sculpteur) travail sur ces sculptures. Pierre Tremblay-Thériault (concepteur numérique et artiste) manipule un projecteur vidéo et place une image sur le mur à l'arrière des sculptures."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryrevifimage3"
aria-label="Voir l'image "Photo d'archive du spectacle: Les performeurs, Fabienne Augié (actrice), Chantale Boulianne (scénographe), Éric Chalifour (acteur), Andrée-Anne Giguère (actrice et conception vidéo), Elaine Juteau (actrice), Anne-Marie Ouellet (actrice), Yanik Potvin (sculpteur), Guillaume Thibert (concepteur sonore) et Pierre Tremblay-Thériault (concepteur numérique et artiste), se tiennent debout sur la scène et regarde le public.""
type="button"
>
<img class="gallery__selector__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_04.jpg" alt="Photo d'archive du spectacle: Les performeurs, Fabienne Augié (actrice), Chantale Boulianne (scénographe), Éric Chalifour (acteur), Andrée-Anne Giguère (actrice et conception vidéo), Elaine Juteau (actrice), Anne-Marie Ouellet (actrice), Yanik Potvin (sculpteur), Guillaume Thibert (concepteur sonore) et Pierre Tremblay-Thériault (concepteur numérique et artiste), se tiennent debout sur la scène et regarde le public."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryrevifimage4"
aria-label="Voir l'image "Photo d'archive du spectacle: En première plan, Guillaume Thibert (concepteur sonore) parle en direction du public. Derrière, une grande toile de plastique semi transparente est mollement tendu verticalement sur la scène. Derrière la toile, d'autres performeurs se déplacent. Yanik Potvin (sculpteur) travail sur des sculptures.""
type="button"
>
<img class="gallery__selector__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_05.jpg" alt="Photo d'archive du spectacle: En première plan, Guillaume Thibert (concepteur sonore) parle en direction du public. Derrière, une grande toile de plastique semi transparente est mollement tendu verticalement sur la scène. Derrière la toile, d'autres performeurs se déplacent. Yanik Potvin (sculpteur) travail sur des sculptures."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryrevifimage5"
aria-label="Voir l'image "Photo d'archive du spectacle: Éric Chalifour (acteur) manipule une foule d'objets divers sur le sol en face de la scène. Pierre Tremblay-Thériault (concepteur numérique et artiste) manipule un projecteur vidéo et place une image sur le sol, sur les objets divers sur le sol.""
type="button"
>
<img class="gallery__selector__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_06.jpg" alt="Photo d'archive du spectacle: Éric Chalifour (acteur) manipule une foule d'objets divers sur le sol en face de la scène. Pierre Tremblay-Thériault (concepteur numérique et artiste) manipule un projecteur vidéo et place une image sur le sol, sur les objets divers sur le sol."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryrevifimage6"
aria-label="Voir l'image "Photo d'archive du spectacle: Une lumière rouge remplit la scène. Anne-Marie Ouellet (actrice) se tien près d'un poteau de métal et parle. Des cordes tendues sont attachées sur l'extrémité poteau. Au bout de chaque corde, un acteur tire et tien en équilibre le poteau. Les cordes et le poteau suggère un chapiteau.""
type="button"
>
<img class="gallery__selector__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_07.jpg" alt="Photo d'archive du spectacle: Une lumière rouge remplit la scène. Anne-Marie Ouellet (actrice) se tien près d'un poteau de métal et parle. Des cordes tendues sont attachées sur l'extrémité poteau. Au bout de chaque corde, un acteur tire et tien en équilibre le poteau. Les cordes et le poteau suggère un chapiteau."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryrevifimage7"
aria-label="Voir l'image "Photo d'archive du spectacle: Éric Chalifour (acteur) manipule un petit balais rouge et une canne en métal vide au travers d'une foule d'objets divers sur le sol en face de la scène.""
type="button"
>
<img class="gallery__selector__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_08.jpg" alt="Photo d'archive du spectacle: Éric Chalifour (acteur) manipule un petit balais rouge et une canne en métal vide au travers d'une foule d'objets divers sur le sol en face de la scène."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryrevifimage8"
aria-label="Voir l'image "Photo d'archive du spectacle: Éric Chalifour (acteur) manipule un petit sac jaune et un soulier à talon haut mauve au travers d'une foule d'objets divers sur le sol en face de la scène.""
type="button"
>
<img class="gallery__selector__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_09.jpg" alt="Photo d'archive du spectacle: Éric Chalifour (acteur) manipule un petit sac jaune et un soulier à talon haut mauve au travers d'une foule d'objets divers sur le sol en face de la scène."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryrevifimage9"
aria-label="Voir l'image "Photo d'archive du spectacle: Fabienne Augié (actrice) peinture des lignes et des 'x' sur deux gigantesques toiles de plastique semi transparente étendues au sol.""
type="button"
>
<img class="gallery__selector__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_10.jpg" alt="Photo d'archive du spectacle: Fabienne Augié (actrice) peinture des lignes et des 'x' sur deux gigantesques toiles de plastique semi transparente étendues au sol."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryrevifimage10"
aria-label="Voir l'image "Photo d'archive du spectacle: Fabienne Augié (actrice), Éric Chalifour (acteur), Elaine Juteau (actrice), Yanik Potvin (sculpteur) et Guillaume Thibert (concepteur sonore) soulèvent Anne-Marie Ouellet (actrice) dans les airs. Pierre Tremblay-Thériault (concepteur numérique et artiste) et Andrée-Anne Giguère (actrice et conception vidéo) sont à l'écart et regarde Anne-Marie.""
type="button"
>
<img class="gallery__selector__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_11.jpg" alt="Photo d'archive du spectacle: Fabienne Augié (actrice), Éric Chalifour (acteur), Elaine Juteau (actrice), Yanik Potvin (sculpteur) et Guillaume Thibert (concepteur sonore) soulèvent Anne-Marie Ouellet (actrice) dans les airs. Pierre Tremblay-Thériault (concepteur numérique et artiste) et Andrée-Anne Giguère (actrice et conception vidéo) sont à l'écart et regarde Anne-Marie."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryrevifimage11"
aria-label="Voir l'image "Photo d'archive du spectacle: Anne-Marie Ouellet (actrice) se tien debout sur le dos de Yanik Potvin (sculpteur). Elle est soutenue par Fabienne Augié (actrice) et Pierre Tremblay-Thériault (concepteur numérique et artiste).""
type="button"
>
<img class="gallery__selector__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_12.jpg" alt="Photo d'archive du spectacle: Anne-Marie Ouellet (actrice) se tien debout sur le dos de Yanik Potvin (sculpteur). Elle est soutenue par Fabienne Augié (actrice) et Pierre Tremblay-Thériault (concepteur numérique et artiste)."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryrevifimage12"
aria-label="Voir l'image "Photo d'archive du spectacle: La scène est remplie de poussière. Chantale Boulianne (scénographe) roule une toile semi transparente. Le rouleau est remplit d'objets divers. Sur le côté de la scène, Pierre Tremblay-Thériault (concepteur numérique et artiste) et Éric Chalifour (acteur) se tiennent debout et attendent. Dans le fond, Yanik Potvin (sculpteur) manipule la matière de ses sculptures.""
type="button"
>
<img class="gallery__selector__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_13.jpg" alt="Photo d'archive du spectacle: La scène est remplie de poussière. Chantale Boulianne (scénographe) roule une toile semi transparente. Le rouleau est remplit d'objets divers. Sur le côté de la scène, Pierre Tremblay-Thériault (concepteur numérique et artiste) et Éric Chalifour (acteur) se tiennent debout et attendent. Dans le fond, Yanik Potvin (sculpteur) manipule la matière de ses sculptures."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryrevifimage13"
aria-label="Voir l'image "Photo d'archive du spectacle: Caché derrière des sculptures composées de cage à poule, tiges de bois, poubelles en métal, différent textiles et autres matériaux, Elaine Juteau (actrice) regarde d'autres performeurs sur la scène.""
type="button"
>
<img class="gallery__selector__image" src="/arts/revif-pour-ma-soeur-ginette/gallery/revif_14.jpg" alt="Photo d'archive du spectacle: Caché derrière des sculptures composées de cage à poule, tiges de bois, poubelles en métal, différent textiles et autres matériaux, Elaine Juteau (actrice) regarde d'autres performeurs sur la scène."/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryrevif", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryrevif", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryrevif", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryrevif", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryrevif = document.querySelectorAll("#galleryrevif .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryrevif.length; i++) {
// Click
galleryButtonsgalleryrevif[i].addEventListener("click", function(event) {
displayImageWithButton("galleryrevif", this);
});
// Focus In
galleryButtonsgalleryrevif[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryrevif", displayedImages[i]);
}
}
displayImageWithButton("galleryrevif", this);
}
});
// Focus Out
galleryButtonsgalleryrevif[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryrevif", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryrevif", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryrevif = document.querySelector("#galleryrevif .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryrevif.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryrevif = document.querySelector("#galleryrevif .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryrevif.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryrevif = document.querySelector("#galleryrevif .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryrevif.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryrevif", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryrevif", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryrevif", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryrevif = 0;
let touchendXgalleryrevif = 0;
const galleryViewportgalleryrevif = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryrevif !== undefined) {
galleryViewportgalleryrevif.addEventListener('touchstart', function(event) {
touchstartXgalleryrevif = event.changedTouches[0].screenX
});
galleryViewportgalleryrevif.addEventListener('touchend', function(event) {
touchendXgalleryrevif = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryrevif, touchendXgalleryrevif);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryrevif.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Upload ton âme2014-01-01T00:00:00+00:002014-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/upload-ton-ame/<p>Upload ton âme : un projet traitant des technologies et de leur impact sur l’émergence des avatars dans nos sphères
relationnelles. Cette exposition présente les résultats d’une recherche portant sur le double rôle du témoin au sein
d’une œuvre interactive : spectateur et élément dynamique et esthétique de l’œuvre. C’est en utilisant le médium
technologique qu’il est proposé une métaphore mixant réalité et virtualité encourageant l’interaction entre les
visiteurs. Il est impossible de vivre cette exposition sans s’y intégrer.</p>
<div id="galleryuploadtoname" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryuploadtonameimage0" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_01.jpg" alt="Des visiteurs sont devant des claviers et écrans d'ordinateurs. Sur le mur du fond on peut lire le titre de l'exposition, 'Upload ton âme', et le nom de l'artiste, 'Pierre Tremblay-Thériault'."/>
<img id="galleryuploadtonameimage1" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_02.jpg" alt="Trois écrans d'ordinateurs accompagnés d'un clavier. Les écrans montrent une vue de l'intérieur de la salle d'exposition. Divers messages sont affichés sur les écrans. Sur le mur du fond on peut lire le titre de l'exposition, 'Upload ton âme', et le nom de l'artiste, 'Pierre Tremblay-Thériault'."/>
<img id="galleryuploadtonameimage2" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_03.jpg" alt="Des visiteurs sont devant des claviers et écrans d'ordinateurs. Les écrans montrent une vue de l'intérieur de la salle d'exposition. Divers messages sont affichés sur les écrans. Sur le mur du fond on peut lire le titre de l'exposition, 'Upload ton âme', et le nom de l'artiste, 'Pierre Tremblay-Thériault'"/>
<img id="galleryuploadtonameimage3" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_04.jpg" alt="Affiche de l'exposition sur un mur. L'affiche montre les informations concernant l'exposition ainsi qu'un appercu de son contenu."/>
<img id="galleryuploadtonameimage4" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_05.jpg" alt="Sur le mur du fond on peut lire le titre de l'exposition, 'Upload ton âme', et le nom de l'artiste, 'Pierre Tremblay-Thériault'."/>
<img id="galleryuploadtonameimage5" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_06.jpg" alt="Vue intérieur de la maquette. Huit sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran."/>
<img id="galleryuploadtonameimage6" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_07.jpg" alt="Sculpture, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. Sur l'écran on peut lire 'check bin ca l,art'"/>
<img id="galleryuploadtonameimage7" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_08.jpg" alt="Vue intérieur de la maquette. Quatre sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran."/>
<img id="galleryuploadtonameimage8" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_09.jpg" alt="Vue intérieur de la maquette. Huit sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran."/>
<img id="galleryuploadtonameimage9" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_10.jpg" alt="Sculpture, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. Sur l'écran on peut lire 'moii je peux remettre mon bras'"/>
<img id="galleryuploadtonameimage10" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_11.jpg" alt="Vue intérieur de la maquette. Quatre sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran."/>
<img id="galleryuploadtonameimage11" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_12.jpg" alt="Sculpture vu de dos, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. On ne voit pas sur ce qu'il ya sur l'écran."/>
<img id="galleryuploadtonameimage12" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_13.jpg" alt="Vue intérieur de la maquette. Trois sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran."/>
<img id="galleryuploadtonameimage13" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_14.jpg" alt="Vue intérieur de la maquette. Neuf sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran."/>
<img id="galleryuploadtonameimage14" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_15.jpg" alt="Sculpture, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. Sur l'écran on peut lire 'check bin ca l,art'"/>
<img id="galleryuploadtonameimage15" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_16.jpg" alt="Vue intérieur de la maquette. Deux sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran."/>
<img id="galleryuploadtonameimage16" class="gallery__viewport__image" src="/arts/upload-ton-ame/gallery/upload_17.jpg" alt="Sculpture vu de dos, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. On ne voit pas sur ce qu'il ya sur l'écran."/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage0"
aria-label="Voir l'image "Des visiteurs sont devant des claviers et écrans d'ordinateurs. Sur le mur du fond on peut lire le titre de l'exposition, 'Upload ton âme', et le nom de l'artiste, 'Pierre Tremblay-Thériault'.""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_01.jpg" alt="Des visiteurs sont devant des claviers et écrans d'ordinateurs. Sur le mur du fond on peut lire le titre de l'exposition, 'Upload ton âme', et le nom de l'artiste, 'Pierre Tremblay-Thériault'."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage1"
aria-label="Voir l'image "Trois écrans d'ordinateurs accompagnés d'un clavier. Les écrans montrent une vue de l'intérieur de la salle d'exposition. Divers messages sont affichés sur les écrans. Sur le mur du fond on peut lire le titre de l'exposition, 'Upload ton âme', et le nom de l'artiste, 'Pierre Tremblay-Thériault'.""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_02.jpg" alt="Trois écrans d'ordinateurs accompagnés d'un clavier. Les écrans montrent une vue de l'intérieur de la salle d'exposition. Divers messages sont affichés sur les écrans. Sur le mur du fond on peut lire le titre de l'exposition, 'Upload ton âme', et le nom de l'artiste, 'Pierre Tremblay-Thériault'."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage2"
aria-label="Voir l'image "Des visiteurs sont devant des claviers et écrans d'ordinateurs. Les écrans montrent une vue de l'intérieur de la salle d'exposition. Divers messages sont affichés sur les écrans. Sur le mur du fond on peut lire le titre de l'exposition, 'Upload ton âme', et le nom de l'artiste, 'Pierre Tremblay-Thériault'""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_03.jpg" alt="Des visiteurs sont devant des claviers et écrans d'ordinateurs. Les écrans montrent une vue de l'intérieur de la salle d'exposition. Divers messages sont affichés sur les écrans. Sur le mur du fond on peut lire le titre de l'exposition, 'Upload ton âme', et le nom de l'artiste, 'Pierre Tremblay-Thériault'"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage3"
aria-label="Voir l'image "Affiche de l'exposition sur un mur. L'affiche montre les informations concernant l'exposition ainsi qu'un appercu de son contenu.""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_04.jpg" alt="Affiche de l'exposition sur un mur. L'affiche montre les informations concernant l'exposition ainsi qu'un appercu de son contenu."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage4"
aria-label="Voir l'image "Sur le mur du fond on peut lire le titre de l'exposition, 'Upload ton âme', et le nom de l'artiste, 'Pierre Tremblay-Thériault'.""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_05.jpg" alt="Sur le mur du fond on peut lire le titre de l'exposition, 'Upload ton âme', et le nom de l'artiste, 'Pierre Tremblay-Thériault'."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage5"
aria-label="Voir l'image "Vue intérieur de la maquette. Huit sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran.""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_06.jpg" alt="Vue intérieur de la maquette. Huit sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage6"
aria-label="Voir l'image "Sculpture, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. Sur l'écran on peut lire 'check bin ca l,art'""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_07.jpg" alt="Sculpture, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. Sur l'écran on peut lire 'check bin ca l,art'"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage7"
aria-label="Voir l'image "Vue intérieur de la maquette. Quatre sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran.""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_08.jpg" alt="Vue intérieur de la maquette. Quatre sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage8"
aria-label="Voir l'image "Vue intérieur de la maquette. Huit sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran.""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_09.jpg" alt="Vue intérieur de la maquette. Huit sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage9"
aria-label="Voir l'image "Sculpture, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. Sur l'écran on peut lire 'moii je peux remettre mon bras'""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_10.jpg" alt="Sculpture, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. Sur l'écran on peut lire 'moii je peux remettre mon bras'"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage10"
aria-label="Voir l'image "Vue intérieur de la maquette. Quatre sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran.""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_11.jpg" alt="Vue intérieur de la maquette. Quatre sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage11"
aria-label="Voir l'image "Sculpture vu de dos, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. On ne voit pas sur ce qu'il ya sur l'écran.""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_12.jpg" alt="Sculpture vu de dos, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. On ne voit pas sur ce qu'il ya sur l'écran."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage12"
aria-label="Voir l'image "Vue intérieur de la maquette. Trois sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran.""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_13.jpg" alt="Vue intérieur de la maquette. Trois sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage13"
aria-label="Voir l'image "Vue intérieur de la maquette. Neuf sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran.""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_14.jpg" alt="Vue intérieur de la maquette. Neuf sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage14"
aria-label="Voir l'image "Sculpture, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. Sur l'écran on peut lire 'check bin ca l,art'""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_15.jpg" alt="Sculpture, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. Sur l'écran on peut lire 'check bin ca l,art'"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage15"
aria-label="Voir l'image "Vue intérieur de la maquette. Deux sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran.""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_16.jpg" alt="Vue intérieur de la maquette. Deux sculptures, des impressions 3D d'un mannequin de dessin tenant un verre de vin à la main. Leur tête sont remplacées par un écran."/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryuploadtonameimage16"
aria-label="Voir l'image "Sculpture vu de dos, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. On ne voit pas sur ce qu'il ya sur l'écran.""
type="button"
>
<img class="gallery__selector__image" src="/arts/upload-ton-ame/gallery/upload_17.jpg" alt="Sculpture vu de dos, une impression 3D d'un mannequin de dessin tenant un verre de vin à la main. Sa tête est remplacée par un écran. On ne voit pas sur ce qu'il ya sur l'écran."/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryuploadtoname", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryuploadtoname", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryuploadtoname", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryuploadtoname", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryuploadtoname = document.querySelectorAll("#galleryuploadtoname .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryuploadtoname.length; i++) {
// Click
galleryButtonsgalleryuploadtoname[i].addEventListener("click", function(event) {
displayImageWithButton("galleryuploadtoname", this);
});
// Focus In
galleryButtonsgalleryuploadtoname[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryuploadtoname", displayedImages[i]);
}
}
displayImageWithButton("galleryuploadtoname", this);
}
});
// Focus Out
galleryButtonsgalleryuploadtoname[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryuploadtoname", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryuploadtoname", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryuploadtoname = document.querySelector("#galleryuploadtoname .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryuploadtoname.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryuploadtoname = document.querySelector("#galleryuploadtoname .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryuploadtoname.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryuploadtoname = document.querySelector("#galleryuploadtoname .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryuploadtoname.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryuploadtoname", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryuploadtoname", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryuploadtoname", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryuploadtoname = 0;
let touchendXgalleryuploadtoname = 0;
const galleryViewportgalleryuploadtoname = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryuploadtoname !== undefined) {
galleryViewportgalleryuploadtoname.addEventListener('touchstart', function(event) {
touchstartXgalleryuploadtoname = event.changedTouches[0].screenX
});
galleryViewportgalleryuploadtoname.addEventListener('touchend', function(event) {
touchendXgalleryuploadtoname = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryuploadtoname, touchendXgalleryuploadtoname);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryuploadtoname.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Binôme 01, 02, 032012-01-01T00:00:00+00:002012-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/binome-01-02-03/<h2 id="binome-01">Binôme 01</h2>
<p>La troisième étape de recherche de la Chaire de recherche Pour une dramaturgie sonore, Binôme 01 porte sur l’exploration du duo. L’équipe, sous la supervision de Jean-Paul Quéinnec, se lance dans différentes thématiques afin d’explorer plusieurs formes de dramaturgie sonore.</p>
<p>Chercheurs : Julie Bernier, Luis F. Ortega Gil, Andrée-Anne Giguère, Elaine Juteau, Martin Lavertu, Sara Létourneau, Anick Martel, Guillaume Thibert et Pierre Tremblay-Thériault.</p>
<p>Directeur de recherche : Jean-Paul Quéinnec</p>
<p>Éclairages: Alexandre Nadeau</p>
<p>Formation en improvisation vocale avec Philippe Lambert ainsi que formation en performance et objets sonores André Éric Létourneau</p>
<p>Consultants : Constanza Camelo, Dario Larouche et André Éric Létourneau</p>
<p>Assistante de l’étape : Anaïs Plasse</p>
<p>Archives photos et vidéos : Anaïs Plasse <br />
Archives vidéos : Anaïs Plasse et Alexandre Rufin</p>
<h2 id="binome-02">Binôme 02</h2>
<p>Binôme 02 est la quatrième étape de recherche de la Chaire en dramaturgie sonore. Dans la poursuite des recherches entamées avec Binôme 01, les duos continuent leurs explorations sous la supervision de Jean-Paul Quéinnec.</p>
<p>Chercheurs : Julie Bernier, Luis F. Ortega Gil, Andrée-Anne Giguère, Elaine Juteau, Martin Lavertu, Sara Létourneau, Anick Martel, Guillaume Thibert et Pierre Tremblay-Thériault.</p>
<p>Directeur de recherche : Jean-Paul Quéinnec</p>
<p>Scénographie : Chantale Boulianne</p>
<p>Éclairage : Alexandre Nadeau</p>
<p>Assistantes aux archives : Alizée Tallaron et Shannon Williamsom</p>
<p>Archives photos : Gabriel Fortin, Alizée Tallaron et Shannon Williamson <br />
Archives vidéos : Alexandre Rufin, Alizée Tallaron et Shanon Williamson</p>
<h2 id="binome-03">Binôme 03</h2>
<p>L’équipe: <br />
Andrée-Anne Giguère <br />
Elaine Juteau <br />
Jean-Paul Quéinnec <br />
Guillaume Thibert <br />
Pierre Tremblay-Thériault</p>
<p>Présentée dans le cadre du colloque international sur le son: Le son du théâtre <br />
À l’université de Montréal, organisé par le CRI et l’ARIAS du 21 au 25 novembre 2012.</p>
<p>Suite à des pistes traversées dans Binômes 01 et 02, l’équipe se lance dans l’exploration de la thématique de la latence à partir de trois axes ; le son, le corps et le texte (Extrait de Revif pour ma soeur Ginette de Jean-Paul Quéinnec).</p>
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe
src="https://player.vimeo.com/video/47674789?h=4250ca05b2&title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script><div style="padding:56.25% 0 0 0;position:relative;">
<iframe
src="https://player.vimeo.com/video/163115484?h=4250ca05b2&title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script><div id="gallerybinomes" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerybinomesimage0" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes01_01.jpg" alt="Photo d'archive de performance: Binôme 01"/>
<img id="gallerybinomesimage1" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes01_02.jpg" alt="Photo d'archive de performance: Binôme 01"/>
<img id="gallerybinomesimage2" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes01_03.jpg" alt="Photo d'archive de performance: Binôme 01"/>
<img id="gallerybinomesimage3" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes01_04.jpg" alt="Photo d'archive de performance: Binôme 01"/>
<img id="gallerybinomesimage4" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes01_05.jpg" alt="Photo d'archive de performance: Binôme 01"/>
<img id="gallerybinomesimage5" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes01_06.jpg" alt="Photo d'archive de performance: Binôme 01"/>
<img id="gallerybinomesimage6" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes01_07.jpg" alt="Photo d'archive de performance: Binôme 01"/>
<img id="gallerybinomesimage7" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes01_08.jpg" alt="Photo d'archive de performance: Binôme 01"/>
<img id="gallerybinomesimage8" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes01_09.jpg" alt="Photo d'archive de performance: Binôme 01"/>
<img id="gallerybinomesimage9" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes01_10.jpg" alt="Photo d'archive de performance: Binôme 01"/>
<img id="gallerybinomesimage10" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_01.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage11" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_02.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage12" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_03.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage13" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_04.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage14" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_05.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage15" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_06.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage16" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_07.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage17" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_08.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage18" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_09.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage19" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_10.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage20" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_11.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage21" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_12.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage22" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_13.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage23" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_14.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage24" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_16.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage25" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_17.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage26" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_18.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage27" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_19.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage28" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_20.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage29" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_21.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage30" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_22.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage31" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes02_23.jpg" alt="Photo d'archive de performance: Binôme 02"/>
<img id="gallerybinomesimage32" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_01.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage33" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_02.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage34" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_03.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage35" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_04.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage36" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_05.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage37" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_06.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage38" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_07.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage39" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_08.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage40" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_09.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage41" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_10.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage42" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_11.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage43" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_12.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage44" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_13.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage45" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_14.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage46" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_16.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage47" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_17.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage48" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_18.jpg" alt="Photo d'archive de performance: Binôme 03"/>
<img id="gallerybinomesimage49" class="gallery__viewport__image" src="/arts/binome-01-02-03/gallery/binomes03_19.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage0"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 01""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes01_01.jpg" alt="Photo d'archive de performance: Binôme 01"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage1"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 01""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes01_02.jpg" alt="Photo d'archive de performance: Binôme 01"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage2"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 01""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes01_03.jpg" alt="Photo d'archive de performance: Binôme 01"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage3"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 01""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes01_04.jpg" alt="Photo d'archive de performance: Binôme 01"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage4"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 01""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes01_05.jpg" alt="Photo d'archive de performance: Binôme 01"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage5"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 01""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes01_06.jpg" alt="Photo d'archive de performance: Binôme 01"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage6"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 01""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes01_07.jpg" alt="Photo d'archive de performance: Binôme 01"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage7"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 01""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes01_08.jpg" alt="Photo d'archive de performance: Binôme 01"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage8"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 01""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes01_09.jpg" alt="Photo d'archive de performance: Binôme 01"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage9"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 01""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes01_10.jpg" alt="Photo d'archive de performance: Binôme 01"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage10"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_01.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage11"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_02.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage12"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_03.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage13"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_04.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage14"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_05.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage15"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_06.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage16"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_07.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage17"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_08.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage18"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_09.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage19"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_10.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage20"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_11.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage21"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_12.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage22"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_13.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage23"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_14.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage24"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_16.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage25"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_17.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage26"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_18.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage27"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_19.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage28"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_20.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage29"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_21.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage30"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_22.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage31"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 02""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes02_23.jpg" alt="Photo d'archive de performance: Binôme 02"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage32"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_01.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage33"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_02.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage34"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_03.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage35"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_04.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage36"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_05.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage37"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_06.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage38"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_07.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage39"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_08.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage40"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_09.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage41"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_10.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage42"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_11.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage43"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_12.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage44"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_13.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage45"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_14.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage46"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_16.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage47"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_17.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage48"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_18.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerybinomesimage49"
aria-label="Voir l'image "Photo d'archive de performance: Binôme 03""
type="button"
>
<img class="gallery__selector__image" src="/arts/binome-01-02-03/gallery/binomes03_19.jpg" alt="Photo d'archive de performance: Binôme 03"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerybinomes", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerybinomes", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerybinomes", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerybinomes", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerybinomes = document.querySelectorAll("#gallerybinomes .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerybinomes.length; i++) {
// Click
galleryButtonsgallerybinomes[i].addEventListener("click", function(event) {
displayImageWithButton("gallerybinomes", this);
});
// Focus In
galleryButtonsgallerybinomes[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerybinomes", displayedImages[i]);
}
}
displayImageWithButton("gallerybinomes", this);
}
});
// Focus Out
galleryButtonsgallerybinomes[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerybinomes", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerybinomes", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerybinomes = document.querySelector("#gallerybinomes .gallery__viewport__controls__nav-button--left");
previousImageButtongallerybinomes.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerybinomes = document.querySelector("#gallerybinomes .gallery__viewport__controls__nav-button--right");
nextImageButtongallerybinomes.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerybinomes = document.querySelector("#gallerybinomes .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerybinomes.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerybinomes", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerybinomes", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerybinomes", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerybinomes = 0;
let touchendXgallerybinomes = 0;
const galleryViewportgallerybinomes = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerybinomes !== undefined) {
galleryViewportgallerybinomes.addEventListener('touchstart', function(event) {
touchstartXgallerybinomes = event.changedTouches[0].screenX
});
galleryViewportgallerybinomes.addEventListener('touchend', function(event) {
touchendXgallerybinomes = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerybinomes, touchendXgallerybinomes);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerybinomes.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Jardin zen nord-américain2012-01-01T00:00:00+00:002012-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/jardin-zen-nord-americain/<p>Artistes: Andrée-Anne Giguère, Elaine Juteau, Yves Whissell, Pierre Tremblay-Thériault</p>
<div id="galleryjardinzennordamericain" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryjardinzennordamericainimage0" class="gallery__viewport__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_01.jpg" alt="Photo d'archive de performance: 1"/>
<img id="galleryjardinzennordamericainimage1" class="gallery__viewport__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_02.jpg" alt="Photo d'archive de performance: 2"/>
<img id="galleryjardinzennordamericainimage2" class="gallery__viewport__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_03.jpg" alt="Photo d'archive de performance: 3"/>
<img id="galleryjardinzennordamericainimage3" class="gallery__viewport__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_04.jpg" alt="Photo d'archive de performance: 4"/>
<img id="galleryjardinzennordamericainimage4" class="gallery__viewport__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_05.jpg" alt="Photo d'archive de performance: 5"/>
<img id="galleryjardinzennordamericainimage5" class="gallery__viewport__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_06.jpg" alt="Photo d'archive de performance: 6"/>
<img id="galleryjardinzennordamericainimage6" class="gallery__viewport__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_07.jpg" alt="Photo d'archive de performance: 7"/>
<img id="galleryjardinzennordamericainimage7" class="gallery__viewport__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_08.jpg" alt="Photo d'archive de performance: 8"/>
<img id="galleryjardinzennordamericainimage8" class="gallery__viewport__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_09.jpg" alt="Photo d'archive de performance: 9"/>
<img id="galleryjardinzennordamericainimage9" class="gallery__viewport__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_10.jpg" alt="Photo d'archive de performance: 10"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryjardinzennordamericainimage0"
aria-label="Voir l'image "Photo d'archive de performance: 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_01.jpg" alt="Photo d'archive de performance: 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryjardinzennordamericainimage1"
aria-label="Voir l'image "Photo d'archive de performance: 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_02.jpg" alt="Photo d'archive de performance: 2"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryjardinzennordamericainimage2"
aria-label="Voir l'image "Photo d'archive de performance: 3""
type="button"
>
<img class="gallery__selector__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_03.jpg" alt="Photo d'archive de performance: 3"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryjardinzennordamericainimage3"
aria-label="Voir l'image "Photo d'archive de performance: 4""
type="button"
>
<img class="gallery__selector__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_04.jpg" alt="Photo d'archive de performance: 4"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryjardinzennordamericainimage4"
aria-label="Voir l'image "Photo d'archive de performance: 5""
type="button"
>
<img class="gallery__selector__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_05.jpg" alt="Photo d'archive de performance: 5"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryjardinzennordamericainimage5"
aria-label="Voir l'image "Photo d'archive de performance: 6""
type="button"
>
<img class="gallery__selector__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_06.jpg" alt="Photo d'archive de performance: 6"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryjardinzennordamericainimage6"
aria-label="Voir l'image "Photo d'archive de performance: 7""
type="button"
>
<img class="gallery__selector__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_07.jpg" alt="Photo d'archive de performance: 7"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryjardinzennordamericainimage7"
aria-label="Voir l'image "Photo d'archive de performance: 8""
type="button"
>
<img class="gallery__selector__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_08.jpg" alt="Photo d'archive de performance: 8"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryjardinzennordamericainimage8"
aria-label="Voir l'image "Photo d'archive de performance: 9""
type="button"
>
<img class="gallery__selector__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_09.jpg" alt="Photo d'archive de performance: 9"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryjardinzennordamericainimage9"
aria-label="Voir l'image "Photo d'archive de performance: 10""
type="button"
>
<img class="gallery__selector__image" src="/arts/jardin-zen-nord-americain/gallery/jardin_10.jpg" alt="Photo d'archive de performance: 10"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryjardinzennordamericain", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryjardinzennordamericain", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryjardinzennordamericain", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryjardinzennordamericain", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryjardinzennordamericain = document.querySelectorAll("#galleryjardinzennordamericain .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryjardinzennordamericain.length; i++) {
// Click
galleryButtonsgalleryjardinzennordamericain[i].addEventListener("click", function(event) {
displayImageWithButton("galleryjardinzennordamericain", this);
});
// Focus In
galleryButtonsgalleryjardinzennordamericain[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryjardinzennordamericain", displayedImages[i]);
}
}
displayImageWithButton("galleryjardinzennordamericain", this);
}
});
// Focus Out
galleryButtonsgalleryjardinzennordamericain[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryjardinzennordamericain", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryjardinzennordamericain", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryjardinzennordamericain = document.querySelector("#galleryjardinzennordamericain .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryjardinzennordamericain.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryjardinzennordamericain = document.querySelector("#galleryjardinzennordamericain .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryjardinzennordamericain.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryjardinzennordamericain = document.querySelector("#galleryjardinzennordamericain .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryjardinzennordamericain.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryjardinzennordamericain", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryjardinzennordamericain", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryjardinzennordamericain", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryjardinzennordamericain = 0;
let touchendXgalleryjardinzennordamericain = 0;
const galleryViewportgalleryjardinzennordamericain = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryjardinzennordamericain !== undefined) {
galleryViewportgalleryjardinzennordamericain.addEventListener('touchstart', function(event) {
touchstartXgalleryjardinzennordamericain = event.changedTouches[0].screenX
});
galleryViewportgalleryjardinzennordamericain.addEventListener('touchend', function(event) {
touchendXgalleryjardinzennordamericain = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryjardinzennordamericain, touchendXgalleryjardinzennordamericain);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryjardinzennordamericain.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Leuleu2012-01-01T00:00:00+00:002012-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/leuleu/<p>Un théâtre performatif vidéo ; Leuleu est un projet sur la technologie et le ressenti qui vise les relations entre le corps de l’acteur et l’image vidéo projetée. À partir d’un texte-matière écrit par une femme au corps malade (atteinte de dystrophie musculaire), quatre femmes sur scène mènent leur corps jusqu’à l’épuisement. Elles exploreront la persistance, la résistance et l’endurance. Aussi, deux hommes, des corps, des présences sur scène, des manipules-acteurs rencontrent dans une relation d’écoute particulière (à la fois conflictuelle et complice) les quatre actrices-performeures. Entre théâtre et performance, leur corps en duo et en écoute avec l’image vidéo projetée, les quatre actrices-performeures traversent la thématique de l’échec. Ce projet exprime avec ludisme un rapport au corps et à la technologie de la projection vidéo. C’est dans la poursuite de recherches sur la présence de la vidéo projection au théâtre que l’idée de ce projet est venue. Le but est de sortir de l’instrumentalisation qu’on donne à la projection vidéo provenant de la machine et de lui donner un rôle de ressenti en lien avec le corps de l’acteur. Ne pas créer un effet sensationnaliste, mais plutôt un lien sensible à la technique.</p>
<p>Un récit fragmenté, à l’intérieur duquel le spectateur tient un rôle particulier. Le spectateur au centre de l’action n’est pas ignoré et participe par sa présence à l’action et est même sollicité. Aussi nous donnons la responsabilité du sens au spectateur en lui offrant des actions, des images, qu’il peut rassembler pour créer sa propre dramaturgie. Richard Schechner, théoricien de la performance, dit à ce sujet : « Le metteur en scène n’a pas pour rôle de proposer un «manifeste» cohérent. C’est au spectateur de trouver une cohérence.» (2007). C’est dans cette optique que nous construirons la ligne dramaturgique du spectacle, en laissant une place à la création du spectateur. Un travail sous forme de duo-solo où le spectateur aura parfois à faire un choix sur ce qu’il souhaite regarder. Amenant ainsi chaque spectateur à vivre une expérience particulière et différente.</p>
<h2 id="equipe">ÉQUIPE</h2>
<p>Direction de projet Andrée-Anne Giguère</p>
<p>Équipe de création / sur la scène <br />
Andrée-Anne Giguère <br />
Elaine Juteau <br />
Anick Martel <br />
Anne-Marie Ouellet <br />
Pierre Tremblay-Thériault <br />
Yves Whissell</p>
<p>Création des images <br />
Pierre Tremblay-Thériault <br />
Yves Whissell</p>
<p>Co-conception Éclairage <br />
Andrée-Anne Giguère <br />
Alexandre Nadeau</p>
<p>Direction de maîtrise d’Andrée-Anne Giguère <br />
Jean-Paul Quéinnec <br />
Constanza Camelo</p>
<p>Durée: 1h20</p>
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe
src="https://player.vimeo.com/video/235256313?h=4250ca05b2&title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script><div id="galleryleuleu" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryleuleuimage0" class="gallery__viewport__image" src="/arts/leuleu/gallery/leuleu_01.jpg" alt="Photo d'archive de performance: 1"/>
<img id="galleryleuleuimage1" class="gallery__viewport__image" src="/arts/leuleu/gallery/leuleu_02.jpg" alt="Photo d'archive de performance: 2"/>
<img id="galleryleuleuimage2" class="gallery__viewport__image" src="/arts/leuleu/gallery/leuleu_03.jpg" alt="Photo d'archive de performance: 3"/>
<img id="galleryleuleuimage3" class="gallery__viewport__image" src="/arts/leuleu/gallery/leuleu_04.jpg" alt="Photo d'archive de performance: 4"/>
<img id="galleryleuleuimage4" class="gallery__viewport__image" src="/arts/leuleu/gallery/leuleu_05.jpg" alt="Photo d'archive de performance: 5"/>
<img id="galleryleuleuimage5" class="gallery__viewport__image" src="/arts/leuleu/gallery/leuleu_06.jpg" alt="Photo d'archive de performance: 6"/>
<img id="galleryleuleuimage6" class="gallery__viewport__image" src="/arts/leuleu/gallery/leuleu_07.jpg" alt="Photo d'archive de performance: 7"/>
<img id="galleryleuleuimage7" class="gallery__viewport__image" src="/arts/leuleu/gallery/leuleu_08.jpg" alt="Photo d'archive de performance: 8"/>
<img id="galleryleuleuimage8" class="gallery__viewport__image" src="/arts/leuleu/gallery/leuleu_09.jpg" alt="Photo d'archive de performance: 9"/>
<img id="galleryleuleuimage9" class="gallery__viewport__image" src="/arts/leuleu/gallery/leuleu_10.jpg" alt="Photo d'archive de performance: 10"/>
<img id="galleryleuleuimage10" class="gallery__viewport__image" src="/arts/leuleu/gallery/leuleu_11.jpg" alt="Photo d'archive de performance: 11"/>
<img id="galleryleuleuimage11" class="gallery__viewport__image" src="/arts/leuleu/gallery/leuleu_12.jpg" alt="Photo d'archive de performance: 12"/>
<img id="galleryleuleuimage12" class="gallery__viewport__image" src="/arts/leuleu/gallery/leuleu_13.jpg" alt="Photo d'archive de performance: 13"/>
<img id="galleryleuleuimage13" class="gallery__viewport__image" src="/arts/leuleu/gallery/leuleu_14.jpg" alt="Photo d'archive de performance: 14"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryleuleuimage0"
aria-label="Voir l'image "Photo d'archive de performance: 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/leuleu/gallery/leuleu_01.jpg" alt="Photo d'archive de performance: 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryleuleuimage1"
aria-label="Voir l'image "Photo d'archive de performance: 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/leuleu/gallery/leuleu_02.jpg" alt="Photo d'archive de performance: 2"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryleuleuimage2"
aria-label="Voir l'image "Photo d'archive de performance: 3""
type="button"
>
<img class="gallery__selector__image" src="/arts/leuleu/gallery/leuleu_03.jpg" alt="Photo d'archive de performance: 3"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryleuleuimage3"
aria-label="Voir l'image "Photo d'archive de performance: 4""
type="button"
>
<img class="gallery__selector__image" src="/arts/leuleu/gallery/leuleu_04.jpg" alt="Photo d'archive de performance: 4"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryleuleuimage4"
aria-label="Voir l'image "Photo d'archive de performance: 5""
type="button"
>
<img class="gallery__selector__image" src="/arts/leuleu/gallery/leuleu_05.jpg" alt="Photo d'archive de performance: 5"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryleuleuimage5"
aria-label="Voir l'image "Photo d'archive de performance: 6""
type="button"
>
<img class="gallery__selector__image" src="/arts/leuleu/gallery/leuleu_06.jpg" alt="Photo d'archive de performance: 6"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryleuleuimage6"
aria-label="Voir l'image "Photo d'archive de performance: 7""
type="button"
>
<img class="gallery__selector__image" src="/arts/leuleu/gallery/leuleu_07.jpg" alt="Photo d'archive de performance: 7"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryleuleuimage7"
aria-label="Voir l'image "Photo d'archive de performance: 8""
type="button"
>
<img class="gallery__selector__image" src="/arts/leuleu/gallery/leuleu_08.jpg" alt="Photo d'archive de performance: 8"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryleuleuimage8"
aria-label="Voir l'image "Photo d'archive de performance: 9""
type="button"
>
<img class="gallery__selector__image" src="/arts/leuleu/gallery/leuleu_09.jpg" alt="Photo d'archive de performance: 9"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryleuleuimage9"
aria-label="Voir l'image "Photo d'archive de performance: 10""
type="button"
>
<img class="gallery__selector__image" src="/arts/leuleu/gallery/leuleu_10.jpg" alt="Photo d'archive de performance: 10"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryleuleuimage10"
aria-label="Voir l'image "Photo d'archive de performance: 11""
type="button"
>
<img class="gallery__selector__image" src="/arts/leuleu/gallery/leuleu_11.jpg" alt="Photo d'archive de performance: 11"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryleuleuimage11"
aria-label="Voir l'image "Photo d'archive de performance: 12""
type="button"
>
<img class="gallery__selector__image" src="/arts/leuleu/gallery/leuleu_12.jpg" alt="Photo d'archive de performance: 12"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryleuleuimage12"
aria-label="Voir l'image "Photo d'archive de performance: 13""
type="button"
>
<img class="gallery__selector__image" src="/arts/leuleu/gallery/leuleu_13.jpg" alt="Photo d'archive de performance: 13"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryleuleuimage13"
aria-label="Voir l'image "Photo d'archive de performance: 14""
type="button"
>
<img class="gallery__selector__image" src="/arts/leuleu/gallery/leuleu_14.jpg" alt="Photo d'archive de performance: 14"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryleuleu", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryleuleu", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryleuleu", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryleuleu", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryleuleu = document.querySelectorAll("#galleryleuleu .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryleuleu.length; i++) {
// Click
galleryButtonsgalleryleuleu[i].addEventListener("click", function(event) {
displayImageWithButton("galleryleuleu", this);
});
// Focus In
galleryButtonsgalleryleuleu[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryleuleu", displayedImages[i]);
}
}
displayImageWithButton("galleryleuleu", this);
}
});
// Focus Out
galleryButtonsgalleryleuleu[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryleuleu", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryleuleu", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryleuleu = document.querySelector("#galleryleuleu .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryleuleu.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryleuleu = document.querySelector("#galleryleuleu .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryleuleu.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryleuleu = document.querySelector("#galleryleuleu .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryleuleu.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryleuleu", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryleuleu", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryleuleu", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryleuleu = 0;
let touchendXgalleryleuleu = 0;
const galleryViewportgalleryleuleu = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryleuleu !== undefined) {
galleryViewportgalleryleuleu.addEventListener('touchstart', function(event) {
touchstartXgalleryleuleu = event.changedTouches[0].screenX
});
galleryViewportgalleryleuleu.addEventListener('touchend', function(event) {
touchendXgalleryleuleu = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryleuleu, touchendXgalleryleuleu);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryleuleu.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Statique2012-01-01T00:00:00+00:002012-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/statique/<p>Création vidéo présentée dans le cadre de «La Minute Vidéo / Folie Culture» au Centre d’artistes L’Oeil de Poisson à Québec.</p>
<p>18 octobre au 18 novembre 2012</p>
<p>Artistes: Andrée-Anne Giguère, Elaine Juteau, Pierre Tremblay-Thériault et Yves Whissell</p>
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe
src="https://player.vimeo.com/video/153453777?h=4250ca05b2&title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script><div id="gallerystatique" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerystatiqueimage0" class="gallery__viewport__image" src="/arts/statique/gallery/statique.jpg" alt="Photo d'écran de la vidéo: Boule de crème glacé beige fondant sur un brownie. En arrière plan, une femme est assise dos à un mur. Ses cheveux semblent voler dans un courant d'air."/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerystatiqueimage0"
aria-label="Voir l'image "Photo d'écran de la vidéo: Boule de crème glacé beige fondant sur un brownie. En arrière plan, une femme est assise dos à un mur. Ses cheveux semblent voler dans un courant d'air.""
type="button"
>
<img class="gallery__selector__image" src="/arts/statique/gallery/statique.jpg" alt="Photo d'écran de la vidéo: Boule de crème glacé beige fondant sur un brownie. En arrière plan, une femme est assise dos à un mur. Ses cheveux semblent voler dans un courant d'air."/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerystatique", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerystatique", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerystatique", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerystatique", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerystatique = document.querySelectorAll("#gallerystatique .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerystatique.length; i++) {
// Click
galleryButtonsgallerystatique[i].addEventListener("click", function(event) {
displayImageWithButton("gallerystatique", this);
});
// Focus In
galleryButtonsgallerystatique[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerystatique", displayedImages[i]);
}
}
displayImageWithButton("gallerystatique", this);
}
});
// Focus Out
galleryButtonsgallerystatique[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerystatique", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerystatique", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerystatique = document.querySelector("#gallerystatique .gallery__viewport__controls__nav-button--left");
previousImageButtongallerystatique.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerystatique = document.querySelector("#gallerystatique .gallery__viewport__controls__nav-button--right");
nextImageButtongallerystatique.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerystatique = document.querySelector("#gallerystatique .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerystatique.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerystatique", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerystatique", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerystatique", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerystatique = 0;
let touchendXgallerystatique = 0;
const galleryViewportgallerystatique = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerystatique !== undefined) {
galleryViewportgallerystatique.addEventListener('touchstart', function(event) {
touchstartXgallerystatique = event.changedTouches[0].screenX
});
galleryViewportgallerystatique.addEventListener('touchend', function(event) {
touchendXgallerystatique = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerystatique, touchendXgallerystatique);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerystatique.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Ajuste ton poste!2011-01-01T00:00:00+00:002011-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/ajuste-ton-poste/<p>Écran LCD, caméra web, détecteur de distance, Arduino, cadre en bois, ordinateur <br />
40cm X 30cm <br />
2011</p>
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe
src="https://player.vimeo.com/video/163081684?h=4250ca05b2&title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script><div id="galleryajustetonposte" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryajustetonposteimage0" class="gallery__viewport__image" src="/arts/ajuste-ton-poste/gallery/ajuste_01.jpg" alt="Photo d'archive: 1"/>
<img id="galleryajustetonposteimage1" class="gallery__viewport__image" src="/arts/ajuste-ton-poste/gallery/ajuste_02.jpg" alt="Photo d'archive: 2"/>
<img id="galleryajustetonposteimage2" class="gallery__viewport__image" src="/arts/ajuste-ton-poste/gallery/ajuste_03.jpg" alt="Photo d'archive: 3"/>
<img id="galleryajustetonposteimage3" class="gallery__viewport__image" src="/arts/ajuste-ton-poste/gallery/ajuste_04.jpg" alt="Photo d'archive: 4"/>
<img id="galleryajustetonposteimage4" class="gallery__viewport__image" src="/arts/ajuste-ton-poste/gallery/ajuste_05.jpg" alt="Photo d'archive: 5"/>
<img id="galleryajustetonposteimage5" class="gallery__viewport__image" src="/arts/ajuste-ton-poste/gallery/ajuste_06.jpg" alt="Photo d'archive: 6"/>
<img id="galleryajustetonposteimage6" class="gallery__viewport__image" src="/arts/ajuste-ton-poste/gallery/ajuste_07.jpg" alt="Photo d'archive: 7"/>
<img id="galleryajustetonposteimage7" class="gallery__viewport__image" src="/arts/ajuste-ton-poste/gallery/ajuste_08.jpg" alt="Photo d'archive: 8"/>
<img id="galleryajustetonposteimage8" class="gallery__viewport__image" src="/arts/ajuste-ton-poste/gallery/ajuste_09.jpg" alt="Photo d'archive: 9"/>
<img id="galleryajustetonposteimage9" class="gallery__viewport__image" src="/arts/ajuste-ton-poste/gallery/ajuste_10.jpg" alt="Photo d'archive: 10"/>
<img id="galleryajustetonposteimage10" class="gallery__viewport__image" src="/arts/ajuste-ton-poste/gallery/ajuste_11.jpg" alt="Photo d'archive: 11"/>
<img id="galleryajustetonposteimage11" class="gallery__viewport__image" src="/arts/ajuste-ton-poste/gallery/ajuste_12.jpg" alt="Photo d'archive: 12"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryajustetonposteimage0"
aria-label="Voir l'image "Photo d'archive: 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/ajuste-ton-poste/gallery/ajuste_01.jpg" alt="Photo d'archive: 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryajustetonposteimage1"
aria-label="Voir l'image "Photo d'archive: 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/ajuste-ton-poste/gallery/ajuste_02.jpg" alt="Photo d'archive: 2"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryajustetonposteimage2"
aria-label="Voir l'image "Photo d'archive: 3""
type="button"
>
<img class="gallery__selector__image" src="/arts/ajuste-ton-poste/gallery/ajuste_03.jpg" alt="Photo d'archive: 3"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryajustetonposteimage3"
aria-label="Voir l'image "Photo d'archive: 4""
type="button"
>
<img class="gallery__selector__image" src="/arts/ajuste-ton-poste/gallery/ajuste_04.jpg" alt="Photo d'archive: 4"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryajustetonposteimage4"
aria-label="Voir l'image "Photo d'archive: 5""
type="button"
>
<img class="gallery__selector__image" src="/arts/ajuste-ton-poste/gallery/ajuste_05.jpg" alt="Photo d'archive: 5"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryajustetonposteimage5"
aria-label="Voir l'image "Photo d'archive: 6""
type="button"
>
<img class="gallery__selector__image" src="/arts/ajuste-ton-poste/gallery/ajuste_06.jpg" alt="Photo d'archive: 6"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryajustetonposteimage6"
aria-label="Voir l'image "Photo d'archive: 7""
type="button"
>
<img class="gallery__selector__image" src="/arts/ajuste-ton-poste/gallery/ajuste_07.jpg" alt="Photo d'archive: 7"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryajustetonposteimage7"
aria-label="Voir l'image "Photo d'archive: 8""
type="button"
>
<img class="gallery__selector__image" src="/arts/ajuste-ton-poste/gallery/ajuste_08.jpg" alt="Photo d'archive: 8"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryajustetonposteimage8"
aria-label="Voir l'image "Photo d'archive: 9""
type="button"
>
<img class="gallery__selector__image" src="/arts/ajuste-ton-poste/gallery/ajuste_09.jpg" alt="Photo d'archive: 9"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryajustetonposteimage9"
aria-label="Voir l'image "Photo d'archive: 10""
type="button"
>
<img class="gallery__selector__image" src="/arts/ajuste-ton-poste/gallery/ajuste_10.jpg" alt="Photo d'archive: 10"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryajustetonposteimage10"
aria-label="Voir l'image "Photo d'archive: 11""
type="button"
>
<img class="gallery__selector__image" src="/arts/ajuste-ton-poste/gallery/ajuste_11.jpg" alt="Photo d'archive: 11"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryajustetonposteimage11"
aria-label="Voir l'image "Photo d'archive: 12""
type="button"
>
<img class="gallery__selector__image" src="/arts/ajuste-ton-poste/gallery/ajuste_12.jpg" alt="Photo d'archive: 12"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryajustetonposte", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryajustetonposte", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryajustetonposte", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryajustetonposte", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryajustetonposte = document.querySelectorAll("#galleryajustetonposte .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryajustetonposte.length; i++) {
// Click
galleryButtonsgalleryajustetonposte[i].addEventListener("click", function(event) {
displayImageWithButton("galleryajustetonposte", this);
});
// Focus In
galleryButtonsgalleryajustetonposte[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryajustetonposte", displayedImages[i]);
}
}
displayImageWithButton("galleryajustetonposte", this);
}
});
// Focus Out
galleryButtonsgalleryajustetonposte[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryajustetonposte", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryajustetonposte", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryajustetonposte = document.querySelector("#galleryajustetonposte .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryajustetonposte.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryajustetonposte = document.querySelector("#galleryajustetonposte .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryajustetonposte.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryajustetonposte = document.querySelector("#galleryajustetonposte .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryajustetonposte.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryajustetonposte", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryajustetonposte", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryajustetonposte", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryajustetonposte = 0;
let touchendXgalleryajustetonposte = 0;
const galleryViewportgalleryajustetonposte = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryajustetonposte !== undefined) {
galleryViewportgalleryajustetonposte.addEventListener('touchstart', function(event) {
touchstartXgalleryajustetonposte = event.changedTouches[0].screenX
});
galleryViewportgalleryajustetonposte.addEventListener('touchend', function(event) {
touchendXgalleryajustetonposte = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryajustetonposte, touchendXgalleryajustetonposte);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryajustetonposte.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Géographies variables2011-01-01T00:00:00+00:002011-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/geographies-variables/<div id="gallerygeographiesvariables" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerygeographiesvariablesimage0" class="gallery__viewport__image" src="/arts/geographies-variables/gallery/geo_01.jpg" alt="Photo d'archive: 1"/>
<img id="gallerygeographiesvariablesimage1" class="gallery__viewport__image" src="/arts/geographies-variables/gallery/geo_02.jpg" alt="Photo d'archive: 2"/>
<img id="gallerygeographiesvariablesimage2" class="gallery__viewport__image" src="/arts/geographies-variables/gallery/geo_03.jpg" alt="Photo d'archive: 3"/>
<img id="gallerygeographiesvariablesimage3" class="gallery__viewport__image" src="/arts/geographies-variables/gallery/geo_04.jpg" alt="Photo d'archive: 4"/>
<img id="gallerygeographiesvariablesimage4" class="gallery__viewport__image" src="/arts/geographies-variables/gallery/geo_05.jpg" alt="Photo d'archive: 5"/>
<img id="gallerygeographiesvariablesimage5" class="gallery__viewport__image" src="/arts/geographies-variables/gallery/geo_06.jpg" alt="Photo d'archive: 6"/>
<img id="gallerygeographiesvariablesimage6" class="gallery__viewport__image" src="/arts/geographies-variables/gallery/geo_08.jpg" alt="Photo d'archive: 7"/>
<img id="gallerygeographiesvariablesimage7" class="gallery__viewport__image" src="/arts/geographies-variables/gallery/geo_09.jpg" alt="Photo d'archive: 8"/>
<img id="gallerygeographiesvariablesimage8" class="gallery__viewport__image" src="/arts/geographies-variables/gallery/geo_10.jpg" alt="Photo d'archive: 9"/>
<img id="gallerygeographiesvariablesimage9" class="gallery__viewport__image" src="/arts/geographies-variables/gallery/geo_11.jpg" alt="Photo d'archive: 10"/>
<img id="gallerygeographiesvariablesimage10" class="gallery__viewport__image" src="/arts/geographies-variables/gallery/geo_12.jpg" alt="Photo d'archive: 11"/>
<img id="gallerygeographiesvariablesimage11" class="gallery__viewport__image" src="/arts/geographies-variables/gallery/geo_13.jpg" alt="Photo d'archive: 12"/>
<img id="gallerygeographiesvariablesimage12" class="gallery__viewport__image" src="/arts/geographies-variables/gallery/geo_14.jpg" alt="Photo d'archive: 13"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygeographiesvariablesimage0"
aria-label="Voir l'image "Photo d'archive: 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/geographies-variables/gallery/geo_01.jpg" alt="Photo d'archive: 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygeographiesvariablesimage1"
aria-label="Voir l'image "Photo d'archive: 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/geographies-variables/gallery/geo_02.jpg" alt="Photo d'archive: 2"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygeographiesvariablesimage2"
aria-label="Voir l'image "Photo d'archive: 3""
type="button"
>
<img class="gallery__selector__image" src="/arts/geographies-variables/gallery/geo_03.jpg" alt="Photo d'archive: 3"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygeographiesvariablesimage3"
aria-label="Voir l'image "Photo d'archive: 4""
type="button"
>
<img class="gallery__selector__image" src="/arts/geographies-variables/gallery/geo_04.jpg" alt="Photo d'archive: 4"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygeographiesvariablesimage4"
aria-label="Voir l'image "Photo d'archive: 5""
type="button"
>
<img class="gallery__selector__image" src="/arts/geographies-variables/gallery/geo_05.jpg" alt="Photo d'archive: 5"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygeographiesvariablesimage5"
aria-label="Voir l'image "Photo d'archive: 6""
type="button"
>
<img class="gallery__selector__image" src="/arts/geographies-variables/gallery/geo_06.jpg" alt="Photo d'archive: 6"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygeographiesvariablesimage6"
aria-label="Voir l'image "Photo d'archive: 7""
type="button"
>
<img class="gallery__selector__image" src="/arts/geographies-variables/gallery/geo_08.jpg" alt="Photo d'archive: 7"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygeographiesvariablesimage7"
aria-label="Voir l'image "Photo d'archive: 8""
type="button"
>
<img class="gallery__selector__image" src="/arts/geographies-variables/gallery/geo_09.jpg" alt="Photo d'archive: 8"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygeographiesvariablesimage8"
aria-label="Voir l'image "Photo d'archive: 9""
type="button"
>
<img class="gallery__selector__image" src="/arts/geographies-variables/gallery/geo_10.jpg" alt="Photo d'archive: 9"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygeographiesvariablesimage9"
aria-label="Voir l'image "Photo d'archive: 10""
type="button"
>
<img class="gallery__selector__image" src="/arts/geographies-variables/gallery/geo_11.jpg" alt="Photo d'archive: 10"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygeographiesvariablesimage10"
aria-label="Voir l'image "Photo d'archive: 11""
type="button"
>
<img class="gallery__selector__image" src="/arts/geographies-variables/gallery/geo_12.jpg" alt="Photo d'archive: 11"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygeographiesvariablesimage11"
aria-label="Voir l'image "Photo d'archive: 12""
type="button"
>
<img class="gallery__selector__image" src="/arts/geographies-variables/gallery/geo_13.jpg" alt="Photo d'archive: 12"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygeographiesvariablesimage12"
aria-label="Voir l'image "Photo d'archive: 13""
type="button"
>
<img class="gallery__selector__image" src="/arts/geographies-variables/gallery/geo_14.jpg" alt="Photo d'archive: 13"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerygeographiesvariables", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerygeographiesvariables", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerygeographiesvariables", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerygeographiesvariables", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerygeographiesvariables = document.querySelectorAll("#gallerygeographiesvariables .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerygeographiesvariables.length; i++) {
// Click
galleryButtonsgallerygeographiesvariables[i].addEventListener("click", function(event) {
displayImageWithButton("gallerygeographiesvariables", this);
});
// Focus In
galleryButtonsgallerygeographiesvariables[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerygeographiesvariables", displayedImages[i]);
}
}
displayImageWithButton("gallerygeographiesvariables", this);
}
});
// Focus Out
galleryButtonsgallerygeographiesvariables[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerygeographiesvariables", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerygeographiesvariables", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerygeographiesvariables = document.querySelector("#gallerygeographiesvariables .gallery__viewport__controls__nav-button--left");
previousImageButtongallerygeographiesvariables.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerygeographiesvariables = document.querySelector("#gallerygeographiesvariables .gallery__viewport__controls__nav-button--right");
nextImageButtongallerygeographiesvariables.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerygeographiesvariables = document.querySelector("#gallerygeographiesvariables .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerygeographiesvariables.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerygeographiesvariables", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerygeographiesvariables", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerygeographiesvariables", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerygeographiesvariables = 0;
let touchendXgallerygeographiesvariables = 0;
const galleryViewportgallerygeographiesvariables = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerygeographiesvariables !== undefined) {
galleryViewportgallerygeographiesvariables.addEventListener('touchstart', function(event) {
touchstartXgallerygeographiesvariables = event.changedTouches[0].screenX
});
galleryViewportgallerygeographiesvariables.addEventListener('touchend', function(event) {
touchendXgallerygeographiesvariables = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerygeographiesvariables, touchendXgallerygeographiesvariables);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerygeographiesvariables.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>LAB_21 et LAB_222011-01-01T00:00:00+00:002011-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/lab2122/<div style="padding:56.25% 0 0 0;position:relative;">
<iframe
src="https://player.vimeo.com/video/168112101?h=4250ca05b2&title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script><div id="gallerylab2122" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerylab2122image0" class="gallery__viewport__image" src="/arts/lab2122/gallery/lab2122_1.jpg" alt="Photo d'archive: 1"/>
<img id="gallerylab2122image1" class="gallery__viewport__image" src="/arts/lab2122/gallery/lab2122_2.jpg" alt="Photo d'archive: 2"/>
<img id="gallerylab2122image2" class="gallery__viewport__image" src="/arts/lab2122/gallery/lab2122_3.jpg" alt="Photo d'archive: 3"/>
<img id="gallerylab2122image3" class="gallery__viewport__image" src="/arts/lab2122/gallery/lab2122_4.jpg" alt="Photo d'archive: 4"/>
<img id="gallerylab2122image4" class="gallery__viewport__image" src="/arts/lab2122/gallery/lab2122_5.jpg" alt="Photo d'archive: 5"/>
<img id="gallerylab2122image5" class="gallery__viewport__image" src="/arts/lab2122/gallery/lab2122_6.jpg" alt="Photo d'archive: 6"/>
<img id="gallerylab2122image6" class="gallery__viewport__image" src="/arts/lab2122/gallery/lab2122_7.jpg" alt="Photo d'archive: 7"/>
<img id="gallerylab2122image7" class="gallery__viewport__image" src="/arts/lab2122/gallery/lab2122_8.jpg" alt="Photo d'archive: 8"/>
<img id="gallerylab2122image8" class="gallery__viewport__image" src="/arts/lab2122/gallery/lab2122_9.jpg" alt="Photo d'archive: 9"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerylab2122image0"
aria-label="Voir l'image "Photo d'archive: 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/lab2122/gallery/lab2122_1.jpg" alt="Photo d'archive: 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerylab2122image1"
aria-label="Voir l'image "Photo d'archive: 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/lab2122/gallery/lab2122_2.jpg" alt="Photo d'archive: 2"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerylab2122image2"
aria-label="Voir l'image "Photo d'archive: 3""
type="button"
>
<img class="gallery__selector__image" src="/arts/lab2122/gallery/lab2122_3.jpg" alt="Photo d'archive: 3"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerylab2122image3"
aria-label="Voir l'image "Photo d'archive: 4""
type="button"
>
<img class="gallery__selector__image" src="/arts/lab2122/gallery/lab2122_4.jpg" alt="Photo d'archive: 4"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerylab2122image4"
aria-label="Voir l'image "Photo d'archive: 5""
type="button"
>
<img class="gallery__selector__image" src="/arts/lab2122/gallery/lab2122_5.jpg" alt="Photo d'archive: 5"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerylab2122image5"
aria-label="Voir l'image "Photo d'archive: 6""
type="button"
>
<img class="gallery__selector__image" src="/arts/lab2122/gallery/lab2122_6.jpg" alt="Photo d'archive: 6"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerylab2122image6"
aria-label="Voir l'image "Photo d'archive: 7""
type="button"
>
<img class="gallery__selector__image" src="/arts/lab2122/gallery/lab2122_7.jpg" alt="Photo d'archive: 7"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerylab2122image7"
aria-label="Voir l'image "Photo d'archive: 8""
type="button"
>
<img class="gallery__selector__image" src="/arts/lab2122/gallery/lab2122_8.jpg" alt="Photo d'archive: 8"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerylab2122image8"
aria-label="Voir l'image "Photo d'archive: 9""
type="button"
>
<img class="gallery__selector__image" src="/arts/lab2122/gallery/lab2122_9.jpg" alt="Photo d'archive: 9"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerylab2122", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerylab2122", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerylab2122", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerylab2122", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerylab2122 = document.querySelectorAll("#gallerylab2122 .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerylab2122.length; i++) {
// Click
galleryButtonsgallerylab2122[i].addEventListener("click", function(event) {
displayImageWithButton("gallerylab2122", this);
});
// Focus In
galleryButtonsgallerylab2122[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerylab2122", displayedImages[i]);
}
}
displayImageWithButton("gallerylab2122", this);
}
});
// Focus Out
galleryButtonsgallerylab2122[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerylab2122", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerylab2122", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerylab2122 = document.querySelector("#gallerylab2122 .gallery__viewport__controls__nav-button--left");
previousImageButtongallerylab2122.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerylab2122 = document.querySelector("#gallerylab2122 .gallery__viewport__controls__nav-button--right");
nextImageButtongallerylab2122.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerylab2122 = document.querySelector("#gallerylab2122 .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerylab2122.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerylab2122", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerylab2122", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerylab2122", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerylab2122 = 0;
let touchendXgallerylab2122 = 0;
const galleryViewportgallerylab2122 = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerylab2122 !== undefined) {
galleryViewportgallerylab2122.addEventListener('touchstart', function(event) {
touchstartXgallerylab2122 = event.changedTouches[0].screenX
});
galleryViewportgallerylab2122.addEventListener('touchend', function(event) {
touchendXgallerylab2122 = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerylab2122, touchendXgallerylab2122);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerylab2122.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Conversation2010-01-01T00:00:00+00:002010-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/conversation/<p>Action vidéo interactive</p>
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe
src="https://player.vimeo.com/video/168189615?h=4250ca05b2&title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script><div id="galleryconversation" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryconversationimage0" class="gallery__viewport__image" src="/arts/conversation/gallery/conversation_1.jpg" alt="Photo d'archive"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryconversationimage0"
aria-label="Voir l'image "Photo d'archive""
type="button"
>
<img class="gallery__selector__image" src="/arts/conversation/gallery/conversation_1.jpg" alt="Photo d'archive"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryconversation", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryconversation", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryconversation", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryconversation", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryconversation = document.querySelectorAll("#galleryconversation .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryconversation.length; i++) {
// Click
galleryButtonsgalleryconversation[i].addEventListener("click", function(event) {
displayImageWithButton("galleryconversation", this);
});
// Focus In
galleryButtonsgalleryconversation[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryconversation", displayedImages[i]);
}
}
displayImageWithButton("galleryconversation", this);
}
});
// Focus Out
galleryButtonsgalleryconversation[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryconversation", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryconversation", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryconversation = document.querySelector("#galleryconversation .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryconversation.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryconversation = document.querySelector("#galleryconversation .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryconversation.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryconversation = document.querySelector("#galleryconversation .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryconversation.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryconversation", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryconversation", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryconversation", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryconversation = 0;
let touchendXgalleryconversation = 0;
const galleryViewportgalleryconversation = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryconversation !== undefined) {
galleryViewportgalleryconversation.addEventListener('touchstart', function(event) {
touchstartXgalleryconversation = event.changedTouches[0].screenX
});
galleryViewportgalleryconversation.addEventListener('touchend', function(event) {
touchendXgalleryconversation = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryconversation, touchendXgalleryconversation);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryconversation.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Nuit urbaine électro2010-01-01T00:00:00+00:002010-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/nuit-urbaine-electro/<div id="gallerynuiturbaineelectro" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerynuiturbaineelectroimage0" class="gallery__viewport__image" src="/arts/nuit-urbaine-electro/gallery/nuiturbaine_1.jpg" alt="Photo d'archive"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerynuiturbaineelectroimage0"
aria-label="Voir l'image "Photo d'archive""
type="button"
>
<img class="gallery__selector__image" src="/arts/nuit-urbaine-electro/gallery/nuiturbaine_1.jpg" alt="Photo d'archive"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerynuiturbaineelectro", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerynuiturbaineelectro", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerynuiturbaineelectro", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerynuiturbaineelectro", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerynuiturbaineelectro = document.querySelectorAll("#gallerynuiturbaineelectro .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerynuiturbaineelectro.length; i++) {
// Click
galleryButtonsgallerynuiturbaineelectro[i].addEventListener("click", function(event) {
displayImageWithButton("gallerynuiturbaineelectro", this);
});
// Focus In
galleryButtonsgallerynuiturbaineelectro[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerynuiturbaineelectro", displayedImages[i]);
}
}
displayImageWithButton("gallerynuiturbaineelectro", this);
}
});
// Focus Out
galleryButtonsgallerynuiturbaineelectro[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerynuiturbaineelectro", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerynuiturbaineelectro", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerynuiturbaineelectro = document.querySelector("#gallerynuiturbaineelectro .gallery__viewport__controls__nav-button--left");
previousImageButtongallerynuiturbaineelectro.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerynuiturbaineelectro = document.querySelector("#gallerynuiturbaineelectro .gallery__viewport__controls__nav-button--right");
nextImageButtongallerynuiturbaineelectro.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerynuiturbaineelectro = document.querySelector("#gallerynuiturbaineelectro .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerynuiturbaineelectro.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerynuiturbaineelectro", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerynuiturbaineelectro", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerynuiturbaineelectro", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerynuiturbaineelectro = 0;
let touchendXgallerynuiturbaineelectro = 0;
const galleryViewportgallerynuiturbaineelectro = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerynuiturbaineelectro !== undefined) {
galleryViewportgallerynuiturbaineelectro.addEventListener('touchstart', function(event) {
touchstartXgallerynuiturbaineelectro = event.changedTouches[0].screenX
});
galleryViewportgallerynuiturbaineelectro.addEventListener('touchend', function(event) {
touchendXgallerynuiturbaineelectro = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerynuiturbaineelectro, touchendXgallerynuiturbaineelectro);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerynuiturbaineelectro.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Tu me plais!2010-01-01T00:00:00+00:002010-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/tu-me-plais/<p>Tissu, écran LCD, caméra web, ordinateur <br />
45cm X 45cm X 90cm <br />
2010</p>
<div id="gallerytumeplais" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerytumeplaisimage0" class="gallery__viewport__image" src="/arts/tu-me-plais/gallery/tumeplais_1.jpg" alt="Photo d'archive: 1"/>
<img id="gallerytumeplaisimage1" class="gallery__viewport__image" src="/arts/tu-me-plais/gallery/tumeplais_2.jpg" alt="Photo d'archive: 2"/>
<img id="gallerytumeplaisimage2" class="gallery__viewport__image" src="/arts/tu-me-plais/gallery/tumeplais_3.jpg" alt="Photo d'archive: 3"/>
<img id="gallerytumeplaisimage3" class="gallery__viewport__image" src="/arts/tu-me-plais/gallery/tumeplais_4.jpg" alt="Photo d'archive: 4"/>
<img id="gallerytumeplaisimage4" class="gallery__viewport__image" src="/arts/tu-me-plais/gallery/tumeplais_5.jpg" alt="Photo d'archive: 5"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerytumeplaisimage0"
aria-label="Voir l'image "Photo d'archive: 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/tu-me-plais/gallery/tumeplais_1.jpg" alt="Photo d'archive: 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerytumeplaisimage1"
aria-label="Voir l'image "Photo d'archive: 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/tu-me-plais/gallery/tumeplais_2.jpg" alt="Photo d'archive: 2"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerytumeplaisimage2"
aria-label="Voir l'image "Photo d'archive: 3""
type="button"
>
<img class="gallery__selector__image" src="/arts/tu-me-plais/gallery/tumeplais_3.jpg" alt="Photo d'archive: 3"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerytumeplaisimage3"
aria-label="Voir l'image "Photo d'archive: 4""
type="button"
>
<img class="gallery__selector__image" src="/arts/tu-me-plais/gallery/tumeplais_4.jpg" alt="Photo d'archive: 4"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerytumeplaisimage4"
aria-label="Voir l'image "Photo d'archive: 5""
type="button"
>
<img class="gallery__selector__image" src="/arts/tu-me-plais/gallery/tumeplais_5.jpg" alt="Photo d'archive: 5"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerytumeplais", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerytumeplais", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerytumeplais", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerytumeplais", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerytumeplais = document.querySelectorAll("#gallerytumeplais .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerytumeplais.length; i++) {
// Click
galleryButtonsgallerytumeplais[i].addEventListener("click", function(event) {
displayImageWithButton("gallerytumeplais", this);
});
// Focus In
galleryButtonsgallerytumeplais[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerytumeplais", displayedImages[i]);
}
}
displayImageWithButton("gallerytumeplais", this);
}
});
// Focus Out
galleryButtonsgallerytumeplais[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerytumeplais", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerytumeplais", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerytumeplais = document.querySelector("#gallerytumeplais .gallery__viewport__controls__nav-button--left");
previousImageButtongallerytumeplais.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerytumeplais = document.querySelector("#gallerytumeplais .gallery__viewport__controls__nav-button--right");
nextImageButtongallerytumeplais.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerytumeplais = document.querySelector("#gallerytumeplais .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerytumeplais.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerytumeplais", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerytumeplais", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerytumeplais", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerytumeplais = 0;
let touchendXgallerytumeplais = 0;
const galleryViewportgallerytumeplais = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerytumeplais !== undefined) {
galleryViewportgallerytumeplais.addEventListener('touchstart', function(event) {
touchstartXgallerytumeplais = event.changedTouches[0].screenX
});
galleryViewportgallerytumeplais.addEventListener('touchend', function(event) {
touchendXgallerytumeplais = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerytumeplais, touchendXgallerytumeplais);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerytumeplais.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Zone de confort2010-01-01T00:00:00+00:002010-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/zone-de-confort/<p>Écran LCD, caméra web, détecteur de distance, Arduino, cadre en bois, ordinateur <br />
40cm X 30cm <br />
2010</p>
<div id="galleryzonedeconfort" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryzonedeconfortimage0" class="gallery__viewport__image" src="/arts/zone-de-confort/gallery/zone_1.jpg" alt="Photo d'archive: 1"/>
<img id="galleryzonedeconfortimage1" class="gallery__viewport__image" src="/arts/zone-de-confort/gallery/zone_2.jpg" alt="Photo d'archive: 2"/>
<img id="galleryzonedeconfortimage2" class="gallery__viewport__image" src="/arts/zone-de-confort/gallery/zone_3.jpg" alt="Photo d'archive: 3"/>
<img id="galleryzonedeconfortimage3" class="gallery__viewport__image" src="/arts/zone-de-confort/gallery/zone_4.jpg" alt="Photo d'archive: 4"/>
<img id="galleryzonedeconfortimage4" class="gallery__viewport__image" src="/arts/zone-de-confort/gallery/zone_5.jpg" alt="Photo d'archive: 5"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryzonedeconfortimage0"
aria-label="Voir l'image "Photo d'archive: 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/zone-de-confort/gallery/zone_1.jpg" alt="Photo d'archive: 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryzonedeconfortimage1"
aria-label="Voir l'image "Photo d'archive: 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/zone-de-confort/gallery/zone_2.jpg" alt="Photo d'archive: 2"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryzonedeconfortimage2"
aria-label="Voir l'image "Photo d'archive: 3""
type="button"
>
<img class="gallery__selector__image" src="/arts/zone-de-confort/gallery/zone_3.jpg" alt="Photo d'archive: 3"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryzonedeconfortimage3"
aria-label="Voir l'image "Photo d'archive: 4""
type="button"
>
<img class="gallery__selector__image" src="/arts/zone-de-confort/gallery/zone_4.jpg" alt="Photo d'archive: 4"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryzonedeconfortimage4"
aria-label="Voir l'image "Photo d'archive: 5""
type="button"
>
<img class="gallery__selector__image" src="/arts/zone-de-confort/gallery/zone_5.jpg" alt="Photo d'archive: 5"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryzonedeconfort", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryzonedeconfort", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryzonedeconfort", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryzonedeconfort", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryzonedeconfort = document.querySelectorAll("#galleryzonedeconfort .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryzonedeconfort.length; i++) {
// Click
galleryButtonsgalleryzonedeconfort[i].addEventListener("click", function(event) {
displayImageWithButton("galleryzonedeconfort", this);
});
// Focus In
galleryButtonsgalleryzonedeconfort[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryzonedeconfort", displayedImages[i]);
}
}
displayImageWithButton("galleryzonedeconfort", this);
}
});
// Focus Out
galleryButtonsgalleryzonedeconfort[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryzonedeconfort", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryzonedeconfort", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryzonedeconfort = document.querySelector("#galleryzonedeconfort .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryzonedeconfort.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryzonedeconfort = document.querySelector("#galleryzonedeconfort .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryzonedeconfort.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryzonedeconfort = document.querySelector("#galleryzonedeconfort .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryzonedeconfort.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryzonedeconfort", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryzonedeconfort", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryzonedeconfort", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryzonedeconfort = 0;
let touchendXgalleryzonedeconfort = 0;
const galleryViewportgalleryzonedeconfort = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryzonedeconfort !== undefined) {
galleryViewportgalleryzonedeconfort.addEventListener('touchstart', function(event) {
touchstartXgalleryzonedeconfort = event.changedTouches[0].screenX
});
galleryViewportgalleryzonedeconfort.addEventListener('touchend', function(event) {
touchendXgalleryzonedeconfort = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryzonedeconfort, touchendXgalleryzonedeconfort);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryzonedeconfort.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>L'homme d'affaire2009-01-01T00:00:00+00:002009-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/lhomme-daffaire/<p>Acier, bois de balsa <br />
60cm X 60cm X 90cm <br />
2009</p>
<div id="galleryouiouijesuisloeuvre" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryouiouijesuisloeuvreimage0" class="gallery__viewport__image" src="/arts/lhomme-daffaire/gallery/lhommedaffaire_1.jpg" alt="Photo d'archive: 1"/>
<img id="galleryouiouijesuisloeuvreimage1" class="gallery__viewport__image" src="/arts/lhomme-daffaire/gallery/lhommedaffaire_2.jpg" alt="Photo d'archive: 2"/>
<img id="galleryouiouijesuisloeuvreimage2" class="gallery__viewport__image" src="/arts/lhomme-daffaire/gallery/lhommedaffaire_4.jpg" alt="Photo d'archive: 3"/>
<img id="galleryouiouijesuisloeuvreimage3" class="gallery__viewport__image" src="/arts/lhomme-daffaire/gallery/lhommedaffaire_5.jpg" alt="Photo d'archive: 4"/>
<img id="galleryouiouijesuisloeuvreimage4" class="gallery__viewport__image" src="/arts/lhomme-daffaire/gallery/lhommedaffaire_6.jpg" alt="Photo d'archive: 5"/>
<img id="galleryouiouijesuisloeuvreimage5" class="gallery__viewport__image" src="/arts/lhomme-daffaire/gallery/lhommedaffaire_7.jpg" alt="Photo d'archive: 6"/>
<img id="galleryouiouijesuisloeuvreimage6" class="gallery__viewport__image" src="/arts/lhomme-daffaire/gallery/lhommedaffaire_8.jpg" alt="Photo d'archive: 7"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryouiouijesuisloeuvreimage0"
aria-label="Voir l'image "Photo d'archive: 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/lhomme-daffaire/gallery/lhommedaffaire_1.jpg" alt="Photo d'archive: 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryouiouijesuisloeuvreimage1"
aria-label="Voir l'image "Photo d'archive: 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/lhomme-daffaire/gallery/lhommedaffaire_2.jpg" alt="Photo d'archive: 2"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryouiouijesuisloeuvreimage2"
aria-label="Voir l'image "Photo d'archive: 3""
type="button"
>
<img class="gallery__selector__image" src="/arts/lhomme-daffaire/gallery/lhommedaffaire_4.jpg" alt="Photo d'archive: 3"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryouiouijesuisloeuvreimage3"
aria-label="Voir l'image "Photo d'archive: 4""
type="button"
>
<img class="gallery__selector__image" src="/arts/lhomme-daffaire/gallery/lhommedaffaire_5.jpg" alt="Photo d'archive: 4"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryouiouijesuisloeuvreimage4"
aria-label="Voir l'image "Photo d'archive: 5""
type="button"
>
<img class="gallery__selector__image" src="/arts/lhomme-daffaire/gallery/lhommedaffaire_6.jpg" alt="Photo d'archive: 5"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryouiouijesuisloeuvreimage5"
aria-label="Voir l'image "Photo d'archive: 6""
type="button"
>
<img class="gallery__selector__image" src="/arts/lhomme-daffaire/gallery/lhommedaffaire_7.jpg" alt="Photo d'archive: 6"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryouiouijesuisloeuvreimage6"
aria-label="Voir l'image "Photo d'archive: 7""
type="button"
>
<img class="gallery__selector__image" src="/arts/lhomme-daffaire/gallery/lhommedaffaire_8.jpg" alt="Photo d'archive: 7"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryouiouijesuisloeuvre", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryouiouijesuisloeuvre", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryouiouijesuisloeuvre", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryouiouijesuisloeuvre", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryouiouijesuisloeuvre = document.querySelectorAll("#galleryouiouijesuisloeuvre .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryouiouijesuisloeuvre.length; i++) {
// Click
galleryButtonsgalleryouiouijesuisloeuvre[i].addEventListener("click", function(event) {
displayImageWithButton("galleryouiouijesuisloeuvre", this);
});
// Focus In
galleryButtonsgalleryouiouijesuisloeuvre[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryouiouijesuisloeuvre", displayedImages[i]);
}
}
displayImageWithButton("galleryouiouijesuisloeuvre", this);
}
});
// Focus Out
galleryButtonsgalleryouiouijesuisloeuvre[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryouiouijesuisloeuvre", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryouiouijesuisloeuvre", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryouiouijesuisloeuvre = document.querySelector("#galleryouiouijesuisloeuvre .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryouiouijesuisloeuvre.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryouiouijesuisloeuvre = document.querySelector("#galleryouiouijesuisloeuvre .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryouiouijesuisloeuvre.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryouiouijesuisloeuvre = document.querySelector("#galleryouiouijesuisloeuvre .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryouiouijesuisloeuvre.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryouiouijesuisloeuvre", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryouiouijesuisloeuvre", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryouiouijesuisloeuvre", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryouiouijesuisloeuvre = 0;
let touchendXgalleryouiouijesuisloeuvre = 0;
const galleryViewportgalleryouiouijesuisloeuvre = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryouiouijesuisloeuvre !== undefined) {
galleryViewportgalleryouiouijesuisloeuvre.addEventListener('touchstart', function(event) {
touchstartXgalleryouiouijesuisloeuvre = event.changedTouches[0].screenX
});
galleryViewportgalleryouiouijesuisloeuvre.addEventListener('touchend', function(event) {
touchendXgalleryouiouijesuisloeuvre = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryouiouijesuisloeuvre, touchendXgalleryouiouijesuisloeuvre);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryouiouijesuisloeuvre.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Oui oui! Je suis l'oeuvre!2009-01-01T00:00:00+00:002009-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/oui-oui-je-suis-loeuvre/<p>Oui oui! Je suis l’oeuvre! <br />
Écran LCD, caméra web, cadre en bois, ordinateur <br />
40cm X 30cm <br />
2009</p>
<div id="galleryouiouijesuisloeuvre" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryouiouijesuisloeuvreimage0" class="gallery__viewport__image" src="/arts/oui-oui-je-suis-loeuvre/gallery/ouiouijesuisloeuvre_1.jpg" alt="Photo d'archive"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryouiouijesuisloeuvreimage0"
aria-label="Voir l'image "Photo d'archive""
type="button"
>
<img class="gallery__selector__image" src="/arts/oui-oui-je-suis-loeuvre/gallery/ouiouijesuisloeuvre_1.jpg" alt="Photo d'archive"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryouiouijesuisloeuvre", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryouiouijesuisloeuvre", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryouiouijesuisloeuvre", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryouiouijesuisloeuvre", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryouiouijesuisloeuvre = document.querySelectorAll("#galleryouiouijesuisloeuvre .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryouiouijesuisloeuvre.length; i++) {
// Click
galleryButtonsgalleryouiouijesuisloeuvre[i].addEventListener("click", function(event) {
displayImageWithButton("galleryouiouijesuisloeuvre", this);
});
// Focus In
galleryButtonsgalleryouiouijesuisloeuvre[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryouiouijesuisloeuvre", displayedImages[i]);
}
}
displayImageWithButton("galleryouiouijesuisloeuvre", this);
}
});
// Focus Out
galleryButtonsgalleryouiouijesuisloeuvre[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryouiouijesuisloeuvre", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryouiouijesuisloeuvre", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryouiouijesuisloeuvre = document.querySelector("#galleryouiouijesuisloeuvre .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryouiouijesuisloeuvre.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryouiouijesuisloeuvre = document.querySelector("#galleryouiouijesuisloeuvre .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryouiouijesuisloeuvre.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryouiouijesuisloeuvre = document.querySelector("#galleryouiouijesuisloeuvre .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryouiouijesuisloeuvre.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryouiouijesuisloeuvre", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryouiouijesuisloeuvre", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryouiouijesuisloeuvre", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryouiouijesuisloeuvre = 0;
let touchendXgalleryouiouijesuisloeuvre = 0;
const galleryViewportgalleryouiouijesuisloeuvre = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryouiouijesuisloeuvre !== undefined) {
galleryViewportgalleryouiouijesuisloeuvre.addEventListener('touchstart', function(event) {
touchstartXgalleryouiouijesuisloeuvre = event.changedTouches[0].screenX
});
galleryViewportgalleryouiouijesuisloeuvre.addEventListener('touchend', function(event) {
touchendXgalleryouiouijesuisloeuvre = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryouiouijesuisloeuvre, touchendXgalleryouiouijesuisloeuvre);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryouiouijesuisloeuvre.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Pixel V.1.02009-01-01T00:00:00+00:002009-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/pixel-v10/<p>Pixel V.1.0 <br />
Cadre en bois, plexiglass, électronique, arduino, caméra web, ordinateur <br />
2009</p>
<div id="gallerypixelv10" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerypixelv10image0" class="gallery__viewport__image" src="/arts/pixel-v10/gallery/pixelv10_1.jpg" alt="Photo d'archive"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerypixelv10image0"
aria-label="Voir l'image "Photo d'archive""
type="button"
>
<img class="gallery__selector__image" src="/arts/pixel-v10/gallery/pixelv10_1.jpg" alt="Photo d'archive"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerypixelv10", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerypixelv10", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerypixelv10", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerypixelv10", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerypixelv10 = document.querySelectorAll("#gallerypixelv10 .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerypixelv10.length; i++) {
// Click
galleryButtonsgallerypixelv10[i].addEventListener("click", function(event) {
displayImageWithButton("gallerypixelv10", this);
});
// Focus In
galleryButtonsgallerypixelv10[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerypixelv10", displayedImages[i]);
}
}
displayImageWithButton("gallerypixelv10", this);
}
});
// Focus Out
galleryButtonsgallerypixelv10[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerypixelv10", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerypixelv10", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerypixelv10 = document.querySelector("#gallerypixelv10 .gallery__viewport__controls__nav-button--left");
previousImageButtongallerypixelv10.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerypixelv10 = document.querySelector("#gallerypixelv10 .gallery__viewport__controls__nav-button--right");
nextImageButtongallerypixelv10.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerypixelv10 = document.querySelector("#gallerypixelv10 .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerypixelv10.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerypixelv10", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerypixelv10", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerypixelv10", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerypixelv10 = 0;
let touchendXgallerypixelv10 = 0;
const galleryViewportgallerypixelv10 = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerypixelv10 !== undefined) {
galleryViewportgallerypixelv10.addEventListener('touchstart', function(event) {
touchstartXgallerypixelv10 = event.changedTouches[0].screenX
});
galleryViewportgallerypixelv10.addEventListener('touchend', function(event) {
touchendXgallerypixelv10 = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerypixelv10, touchendXgallerypixelv10);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerypixelv10.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Je te vois!2008-01-01T00:00:00+00:002008-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/je-te-vois/<p>Je te vois! <br />
Carton, DEL <br />
20cm X 10cm 15cm(une caméra) <br />
2008</p>
<div id="galleryjetevois" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="galleryjetevoisimage0" class="gallery__viewport__image" src="/arts/je-te-vois/gallery/jetevois_1.jpg" alt="Photo d'archive: 1"/>
<img id="galleryjetevoisimage1" class="gallery__viewport__image" src="/arts/je-te-vois/gallery/jetevois_2.jpg" alt="Photo d'archive: 2"/>
<img id="galleryjetevoisimage2" class="gallery__viewport__image" src="/arts/je-te-vois/gallery/jetevois_3.jpg" alt="Photo d'archive: 3"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryjetevoisimage0"
aria-label="Voir l'image "Photo d'archive: 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/je-te-vois/gallery/jetevois_1.jpg" alt="Photo d'archive: 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryjetevoisimage1"
aria-label="Voir l'image "Photo d'archive: 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/je-te-vois/gallery/jetevois_2.jpg" alt="Photo d'archive: 2"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="galleryjetevoisimage2"
aria-label="Voir l'image "Photo d'archive: 3""
type="button"
>
<img class="gallery__selector__image" src="/arts/je-te-vois/gallery/jetevois_3.jpg" alt="Photo d'archive: 3"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryjetevois", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryjetevois", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryjetevois", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryjetevois", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgalleryjetevois = document.querySelectorAll("#galleryjetevois .gallery__selector__button");
for (let i = 0; i < galleryButtonsgalleryjetevois.length; i++) {
// Click
galleryButtonsgalleryjetevois[i].addEventListener("click", function(event) {
displayImageWithButton("galleryjetevois", this);
});
// Focus In
galleryButtonsgalleryjetevois[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryjetevois", displayedImages[i]);
}
}
displayImageWithButton("galleryjetevois", this);
}
});
// Focus Out
galleryButtonsgalleryjetevois[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("galleryjetevois", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("galleryjetevois", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongalleryjetevois = document.querySelector("#galleryjetevois .gallery__viewport__controls__nav-button--left");
previousImageButtongalleryjetevois.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongalleryjetevois = document.querySelector("#galleryjetevois .gallery__viewport__controls__nav-button--right");
nextImageButtongalleryjetevois.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongalleryjetevois = document.querySelector("#galleryjetevois .gallery__viewport__controls__nav-close-btn");
closeImageButtongalleryjetevois.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("galleryjetevois", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("galleryjetevois", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("galleryjetevois", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgalleryjetevois = 0;
let touchendXgalleryjetevois = 0;
const galleryViewportgalleryjetevois = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgalleryjetevois !== undefined) {
galleryViewportgalleryjetevois.addEventListener('touchstart', function(event) {
touchstartXgalleryjetevois = event.changedTouches[0].screenX
});
galleryViewportgalleryjetevois.addEventListener('touchend', function(event) {
touchendXgalleryjetevois = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgalleryjetevois, touchendXgalleryjetevois);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgalleryjetevois.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Le chat2008-01-01T00:00:00+00:002008-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/le-chat/<p>Le chat <br />
Aérosol acrylique sur planche de gypse <br />
120cm X 240cm <br />
2008</p>
<div id="gallerylechat" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerylechatimage0" class="gallery__viewport__image" src="/arts/le-chat/gallery/lechat_1.jpg" alt="Photo d'archive: 1"/>
<img id="gallerylechatimage1" class="gallery__viewport__image" src="/arts/le-chat/gallery/lechat_2.jpg" alt="Photo d'archive: 2"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerylechatimage0"
aria-label="Voir l'image "Photo d'archive: 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/le-chat/gallery/lechat_1.jpg" alt="Photo d'archive: 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerylechatimage1"
aria-label="Voir l'image "Photo d'archive: 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/le-chat/gallery/lechat_2.jpg" alt="Photo d'archive: 2"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerylechat", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerylechat", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerylechat", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerylechat", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerylechat = document.querySelectorAll("#gallerylechat .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerylechat.length; i++) {
// Click
galleryButtonsgallerylechat[i].addEventListener("click", function(event) {
displayImageWithButton("gallerylechat", this);
});
// Focus In
galleryButtonsgallerylechat[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerylechat", displayedImages[i]);
}
}
displayImageWithButton("gallerylechat", this);
}
});
// Focus Out
galleryButtonsgallerylechat[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerylechat", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerylechat", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerylechat = document.querySelector("#gallerylechat .gallery__viewport__controls__nav-button--left");
previousImageButtongallerylechat.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerylechat = document.querySelector("#gallerylechat .gallery__viewport__controls__nav-button--right");
nextImageButtongallerylechat.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerylechat = document.querySelector("#gallerylechat .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerylechat.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerylechat", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerylechat", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerylechat", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerylechat = 0;
let touchendXgallerylechat = 0;
const galleryViewportgallerylechat = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerylechat !== undefined) {
galleryViewportgallerylechat.addEventListener('touchstart', function(event) {
touchstartXgallerylechat = event.changedTouches[0].screenX
});
galleryViewportgallerylechat.addEventListener('touchend', function(event) {
touchendXgallerylechat = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerylechat, touchendXgallerylechat);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerylechat.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Pixel V.0.52008-01-01T00:00:00+00:002008-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/pixel-v05/<p>Pixel V.0.5 <br />
Électroniques <br />
30cm X 30cm <br />
2008</p>
<div id="gallerypixelv05" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerypixelv05image0" class="gallery__viewport__image" src="/arts/pixel-v05/gallery/pixelv05_1.jpg" alt="Photo d'archive"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerypixelv05image0"
aria-label="Voir l'image "Photo d'archive""
type="button"
>
<img class="gallery__selector__image" src="/arts/pixel-v05/gallery/pixelv05_1.jpg" alt="Photo d'archive"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerypixelv05", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerypixelv05", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerypixelv05", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerypixelv05", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerypixelv05 = document.querySelectorAll("#gallerypixelv05 .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerypixelv05.length; i++) {
// Click
galleryButtonsgallerypixelv05[i].addEventListener("click", function(event) {
displayImageWithButton("gallerypixelv05", this);
});
// Focus In
galleryButtonsgallerypixelv05[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerypixelv05", displayedImages[i]);
}
}
displayImageWithButton("gallerypixelv05", this);
}
});
// Focus Out
galleryButtonsgallerypixelv05[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerypixelv05", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerypixelv05", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerypixelv05 = document.querySelector("#gallerypixelv05 .gallery__viewport__controls__nav-button--left");
previousImageButtongallerypixelv05.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerypixelv05 = document.querySelector("#gallerypixelv05 .gallery__viewport__controls__nav-button--right");
nextImageButtongallerypixelv05.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerypixelv05 = document.querySelector("#gallerypixelv05 .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerypixelv05.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerypixelv05", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerypixelv05", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerypixelv05", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerypixelv05 = 0;
let touchendXgallerypixelv05 = 0;
const galleryViewportgallerypixelv05 = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerypixelv05 !== undefined) {
galleryViewportgallerypixelv05.addEventListener('touchstart', function(event) {
touchstartXgallerypixelv05 = event.changedTouches[0].screenX
});
galleryViewportgallerypixelv05.addEventListener('touchend', function(event) {
touchendXgallerypixelv05 = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerypixelv05, touchendXgallerypixelv05);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerypixelv05.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Pour Julie2008-01-01T00:00:00+00:002008-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/pour-julie/<p>Aérosol acrylique sur toile <br />
100cmX 75cm <br />
2008</p>
<div id="gallerypourjulie" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerypourjulieimage0" class="gallery__viewport__image" src="/arts/pour-julie/gallery/pourjulie_1.jpg" alt="Photo d'archive"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerypourjulieimage0"
aria-label="Voir l'image "Photo d'archive""
type="button"
>
<img class="gallery__selector__image" src="/arts/pour-julie/gallery/pourjulie_1.jpg" alt="Photo d'archive"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerypourjulie", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerypourjulie", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerypourjulie", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerypourjulie", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerypourjulie = document.querySelectorAll("#gallerypourjulie .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerypourjulie.length; i++) {
// Click
galleryButtonsgallerypourjulie[i].addEventListener("click", function(event) {
displayImageWithButton("gallerypourjulie", this);
});
// Focus In
galleryButtonsgallerypourjulie[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerypourjulie", displayedImages[i]);
}
}
displayImageWithButton("gallerypourjulie", this);
}
});
// Focus Out
galleryButtonsgallerypourjulie[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerypourjulie", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerypourjulie", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerypourjulie = document.querySelector("#gallerypourjulie .gallery__viewport__controls__nav-button--left");
previousImageButtongallerypourjulie.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerypourjulie = document.querySelector("#gallerypourjulie .gallery__viewport__controls__nav-button--right");
nextImageButtongallerypourjulie.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerypourjulie = document.querySelector("#gallerypourjulie .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerypourjulie.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerypourjulie", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerypourjulie", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerypourjulie", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerypourjulie = 0;
let touchendXgallerypourjulie = 0;
const galleryViewportgallerypourjulie = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerypourjulie !== undefined) {
galleryViewportgallerypourjulie.addEventListener('touchstart', function(event) {
touchstartXgallerypourjulie = event.changedTouches[0].screenX
});
galleryViewportgallerypourjulie.addEventListener('touchend', function(event) {
touchendXgallerypourjulie = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerypourjulie, touchendXgallerypourjulie);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerypourjulie.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Sans titre2008-01-01T00:00:00+00:002008-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/sans-titre/<p>Projection réactive</p>
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe
src="https://player.vimeo.com/video/168226751?h=4250ca05b2&title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script><div id="gallerysanstitre" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerysanstitreimage0" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_01.jpg" alt="Photo d'archive: 1"/>
<img id="gallerysanstitreimage1" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_02.jpg" alt="Photo d'archive: 2"/>
<img id="gallerysanstitreimage2" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_03.jpg" alt="Photo d'archive: 3"/>
<img id="gallerysanstitreimage3" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_04.jpg" alt="Photo d'archive: 4"/>
<img id="gallerysanstitreimage4" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_05.jpg" alt="Photo d'archive: 5"/>
<img id="gallerysanstitreimage5" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_06.jpg" alt="Photo d'archive: 6"/>
<img id="gallerysanstitreimage6" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_07.jpg" alt="Photo d'archive: 7"/>
<img id="gallerysanstitreimage7" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_08.jpg" alt="Photo d'archive: 8"/>
<img id="gallerysanstitreimage8" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_09.jpg" alt="Photo d'archive: 9"/>
<img id="gallerysanstitreimage9" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_10.jpg" alt="Photo d'archive: 10"/>
<img id="gallerysanstitreimage10" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_11.jpg" alt="Photo d'archive: 11"/>
<img id="gallerysanstitreimage11" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_12.jpg" alt="Photo d'archive: 12"/>
<img id="gallerysanstitreimage12" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_13.jpg" alt="Photo d'archive: 13"/>
<img id="gallerysanstitreimage13" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_14.jpg" alt="Photo d'archive: 14"/>
<img id="gallerysanstitreimage14" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_15.jpg" alt="Photo d'archive: 15"/>
<img id="gallerysanstitreimage15" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_16.jpg" alt="Photo d'archive: 16"/>
<img id="gallerysanstitreimage16" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_17.jpg" alt="Photo d'archive: 17"/>
<img id="gallerysanstitreimage17" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_18.jpg" alt="Photo d'archive: 18"/>
<img id="gallerysanstitreimage18" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_19.jpg" alt="Photo d'archive: 19"/>
<img id="gallerysanstitreimage19" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_20.jpg" alt="Photo d'archive: 20"/>
<img id="gallerysanstitreimage20" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_21.jpg" alt="Photo d'archive: 21"/>
<img id="gallerysanstitreimage21" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_22.jpg" alt="Photo d'archive: 22"/>
<img id="gallerysanstitreimage22" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_23.jpg" alt="Photo d'archive: 23"/>
<img id="gallerysanstitreimage23" class="gallery__viewport__image" src="/arts/sans-titre/gallery/sanstitre_24.jpg" alt="Photo d'archive: 24"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage0"
aria-label="Voir l'image "Photo d'archive: 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_01.jpg" alt="Photo d'archive: 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage1"
aria-label="Voir l'image "Photo d'archive: 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_02.jpg" alt="Photo d'archive: 2"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage2"
aria-label="Voir l'image "Photo d'archive: 3""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_03.jpg" alt="Photo d'archive: 3"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage3"
aria-label="Voir l'image "Photo d'archive: 4""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_04.jpg" alt="Photo d'archive: 4"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage4"
aria-label="Voir l'image "Photo d'archive: 5""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_05.jpg" alt="Photo d'archive: 5"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage5"
aria-label="Voir l'image "Photo d'archive: 6""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_06.jpg" alt="Photo d'archive: 6"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage6"
aria-label="Voir l'image "Photo d'archive: 7""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_07.jpg" alt="Photo d'archive: 7"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage7"
aria-label="Voir l'image "Photo d'archive: 8""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_08.jpg" alt="Photo d'archive: 8"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage8"
aria-label="Voir l'image "Photo d'archive: 9""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_09.jpg" alt="Photo d'archive: 9"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage9"
aria-label="Voir l'image "Photo d'archive: 10""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_10.jpg" alt="Photo d'archive: 10"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage10"
aria-label="Voir l'image "Photo d'archive: 11""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_11.jpg" alt="Photo d'archive: 11"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage11"
aria-label="Voir l'image "Photo d'archive: 12""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_12.jpg" alt="Photo d'archive: 12"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage12"
aria-label="Voir l'image "Photo d'archive: 13""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_13.jpg" alt="Photo d'archive: 13"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage13"
aria-label="Voir l'image "Photo d'archive: 14""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_14.jpg" alt="Photo d'archive: 14"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage14"
aria-label="Voir l'image "Photo d'archive: 15""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_15.jpg" alt="Photo d'archive: 15"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage15"
aria-label="Voir l'image "Photo d'archive: 16""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_16.jpg" alt="Photo d'archive: 16"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage16"
aria-label="Voir l'image "Photo d'archive: 17""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_17.jpg" alt="Photo d'archive: 17"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage17"
aria-label="Voir l'image "Photo d'archive: 18""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_18.jpg" alt="Photo d'archive: 18"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage18"
aria-label="Voir l'image "Photo d'archive: 19""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_19.jpg" alt="Photo d'archive: 19"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage19"
aria-label="Voir l'image "Photo d'archive: 20""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_20.jpg" alt="Photo d'archive: 20"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage20"
aria-label="Voir l'image "Photo d'archive: 21""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_21.jpg" alt="Photo d'archive: 21"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage21"
aria-label="Voir l'image "Photo d'archive: 22""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_22.jpg" alt="Photo d'archive: 22"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage22"
aria-label="Voir l'image "Photo d'archive: 23""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_23.jpg" alt="Photo d'archive: 23"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysanstitreimage23"
aria-label="Voir l'image "Photo d'archive: 24""
type="button"
>
<img class="gallery__selector__image" src="/arts/sans-titre/gallery/sanstitre_24.jpg" alt="Photo d'archive: 24"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerysanstitre", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerysanstitre", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerysanstitre", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerysanstitre", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerysanstitre = document.querySelectorAll("#gallerysanstitre .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerysanstitre.length; i++) {
// Click
galleryButtonsgallerysanstitre[i].addEventListener("click", function(event) {
displayImageWithButton("gallerysanstitre", this);
});
// Focus In
galleryButtonsgallerysanstitre[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerysanstitre", displayedImages[i]);
}
}
displayImageWithButton("gallerysanstitre", this);
}
});
// Focus Out
galleryButtonsgallerysanstitre[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerysanstitre", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerysanstitre", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerysanstitre = document.querySelector("#gallerysanstitre .gallery__viewport__controls__nav-button--left");
previousImageButtongallerysanstitre.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerysanstitre = document.querySelector("#gallerysanstitre .gallery__viewport__controls__nav-button--right");
nextImageButtongallerysanstitre.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerysanstitre = document.querySelector("#gallerysanstitre .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerysanstitre.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerysanstitre", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerysanstitre", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerysanstitre", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerysanstitre = 0;
let touchendXgallerysanstitre = 0;
const galleryViewportgallerysanstitre = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerysanstitre !== undefined) {
galleryViewportgallerysanstitre.addEventListener('touchstart', function(event) {
touchstartXgallerysanstitre = event.changedTouches[0].screenX
});
galleryViewportgallerysanstitre.addEventListener('touchend', function(event) {
touchendXgallerysanstitre = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerysanstitre, touchendXgallerysanstitre);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerysanstitre.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Touche moi pas!2008-01-01T00:00:00+00:002008-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/touche-moi-pas/<p>tissu, fils, électroniques, ordinateur, trame sonore, haut-parleur <br />
30cm X 60cm X 30cm <br />
2008</p>
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe
src="https://player.vimeo.com/video/168224319?h=4250ca05b2&title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script><div id="gallerytouchemoipas" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerytouchemoipasimage0" class="gallery__viewport__image" src="/arts/touche-moi-pas/gallery/touchemoipas_1.jpg" alt="Photo d'archive: 1"/>
<img id="gallerytouchemoipasimage1" class="gallery__viewport__image" src="/arts/touche-moi-pas/gallery/touchemoipas_2.jpg" alt="Photo d'archive: 2"/>
<img id="gallerytouchemoipasimage2" class="gallery__viewport__image" src="/arts/touche-moi-pas/gallery/touchemoipas_3.jpg" alt="Photo d'archive: 3"/>
<img id="gallerytouchemoipasimage3" class="gallery__viewport__image" src="/arts/touche-moi-pas/gallery/touchemoipas_4.jpg" alt="Photo d'archive: 4"/>
<img id="gallerytouchemoipasimage4" class="gallery__viewport__image" src="/arts/touche-moi-pas/gallery/touchemoipas_5.jpg" alt="Photo d'archive: 5"/>
<img id="gallerytouchemoipasimage5" class="gallery__viewport__image" src="/arts/touche-moi-pas/gallery/touchemoipas_6.jpg" alt="Photo d'archive: 6"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerytouchemoipasimage0"
aria-label="Voir l'image "Photo d'archive: 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/touche-moi-pas/gallery/touchemoipas_1.jpg" alt="Photo d'archive: 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerytouchemoipasimage1"
aria-label="Voir l'image "Photo d'archive: 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/touche-moi-pas/gallery/touchemoipas_2.jpg" alt="Photo d'archive: 2"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerytouchemoipasimage2"
aria-label="Voir l'image "Photo d'archive: 3""
type="button"
>
<img class="gallery__selector__image" src="/arts/touche-moi-pas/gallery/touchemoipas_3.jpg" alt="Photo d'archive: 3"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerytouchemoipasimage3"
aria-label="Voir l'image "Photo d'archive: 4""
type="button"
>
<img class="gallery__selector__image" src="/arts/touche-moi-pas/gallery/touchemoipas_4.jpg" alt="Photo d'archive: 4"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerytouchemoipasimage4"
aria-label="Voir l'image "Photo d'archive: 5""
type="button"
>
<img class="gallery__selector__image" src="/arts/touche-moi-pas/gallery/touchemoipas_5.jpg" alt="Photo d'archive: 5"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerytouchemoipasimage5"
aria-label="Voir l'image "Photo d'archive: 6""
type="button"
>
<img class="gallery__selector__image" src="/arts/touche-moi-pas/gallery/touchemoipas_6.jpg" alt="Photo d'archive: 6"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerytouchemoipas", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerytouchemoipas", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerytouchemoipas", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerytouchemoipas", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerytouchemoipas = document.querySelectorAll("#gallerytouchemoipas .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerytouchemoipas.length; i++) {
// Click
galleryButtonsgallerytouchemoipas[i].addEventListener("click", function(event) {
displayImageWithButton("gallerytouchemoipas", this);
});
// Focus In
galleryButtonsgallerytouchemoipas[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerytouchemoipas", displayedImages[i]);
}
}
displayImageWithButton("gallerytouchemoipas", this);
}
});
// Focus Out
galleryButtonsgallerytouchemoipas[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerytouchemoipas", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerytouchemoipas", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerytouchemoipas = document.querySelector("#gallerytouchemoipas .gallery__viewport__controls__nav-button--left");
previousImageButtongallerytouchemoipas.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerytouchemoipas = document.querySelector("#gallerytouchemoipas .gallery__viewport__controls__nav-button--right");
nextImageButtongallerytouchemoipas.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerytouchemoipas = document.querySelector("#gallerytouchemoipas .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerytouchemoipas.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerytouchemoipas", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerytouchemoipas", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerytouchemoipas", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerytouchemoipas = 0;
let touchendXgallerytouchemoipas = 0;
const galleryViewportgallerytouchemoipas = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerytouchemoipas !== undefined) {
galleryViewportgallerytouchemoipas.addEventListener('touchstart', function(event) {
touchstartXgallerytouchemoipas = event.changedTouches[0].screenX
});
galleryViewportgallerytouchemoipas.addEventListener('touchend', function(event) {
touchendXgallerytouchemoipas = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerytouchemoipas, touchendXgallerytouchemoipas);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerytouchemoipas.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Splurt!2007-01-01T00:00:00+00:002007-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/splurt/<p>Splurt! <br />
Aérosol acrylique sur la rue <br />
20cm X 45cm <br />
2007</p>
<div id="gallerysplurt" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerysplurtimage0" class="gallery__viewport__image" src="/arts/splurt/gallery/splurt_1.jpg" alt="Photo d'archive"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysplurtimage0"
aria-label="Voir l'image "Photo d'archive""
type="button"
>
<img class="gallery__selector__image" src="/arts/splurt/gallery/splurt_1.jpg" alt="Photo d'archive"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerysplurt", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerysplurt", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerysplurt", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerysplurt", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerysplurt = document.querySelectorAll("#gallerysplurt .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerysplurt.length; i++) {
// Click
galleryButtonsgallerysplurt[i].addEventListener("click", function(event) {
displayImageWithButton("gallerysplurt", this);
});
// Focus In
galleryButtonsgallerysplurt[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerysplurt", displayedImages[i]);
}
}
displayImageWithButton("gallerysplurt", this);
}
});
// Focus Out
galleryButtonsgallerysplurt[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerysplurt", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerysplurt", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerysplurt = document.querySelector("#gallerysplurt .gallery__viewport__controls__nav-button--left");
previousImageButtongallerysplurt.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerysplurt = document.querySelector("#gallerysplurt .gallery__viewport__controls__nav-button--right");
nextImageButtongallerysplurt.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerysplurt = document.querySelector("#gallerysplurt .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerysplurt.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerysplurt", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerysplurt", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerysplurt", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerysplurt = 0;
let touchendXgallerysplurt = 0;
const galleryViewportgallerysplurt = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerysplurt !== undefined) {
galleryViewportgallerysplurt.addEventListener('touchstart', function(event) {
touchstartXgallerysplurt = event.changedTouches[0].screenX
});
galleryViewportgallerysplurt.addEventListener('touchend', function(event) {
touchendXgallerysplurt = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerysplurt, touchendXgallerysplurt);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerysplurt.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Game Over2006-01-01T00:00:00+00:002006-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/game-over/<p>Boîte de jeux vidéo, projection, console de jeux <br />
150cm X 120cm X 120cm <br />
2006</p>
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe
src="https://player.vimeo.com/video/186099215?h=4250ca05b2&title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script><div style="padding:56.25% 0 0 0;position:relative;">
<iframe
src="https://player.vimeo.com/video/186099214?h=4250ca05b2&title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script><div id="gallerygameover" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerygameoverimage0" class="gallery__viewport__image" src="/arts/game-over/gallery/gameover_01.jpg" alt="Photo d'archive: 1"/>
<img id="gallerygameoverimage1" class="gallery__viewport__image" src="/arts/game-over/gallery/gameover_02.jpg" alt="Photo d'archive: 2"/>
<img id="gallerygameoverimage2" class="gallery__viewport__image" src="/arts/game-over/gallery/gameover_03.jpg" alt="Photo d'archive: 3"/>
<img id="gallerygameoverimage3" class="gallery__viewport__image" src="/arts/game-over/gallery/gameover_04.jpg" alt="Photo d'archive: 4"/>
<img id="gallerygameoverimage4" class="gallery__viewport__image" src="/arts/game-over/gallery/gameover_05.jpg" alt="Photo d'archive: 5"/>
<img id="gallerygameoverimage5" class="gallery__viewport__image" src="/arts/game-over/gallery/gameover_06.jpg" alt="Photo d'archive: 6"/>
<img id="gallerygameoverimage6" class="gallery__viewport__image" src="/arts/game-over/gallery/gameover_07.jpg" alt="Photo d'archive: 7"/>
<img id="gallerygameoverimage7" class="gallery__viewport__image" src="/arts/game-over/gallery/gameover_08.jpg" alt="Photo d'archive: 8"/>
<img id="gallerygameoverimage8" class="gallery__viewport__image" src="/arts/game-over/gallery/gameover_09.jpg" alt="Photo d'archive: 9"/>
<img id="gallerygameoverimage9" class="gallery__viewport__image" src="/arts/game-over/gallery/gameover_10.jpg" alt="Photo d'archive: 10"/>
<img id="gallerygameoverimage10" class="gallery__viewport__image" src="/arts/game-over/gallery/gameover_11.jpg" alt="Photo d'archive: 11"/>
<img id="gallerygameoverimage11" class="gallery__viewport__image" src="/arts/game-over/gallery/gameover_12.jpg" alt="Photo d'archive: 12"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygameoverimage0"
aria-label="Voir l'image "Photo d'archive: 1""
type="button"
>
<img class="gallery__selector__image" src="/arts/game-over/gallery/gameover_01.jpg" alt="Photo d'archive: 1"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygameoverimage1"
aria-label="Voir l'image "Photo d'archive: 2""
type="button"
>
<img class="gallery__selector__image" src="/arts/game-over/gallery/gameover_02.jpg" alt="Photo d'archive: 2"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygameoverimage2"
aria-label="Voir l'image "Photo d'archive: 3""
type="button"
>
<img class="gallery__selector__image" src="/arts/game-over/gallery/gameover_03.jpg" alt="Photo d'archive: 3"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygameoverimage3"
aria-label="Voir l'image "Photo d'archive: 4""
type="button"
>
<img class="gallery__selector__image" src="/arts/game-over/gallery/gameover_04.jpg" alt="Photo d'archive: 4"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygameoverimage4"
aria-label="Voir l'image "Photo d'archive: 5""
type="button"
>
<img class="gallery__selector__image" src="/arts/game-over/gallery/gameover_05.jpg" alt="Photo d'archive: 5"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygameoverimage5"
aria-label="Voir l'image "Photo d'archive: 6""
type="button"
>
<img class="gallery__selector__image" src="/arts/game-over/gallery/gameover_06.jpg" alt="Photo d'archive: 6"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygameoverimage6"
aria-label="Voir l'image "Photo d'archive: 7""
type="button"
>
<img class="gallery__selector__image" src="/arts/game-over/gallery/gameover_07.jpg" alt="Photo d'archive: 7"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygameoverimage7"
aria-label="Voir l'image "Photo d'archive: 8""
type="button"
>
<img class="gallery__selector__image" src="/arts/game-over/gallery/gameover_08.jpg" alt="Photo d'archive: 8"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygameoverimage8"
aria-label="Voir l'image "Photo d'archive: 9""
type="button"
>
<img class="gallery__selector__image" src="/arts/game-over/gallery/gameover_09.jpg" alt="Photo d'archive: 9"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygameoverimage9"
aria-label="Voir l'image "Photo d'archive: 10""
type="button"
>
<img class="gallery__selector__image" src="/arts/game-over/gallery/gameover_10.jpg" alt="Photo d'archive: 10"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygameoverimage10"
aria-label="Voir l'image "Photo d'archive: 11""
type="button"
>
<img class="gallery__selector__image" src="/arts/game-over/gallery/gameover_11.jpg" alt="Photo d'archive: 11"/>
</button>
</li>
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerygameoverimage11"
aria-label="Voir l'image "Photo d'archive: 12""
type="button"
>
<img class="gallery__selector__image" src="/arts/game-over/gallery/gameover_12.jpg" alt="Photo d'archive: 12"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerygameover", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerygameover", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerygameover", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerygameover", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerygameover = document.querySelectorAll("#gallerygameover .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerygameover.length; i++) {
// Click
galleryButtonsgallerygameover[i].addEventListener("click", function(event) {
displayImageWithButton("gallerygameover", this);
});
// Focus In
galleryButtonsgallerygameover[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerygameover", displayedImages[i]);
}
}
displayImageWithButton("gallerygameover", this);
}
});
// Focus Out
galleryButtonsgallerygameover[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerygameover", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerygameover", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerygameover = document.querySelector("#gallerygameover .gallery__viewport__controls__nav-button--left");
previousImageButtongallerygameover.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerygameover = document.querySelector("#gallerygameover .gallery__viewport__controls__nav-button--right");
nextImageButtongallerygameover.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerygameover = document.querySelector("#gallerygameover .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerygameover.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerygameover", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerygameover", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerygameover", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerygameover = 0;
let touchendXgallerygameover = 0;
const galleryViewportgallerygameover = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerygameover !== undefined) {
galleryViewportgallerygameover.addEventListener('touchstart', function(event) {
touchstartXgallerygameover = event.changedTouches[0].screenX
});
galleryViewportgallerygameover.addEventListener('touchend', function(event) {
touchendXgallerygameover = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerygameover, touchendXgallerygameover);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerygameover.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>Sale punk!2006-01-01T00:00:00+00:002006-01-01T00:00:00+00:00
Pierre Tremblay-Thériault
https://lapinchatware.ca/arts/sale-punk/<p>Sale punk! <br />
Aérosol acrylique sur masonite <br />
120cm X 120cm <br />
2006</p>
<div id="gallerysalepunk" class="gallery">
<div class="gallery__viewport">
<div class="gallery__viewport__images">
<img id="gallerysalepunkimage0" class="gallery__viewport__image" src="/arts/sale-punk/gallery/salepunk_1.jpg" alt="Photo d'archive"/>
</div>
<div class="gallery__viewport__controls">
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--left" src="/images/angle-left.svg" alt="Voir l'image précédente." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-button gallery__viewport__controls__nav-button--right" src="/images/angle-right.svg" alt="Voir l'image suivante." aria-hidden="true"/>
<img class="gallery__viewport__controls__nav-close-btn" src="/images/close-icon.svg" alt="Fermer la gallery"/>
</div>
</div>
<ul class="gallery__selector">
<li class="gallery__selector__item">
<button
class="gallery__selector__button"
aria-expanded="false"
aria-controls="gallerysalepunkimage0"
aria-label="Voir l'image "Photo d'archive""
type="button"
>
<img class="gallery__selector__image" src="/arts/sale-punk/gallery/salepunk_1.jpg" alt="Photo d'archive"/>
</button>
</li>
</ul>
</div>
<script>
// Define
// function hideDisplayedImage(galleryId, image)
if (typeof globalThis.hideDisplayedImage === "undefined") {
globalThis.hideDisplayedImage = function(galleryId, image) {
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.remove("gallery__viewport--display");
image.classList.remove("gallery__viewport__image--display");
const selector = '[aria-controls="' + image.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
controlsButton.setAttribute("aria-expanded", "false");
}
}
// Define
// function displayImageWithButton(galleryId, button)
if (typeof globalThis.displayImageWithButton === "undefined") {
globalThis.displayImageWithButton = function(galleryId, button) {
button.focus();
const fullscreenImageContainer = document.querySelector("#" + galleryId + " .gallery__viewport");
fullscreenImageContainer.classList.add("gallery__viewport--display");
const ariaControlsId = button.getAttribute("aria-controls");
const controlledElement = document.getElementById(ariaControlsId);
controlledElement.classList.add("gallery__viewport__image--display");
button.setAttribute("aria-expanded", "true");
}
}
// Define
// function displayImageWithControlledElement(galleryId, button)
if (typeof globalThis.displayImageWithControlledElement === "undefined") {
globalThis.displayImageWithControlledElement = function(galleryId, controlledElement) {
const selector = '[aria-controls="' + controlledElement.getAttribute("id") + '"]'
const controlsButton = document.querySelector(selector);
displayImageWithButton(galleryId, controlsButton);
}
}
// Define
// function checkSwipeDirection(touchstartX, touchendX)
if (typeof globalThis.checkSwipeDirection === "undefined") {
globalThis.checkSwipeDirection = function(touchstartX, touchendX) {
if (touchendX < touchstartX) {
return "left";
} else if (touchendX > touchstartX) {
return "right";
} else {
return "";
}
}
}
// Define
// function displayNextImage()
if (typeof globalThis.displayNextImage === "undefined") {
globalThis.displayNextImage = function() {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerysalepunk", controlledElement);
let newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerysalepunk", newControlledElement);
}
}
}
}
// Define
// function displayPreviousImage()
if (typeof globalThis.displayPreviousImage === "undefined") {
globalThis.displayPreviousImage = function () {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerysalepunk", controlledElement);
let newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerysalepunk", newControlledElement);
}
}
}
}
// Init
// Gallery Buttons
const galleryButtonsgallerysalepunk = document.querySelectorAll("#gallerysalepunk .gallery__selector__button");
for (let i = 0; i < galleryButtonsgallerysalepunk.length; i++) {
// Click
galleryButtonsgallerysalepunk[i].addEventListener("click", function(event) {
displayImageWithButton("gallerysalepunk", this);
});
// Focus In
galleryButtonsgallerysalepunk[i].addEventListener('focusin', function(event) {
const previousFocusableItem = event.relatedTarget;
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (
(previousFocusableItem === null || !previousFocusableItem.classList.contains("gallery__selector__button"))
&& displayedImages.length > 0
) {
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerysalepunk", displayedImages[i]);
}
}
displayImageWithButton("gallerysalepunk", this);
}
});
// Focus Out
galleryButtonsgallerysalepunk[i].addEventListener('focusout', function(event) {
// Prevent focus out actions if it's a click on a gallery viewport element.
const eventOriginClassList = event.explicitOriginalTarget.classList;
if (
eventOriginClassList.contains("gallery__viewport__image")
|| eventOriginClassList.contains("gallery__viewport__controls")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-button")
|| eventOriginClassList.contains("gallery__viewport__controls__nav-close-btn")
|| eventOriginClassList.contains("gallery__viewport")
) {
return;
}
// Hide all displayed images
const displayedImages = document.getElementsByClassName("gallery__viewport__image--display");
if (displayedImages.length > 0) {
for (let i = 0; i < displayedImages.length; i++) {
hideDisplayedImage("gallerysalepunk", displayedImages[i]);
}
const nextFocusableItem = event.relatedTarget;
if (nextFocusableItem != null && nextFocusableItem.classList.contains("gallery__selector__button")) {
displayImageWithButton("gallerysalepunk", nextFocusableItem);
}
}
});
}
// Previous Button
// Click
const previousImageButtongallerysalepunk = document.querySelector("#gallerysalepunk .gallery__viewport__controls__nav-button--left");
previousImageButtongallerysalepunk.addEventListener('click', function(event) {
displayPreviousImage();
});
// Next Button
// Click
const nextImageButtongallerysalepunk = document.querySelector("#gallerysalepunk .gallery__viewport__controls__nav-button--right");
nextImageButtongallerysalepunk.addEventListener('click', function(event) {
displayNextImage();
});
// Close Button
// Click
const closeImageButtongallerysalepunk = document.querySelector("#gallerysalepunk .gallery__viewport__controls__nav-close-btn");
closeImageButtongallerysalepunk.addEventListener('click', function(event) {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
hideDisplayedImage("gallerysalepunk", controlledElement);
}
});
// Keyboard Controls
document.addEventListener('keydown', (event) => {
const controlledElement = document.getElementsByClassName("gallery__viewport__image--display")[0];
if (controlledElement !== undefined) {
// Hide image
// ESC, LEFT, RIGHT
if (event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
hideDisplayedImage("gallerysalepunk", controlledElement);
}
let newControlledElement;
// Select new controlled element(image)
// LEFT
if (event.code === 'ArrowLeft') {
newControlledElement = controlledElement.previousElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.lastElementChild;
}
}
// RIGHT
if (event.code === 'ArrowRight') {
newControlledElement = controlledElement.nextElementSibling;
if (newControlledElement === null) {
newControlledElement = controlledElement.parentElement.firstElementChild;
}
}
// Active button and display image
if (newControlledElement !== null && newControlledElement !== undefined) {
displayImageWithControlledElement("gallerysalepunk", newControlledElement);
}
}
})
// Touch Gesture
let touchstartXgallerysalepunk = 0;
let touchendXgallerysalepunk = 0;
const galleryViewportgallerysalepunk = document.getElementsByClassName("gallery__viewport")[0];
if (galleryViewportgallerysalepunk !== undefined) {
galleryViewportgallerysalepunk.addEventListener('touchstart', function(event) {
touchstartXgallerysalepunk = event.changedTouches[0].screenX
});
galleryViewportgallerysalepunk.addEventListener('touchend', function(event) {
touchendXgallerysalepunk = event.changedTouches[0].screenX
const direction = checkSwipeDirection(touchstartXgallerysalepunk, touchendXgallerysalepunk);
if (direction === "left") {
displayPreviousImage();
} else if (direction === "right") {
displayNextImage();
}
});
galleryViewportgallerysalepunk.addEventListner('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
</script>