openElement

S'il n'y a que trois images, l'élément "image lien"  est facile à utiliser et à modifier.  Pas besoin de s'encombrer de code ou de tableau.

Si vous êtes novice en programmation WEB, http://forum.openelement.com/fr/forum_posts.asp?TID=20090&title=les-tutos-de-larsne" rel="nofollow - - ici  un tableau dans un calque avec visibilité "Off"

// Assigner l'image au panneau d'éléments et le zoomer

$('.toile').click(

function(){

var WinHaut = $(window).height()*.9;

var WinLarg = $(window).width()*.9;

var PicHaut = $(this).height();

var PicLarg = $(this).width();

var PicName = ($(this).css('background-image')).trim();

var PicTop = $(this).offset().top;

var PicLeft = $(this).offset().left;

var PicRatio = PicName.indexOf('.jpg');

var PicTitre = '';

var PicInfo='';

var Coll = document.getElementsByClassName('toile');

var Line=Coll.length;

// collecter les informations sur la toile dans le tableau et créer le texte de l'image

var int1 = 0; 

var PicTest = PicName.substring(PicRatio-2,PicRatio);

for(int1=1;int1<=Line;int1++){

  PicTitre = CellCont(int1,0);

  if(PicTitre==PicTest){

PicTitre = CellCont(int1,1);

$('.Titre').text(PicTitre);

var int2=1;

PicInfo='';

  for (int2=2;int2<7;int2++){

if(int2==4){

PicInfo=PicInfo+CellCont(int1,int2)+'"x';

}else{

if(int2==5){

PicInfo=PicInfo+CellCont(int1,int2)+'"';

}else{

if(int2==6){

if (CellCont(int1,int2)!=""){

PicInfo=PicInfo+', '+CellCont(int1,int2)+'.00$ ca';

}

}else{

PicInfo=PicInfo+CellCont(int1,int2)+', ';

}

}

}

$('.Informations').text(PicInfo);

}

}

}

// Dimensions du panneau d'éléments ajustées à l'image

$('.projection').animate({height:(PicHaut), width:(PicLarg), top:(PicTop), left:(PicLeft)});

// Insérer l'image

$('.filtrenoir').css({top:0});

$('.filtrenoir').fadeIn();

$('.projection').css({'background-image':PicName});

$('.projection').fadeIn();

// Calculer le ratio de zoom

if (WinHaut/PicHaut*PicLarg < WinLarg) {

PicRatio = WinHaut/PicHaut;

} else {

PicRatio = WinLarg/PicLarg;

}

PicHaut=PicHaut*PicRatio;

PicLarg=PicLarg*PicRatio;

// calculer la position de la fenêtre de zoom

PicTop = (-PicHaut+$(window).height())/2 + $(window).scrollTop();

PicLeft = (-PicLarg+$(window).width())/2;

// Appliquer le tout

$('.projection').animate({height:(PicHaut), width:(PicLarg), top:(PicTop), left:(PicLeft)});

}

);

function CellCont(V_row,V_cell){ // V_row= no de rangée, V_cell = numéro de colonne

var $table = $('.ListePrix'); // identité (classe perso de la table)

var $row = $table.find('tr').eq(V_row); // sélection de la rangée

var $cell = $row.find('td').eq(V_cell); // sélection de la cellule , 0 = colonne 1

var V_val = $cell.find('span').text(); // contenu de la cellule

return V_val;

}

-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE

 Hooooo !.........

J'ai parcouru les deux pages, et je perds un peu mon latin  Différences entre "Splendide" et "Sublime" est-ce deux éléments fondamentalement différents, complémentaires ?

je serait tenté comme tu me l'a proposé sur un autre post, si j'ai à demi compris, ils sont tout les deux exploitables sur tous les modèles (responsive et autres)

Toute fois l'effet transparence des couleurs ne s'applique que sur les images gérées par un des deux éléments complémentaires.

Question subsidiaire : je n'ai trouvé que la page de téléchargement de l'élément splendide surement parce-que c'est le même élément ?

Voila c'est fait, le N°3 

Merci Larsene, c'est installé pour l'instant je vais voir ce que je peux en faire !

En attendant, je suis toujours jaloux de la fluidité du site Responsive de Brolysan dans le passage d'une Rsection à l'autre.

Le jour où OE intégrera une option comme celle-là (que je n'ai pas trouvé dans les styles) je pense que beaucoup de monde sera heureux.

OE est extraordinaire, et offre de multiples possibilités qu'en fait je n'en exploite que très peu et en cherchant à me sortir les doigts d............. 

@Hobby001 J'ai regardé et reregardé ses supers tutos et commence effectivement à m'amuser avec certains bouts de codes ! Merci pour ce joli exemple mais ton tableau est dans le site et donc uniquement modifiable via OE, non ? Dans l'idéal j'aimerais qu'il soit modifiable depuis "l'exterieur".

Image sublime le permet il ?

Bonne journée

Ce tableau m'intéresse bcp, je vais essayer...