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

openElement

> Discussion générale openElement
  Nouveaux messages Nouveaux messages Fil RSS  - Option aleatoire pour panneau responsive
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Option aleatoire pour panneau responsive

 Répondre Répondre
Auteur
Message
pcentretien@videotro allez vers le bas
Newbie
Newbie


Depuis le: 19 Juil 2017
Pays: Canada
Status: Inactif
Points: 5
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer pcentretien@videotro Citer  RépondreRéponse Lien Direct à ce Post Sujet: Option aleatoire pour panneau responsive
    Envoyé : 24 Juil 2017 à 16:03
Bonjour à tous, je vous fourni l'adresse de notre site internet pour que vous puissiez voir ce que je veux faire exactement...

Sur l'accueil de notre site en haut, nous avons des images sur un panneau responsive qui defile les camion de nos compétiteurs...

Pensez vous qu'il serait possible de faire défilé les images aléatoirement pour pas que se sois toujours le meme compétiteur qui sois afficher en premier...

Voici l'adresse du site et si jamais vous avez des sugestions à nous faire a propros de n'importe quoi sur le site gêner vous pas!!!


Merci a l'avance 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: 6513
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 24 Juil 2017 à 19:38
Vous devez comprendre que le diaporama est produit par l'élément Fond d'écran dynamique.

L'élément qui vous permettrait de faire ce que vous voulez faire est Flexslider par contre je ne vois pas comment il pourrait se placer en fond d'écran.

Il vous reste à appliquer du code tel qu'on le trouve sur internet à moins que quelqun n'ait une autre idée pour substituer Flexslider à Fond d'écran dynamique.



Edité par Hobby001 - 24 Juil 2017 à 21:06
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: 6513
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 25 Juil 2017 à 03:44
Voici une solution qui fonctionne ICI

Notes 
    • C'est un vrai Random donc une image peut tarder à être présentée à son tour

    •  J'y ai ajouté une restriction pour qu'une image ne soit pas présentée deux fois de suite.

    • Puisque les images ne sont pas incluses dans un élément, leur transfert ne sera pas pris en charge automatiquement par OE.  Vous devrez le faire via le panneau des ressources ou avec FileZilla

  1. faites une sauvegarde de votre projet

  2. effacez l'élément Fond d'écran dynamique

  3. sélectionnez l'élément RESPONSIVE_HOME

  4. Ajoutez-lui une classe perso au nom de diapo

  5. ajoutez un bloc de code source de type javascript en EndBody

  6. Insérez le code suivant:

var intervalle = 4.5; // délai en secondes avant le changement d'image

var oimage = -1; // image actuelle
intervalle *= 1000;
var image_index = 0;

// liste des images
image_list = new Array(
"Files/Image/aigle.jpg",
"Files/Image/grandpic.jpg",
"Files/Image/FousDeBassan.jpg",
"Files/Image/pelican.jpg"
);

var number_of_image = image_list.length;

// Random sans reprendre la même valeur
function generate(x, y) {
do{
  var range = y - x + 1;
  var nimage = parseInt(Math.floor(Math.random() * range) + x);
}while(oimage==nimage);
oimage=nimage;
return(nimage);
}

// numéro d'index de l'image à afficher
function getNextImage() {
image_index = generate(0, number_of_image-1);
var new_image = image_index;
return(new_image);
}

function showImage() {
var new_image = getNextImage(); // image à afficher
var nimg = "url('"; 
 nimg=nimg.concat(image_list[new_image],"')");
$('.diapo').css({"background-image":nimg});
  var recurence = "showImage()";
setTimeout(recurence, intervalle);
}

$(document).ready(
function(){
showImage();
}
);



Edité par Hobby001 - 25 Juil 2017 à 13:54
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é : 25 Juil 2017 à 08:04
Bien joué Hobby001, beau boulot de codage js. Thumbs Up
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: 6513
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 25 Juil 2017 à 13:21
Merci brolysan,

Voici une version qui démarre l'affichage par une photo sélectionnée de façon aléatoire et qui, par la suite, défile les images dans l'ordre.

Notes
  • Puisque les images ne sont pas incluses dans un élément, leur transfert ne sera pas pris en charge automatiquement par OE.  Vous devrez le faire via le panneau des ressources ou avec FileZilla

  1. faites une sauvegarde de votre projet

  2. effacez l'élément Fond d'écran dynamique

  3. sélectionnez l'élément RESPONSIVE_HOME

  4. Ajoutez-lui une classe perso au nom de diapo

  5. ajoutez un bloc de code source de type javascript en EndBody

  6. Insérez le code suivant:

var intervalle = 4.5; // délai en secondes avant le changement d'image

intervalle *= 1000;
var image_index = 0;
var new_image = 0;

// liste des images
image_list = new Array(
"Files/Image/aigle.jpg",
"Files/Image/grandpic.jpg",
"Files/Image/FousDeBassan.jpg",
"Files/Image/pelican.jpg"
);

var number_of_image = image_list.length;

// Random 
function generate(x, y) {
  var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}

// numéro d'index de l'image à afficher
function getFirstImage() {
image_index = generate(0, number_of_image-1);
var new_image = image_index;
return(new_image);
}

function showImages() {
if (new_image == number_of_image-1){
new_image = 0;
}else{
new_image++;
}
var nimg = "url('"; 
 nimg=nimg.concat(image_list[new_image],"')");
$('.diapo').css({"background-image":nimg});
  var recurence = "showImages()";
setTimeout(recurence, intervalle);
}

$(document).ready(
function(){
new_image = getFirstImage();
showImages();
}
);


Edité par Hobby001 - 25 Juil 2017 à 13:53
Haut de la page
 Répondre Répondre
  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.047 secondes.