BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> OE dynamique - bases de données etc.
  Nouveaux messages Nouveaux messages Fil RSS  - Article dynamique
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Article dynamique

 Répondre Répondre Page  12>
Auteur
Message
Julienb allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 30 Mai 2016
Pays: france
Status: Inactif
Points: 23
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Julienb Citer  RépondreRéponse Lien Direct à ce Post Sujet: Article dynamique
    Envoyé : 30 Mai 2016 à 15:39
Bonjour à tous, Smile

J'aimerais inclure sur la page d'accueil de mon site une mosaïque dont chacune des 3 cases pointerait vers un site (vimeo, facebook, instagram).

-chaque image doit etre facilement modifiable ;
-chaque texte (titre du dernier l'article ou titre de la derniere video) doit etre facilement modifiable ;
-chaque lien vers lequel pointe la case doit etre aussi modifiable.

Quelle est selon vous la solution la plus adaptée à ce cas de figure ?
* j'ai pensé à un tableau à 3 colonnes exterieur au site, mais ne sais pas ni comment le creer ni comment aller y chercher l'info.



remarque : Je programme en basic et en C, mais suis complètement novice en ce qui concerne les langages web.

Merci pour vos réponse !
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Mai 2016 à 16:21
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, les tutos de Larsene sont une bonne base.  Refaites les et analysez le code.  Je suis parti de là et avec de l'étude et de l'aide sur ce forum j'ai fait ceci:

J'ai mis ici un tableau dans un calque avec visibilité "Off"




Voici le code pour lire le tableau l'événement click sur l'une des toiles déclenche le tout:

// 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;
}





Edité par Hobby001 - 30 Mai 2016 à 16:32
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Mai 2016 à 16:43
Pour un rendez-vous avec la jeune femme en bas à droite Heart, je te fais ton site ;-)

Trève de plaisanteries, vous pouvez également utiliser mon élément complémentaire Image sublime pour ce faire, sans prog particulière, et d'une mise à jour enfantine !

http://www.stalagtic.com/Element-ImageSplendide.htm
http://forum.openelement.com/fr/forum_posts.asp?TID=21928&PID=142043&title=un-nouvel-lment-pour-oe-image-sublime#142043
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Mai 2016 à 17:46
J'aime bien l'effet zoom ou mouvement combiné à une transparence progressive
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Mai 2016 à 18:01
Merci.

Je pense (en toute modestie) que l'élément est parfait pour cela : il gère à la fois la légende, l'image, le lien (vers une ressource ou une page) et des effets dynamique pour avoir une page plus moderne.

En trois clic, c'est mis à jour !
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member


Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2066
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mai 2016 à 09:45
Message posté par Larsene Larsene a écrit:

Pour un rendez-vous avec la jeune femme en bas à droite Heart, je te fais ton site ;-)

http://www.stalagtic.com/Element-ImageSplendide.htm
http://forum.openelement.com/fr/forum_posts.asp?TID=21928&PID=142043&title=un-nouvel-lment-pour-oe-image-sublime#142043

Evil Smile Hooooo !.........

J'ai parcouru les deux pages, et je perds un peu mon latin Unhappy 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 ?
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mai 2016 à 10:46
Oups, oui, c'est bien le même élément ... et oui, il est utilisable sur tous les modèles de sites.


Edité par Larsene - 31 Mai 2016 à 10:47
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member


Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2066
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mai 2016 à 11:00
OK je vais sur la page pour plus !

Voila c'est fait, le N°3 Thumbs Up


Edité par Maurice306 - 31 Mai 2016 à 11:03
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mai 2016 à 11:39
Merci beaucoup Maurice306 !

Si tu as un soucis pour mise en oeuvre, n'hésite pas, on peut également travailler via teamviewer pour te dépanner ou t'aider à sa prise en main ....

@++
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mai 2016 à 12:14
ha carrément en teamviewer !! t'es un fou mon Larsène Big smile
Haut de la page
 Répondre Répondre Page  12>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.