Dynamiser et adapter la taille d’une image

DYNAMISER ET ADAPTER LA TAILLE D’UNE IMAGE

Il est possible de dynamiser les images de votre publicité sans que celles-ci soient déformées et en gardant leur entière visibilité.

Pour créer une zone d’images dynamiques et redimensionnables, ajoutez un attribut id unique, et définissez la valeur de l’ image (addAndAdaptImage) par défaut.

Une fois la créa dynamisée par notre AdServer, les images changeront en fonction des paramètres établis ( Géolocalisation, météo, date/heure, cookies, retargeting… ).

Pour cela, vous devez donner un width et un height à la div contenant votre image pour que celle-ci s’adapte aux dimensions voulues.

    ADventori.initData({
      "photo": "https://www.w3schools.com/css/img_fjords.jpg",
      "photoV": 'http://img.over-blog-kiwi.com/0/40/01/35/201301/ob_1264f6_location-voiture-guadeloupe-dacia.jpg',
      "photoH": 'http://www.alldigi.com/wp-content/uploads/2010/06/DSC_1332-1333-Panorama.jpg'
    });
    
    ADventori.Display.addImage(document.getElementById('ADventori_img1'), ADventori.data.photoV, ADventori.data.photo);
    ADventori.Display.adaptImage(document.getElementById('ADventori_img1').lastChild, {fit: 'contain'});
    ADventori.Display.addAndAdaptImage(document.getElementById('ADventori_img2'), ADventori.data.photoH, ADventori.data.photo, {fit: 'contain'});

Méthodes de personnalisation disponibles :

   addImage(element,url,urldefault) : Cette méthode vous permet d’ajouter une image dans le conteneur spécifié.
   adaptImage(element,displayOption) : Cette méthode vous permet d’ajuster la taille de l’image par rapport à son conteneur.
   addAndAdaptImage(element,url,urldefault,displayOption) : Cette méthode vous permet d’ajouter une image à un container en ajustant sa taille par rapport à son container.

displayOption :

• {fit:’cover’} : Cette méthode vous permet de couvrir toute la div par l’image (si l’image est trop grande , elle sera centrée sans prendre en compte les débordements).
• {fit:’contain’} : Cette méthode vous permet d’afficher l’image entière dans la div, c’est l’option par défaut.
• {with : size, height : size} : Cette méthode vous permet de définir la taille du conteneur

Exemple :

Téléchargez l’exemple

Autres méthodes de personnalisation disponibles :

• setImageUrl(element,url,urldefault) : Cette méthode vous permet de changer l’url d’une balise image.

  Important : Si vous dynamisé une balise image , ne pas mettre l’attribut src , sinon votre navigateur fera un double chargement

Exemple :

Téléchargez l’exemple

Vous pouvez également définir la taille du conteneur directement depuis la méthode adaptImage et addAndAdaptImage

exemple :

ADventori.Display.addAndAdaptImage(document.getElementById('ADventori_img1'),ADventori.data.photoV, ADventori.data.photo,{width:260,height:150});

Téléchargez l’exemple