Bonjour,
Je rouvre le sujet pour un petit tracas Javascript, pas forcément facile à expliquer.
Un produit, un seul carrousel, ce code fonctionne parfaitement.
const trouve_ca_id = document.querySelector('img.picture');
const idImg = trouve_ca_id.id.split ('X');
const ca_id = idImg[0];
const tist = trouve_ca_id.alt;
const focused = [];
const imaxes = document.querySelectorAll('img.picture, img[src^="im/mu/' + ca_id + '-"] + img'); // Renommé en imaxes pour plus de clarté
imaxes.forEach (imax => {
let idImg = imax.id.split('X');
if (idImg.length < 3) return;
let ca_id = idImg[0];
let height = idImg[1];
let img_format = idImg[2];
imax.addEventListener('mousedown', function () {
let activeImg = document.activeElement.getAttribute('src');
focused[0] = activeImg;
PopGrand(ca_id, tist, height, img_format);
});
imax.addEventListener('mouseup', function () {
document.querySelector('img[src="' + focused[0] + '"]').focus ();
});
})
function PopGrand(ca_id, tist, height, img_format) {
if (!mobile.matches) {return false;}
else
{
window.open ('popup.php?nom='+ encodeURI (ca_id+'G.'+img_format+'&tit='+tist), 'popImg', 'popup=yes,scrollbars=yes,resizable=yes,width=420,height='+height);
}
};
Il est aussi possible de charger plusieurs produits sur la même page afin de les comparer.
Dans ce cas il y a plusieurs carrousels sur la même page.
Un boucle me permet de trouver les produits :
for (let i = 0; i < tab_ca_id.length; i++)
{
bind_event (i, fo, recherche, mobile);
}
Ensuite je fais un quasi copier-coller du code qui marche pour un seul carrousel :
function bind_event (i, fo, recherche, mobile)
{
let imax = document.querySelector ('img.picture[src^="im/pr/' + tab_ca_id[i] + 'G."]');
let ca_id = tab_ca_id[i];
let tist = imax.alt;
let idImg = imax.id.split ('X');
let height = idImg[1];
let img_format = idImg[2];
let focused = [];
const idPreco = document.getElementById ('F'+ ca_id);
const cherch = document.getElementById ('J'+ ca_id);
let imaxes = document.querySelectorAll('img.picture, img[src^="im/mu/' + ca_id + '-"] + img');
imaxes.forEach (imax => {
let idImg = imax.id.split('X');
if (idImg.length < 3) return;
let ca_id = idImg[0];
let height = idImg[1];
let img_format = idImg[2];
imax.addEventListener ('mousedown', function()
{
let activeImg = document.activeElement.getAttribute('src');
focused[0] = activeImg;
PopGrand (ca_id, tist, height, img_format)
});
imax.addEventListener('mouseup', function ()
{
document.querySelector('img[src="' + focused[0] + '"]').focus ();
});
});
Cela fonctionne encore SAUF que l'identification de activeImg devient assez erratique.
Sur la carrousel 1 je me prends le titre de carrousel 2.
Si je ferme carrousel 2 je retombe sur carrousel 3.
Je pense qu'il a un problème de réinitialisation.
Comme le cas d'une page à plusieurs produits est rare et que les carrousels s'ouvrent correctement ce n'est pas dramatique mais si vous avez une solution pour bien identifier l'image active dans le cas de plusieurs carrousels je suis intéressé.
