Retour

1. créer une photothèque, ajouter les photos et placer en deuxième position l'image cliquable

2. Relier la photothèque à la page d'accueil en phototèque classique sans afficher le nom du groupe, 10 photos

3. Ajouter les fichiers dans le Moxie manager : peleMele.css et peleMele.js

4. Ajouter dans le Html le code suivant :

<link type="text/css" href="/template/peleMele.css" rel="stylesheet" />
<script type="text/javascript" src="/template/peleMele.js">script>

5. Modifier le fichier peleMele.css en suivant les instructions en commentaire, ici en gras

@media (min-width: 1314px) {

/* STYLE - ACCUEIL PELE-MELE */
.body-page-1 .wrapper-page-1 #wrapper-content-6 { /* Changer id */
max-width: 1500px !important;
}

.body-page-1 #phototheque-classic-list-10 { /* Changer id */
text-align: center;
}

.body-page-1 .phototheque-classic-list-li-10 { /* Changer class pour tout les phototheque-classic-list- */
padding: 0 3px;
position: relative;
}

.body-page-1 .phototheque-classic-list-li-10 img {
display: none;
}

.body-page-1 .phototheque-classic-list-li-10:first-child img {
display: inline-block;
vertical-align: baseline;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(2) img {
display: inline-block;
vertical-align: baseline;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(3) img {
display: inline-block;
vertical-align: baseline;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(4) img {
display: inline-block;
vertical-align: baseline;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(5) img {
display: inline-block;
vertical-align: top;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(6) img {
display: inline-block;
vertical-align: top;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(7) img {
display: inline-block;
vertical-align: top;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(8) img {
display: inline-block;
vertical-align: top;
}

/* RESIZE LI - ACCUEIL PELE-MELE*/
.body-page-1 .phototheque-classic-list-li-10:first-child, .body-page-1 .phototheque-classic-list-li-10:first-child img {
width: 275px;
height: 275px;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(2), .body-page-1 .phototheque-classic-list-li-10:nth-child(2) img {
width: 400px;
height: 400px;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(3), .body-page-1 .phototheque-classic-list-li-10:nth-child(3) img {
width: 325px;
height: 325px;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(4), .body-page-1 .phototheque-classic-list-li-10:nth-child(4) img {
width: 250px;
height: 250px;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(5), .body-page-1 .phototheque-classic-list-li-10:nth-child(5) img {
width: 325px;
height: 325px;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(6), .body-page-1 .phototheque-classic-list-li-10:nth-child(6) img {
width: 250px;
height: 250px;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(7), .body-page-1 .phototheque-classic-list-li-10:nth-child(7) img {
width: 400px;
height: 400px;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(8), .body-page-1 .phototheque-classic-list-li-10:nth-child(8) img {
width: 275px;
height: 275px;
}

/* HOVER - ACCUEIL PELE-MELE*/
.body-page-1 .phototheque-classic-list-li-10:nth-child(2):hover img {
transform: scale(1.02);
transition: transform .5s ease-in-out;
}

.body-page-1 .phototheque-classic-list-li-10:hover .filter {
opacity: 0;
transition: opacity .5s linear;
}

/* FILTER */
.filter {
opacity: 0.4;
z-index: 10;
position: absolute;
top: 0;
left: 3px;
background: #000;
transition: opacity .5s linear;
}

.body-page-1 .phototheque-classic-list-li-10:first-child .filter {
width: 275px;
height: 275px;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(3) .filter {
width: 325px;
height: 325px;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(4) .filter {
width: 250px;
height: 250px;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(5) .filter {
width: 325px;
height: 325px;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(6) .filter {
width: 250px;
height: 250px;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(7) .filter {
width: 400px;
height: 400px;
}

.body-page-1 .phototheque-classic-list-li-10:nth-child(8) .filter {
width: 275px;
height: 275px;
}

}

6. Modifier le script peleMele.js

'use strict';

$(window).load(() => {
// ACCUEIL SCRIPT PÊLE-MÊLE
$('.body-page-1 #phototheque-liste-groupe-1 li').map(function (e) { // Changer l'id

if (e < 8) {
$(this).children().removeClass('fancybox-thumb')

if (e === 1) {
$(this).children("a").attr('href', 'http://menetrol-fr.net15.eu//photos-commune-63_fr.html') // Changer l'url
$(this).children().children().attr('src', '/userfile/img-photos/xl/1662113697-Menetrol-en-images.png') // Changer la source de l'image cliquable
}
else {
$(this).append('

')
$(this).children().removeAttr('href')
}
}
else $(this).css('display', 'none')
})
})

const random_gallery = (list_img_src) => {

$('#phototheque-classic-list-10 li img').map(function (e) { // Changer l'id

if (e === 1) $(this).attr('src', '/userfile/img-photos/xl/1662113697-Menetrol-en-images.png') // Changer la source de l'image cliquable
else {

let idx = get_random(list_img_src)
$(this).attr('src', list_img_src[idx])

const pos = list_img_src.indexOf($(this).attr('src'))
list_img_src.splice(pos, 1)
}
})
$(".body-page-1 .phototheque-classic-list-li-4 a[onclick]").fadeIn(200)
hide_other()
}

const get_list_img_src = () => {
$(".body-page-1 .phototheque-classic-list-li-4 a[onclick]").fadeOut(200)

setTimeout(() => {
let list_img_src = []

$('#phototheque-classic-list-10 li img').map(function () { // Changer l'id
if ($(this).attr('src') !== "/userfile/img-photos/xl/1662113697-Menetrol-en-images.png") list_img_src.push($(this).attr('src')) // Changer la source
})

random_gallery(list_img_src)
}, 200)
}

const get_random = (target) => Math.floor(Math.random() * target.length)

const hide_other = () => {
$('.body-page-1 #phototheque-liste-groupe-1 li').map(function (e) { // Changer l'id
if (e < 8) {}
else $(this).css('display', 'none')
})
}

7. Ajouter dans le CSS

.phototheque-classic-list-li-10 {

(min-width: 470px max width: 980px)

width: calc(25% - 4px);

(min-width: 980px)

width: calc(25% - 4px);

(min-width: 1200px)

width: calc(25% - 4px);

}

Retour