code backstretch ne fonctionne pas

[clechipey]

Bonjour,

Je ne comprends pas, après un tas d'essais (sur forum test), rien à faire, mon script de défilement d'images de fond par backstretch ne fonctionne pas !

où est donc l'erreur ?

Code:

(function(a){a.backstretch=function(k,i,l){function m(c){try{g={left:0,top:0},d=e.width(),b=d/j,b>=e.height()?(h=(b-e.height())/2,f.centeredY&&a.extend(g,{top:"-"+h+"px"})):(b=e.height(),d=b*j,h=(d-e.width())/2,f.centeredX&&a.extend(g,{left:"-"+h+"px"})),a("#backstretch, #backstretch img:last").width(d).height(b).filter("img").css(g)}catch(o){}typeof c=="function"&&c()}var n={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),f=c.data("settings")||n;c.data("settings");var e="onorientationchange"in window?a(document):a(window),j,d,b,h,g;i&&typeof i=="object"&&a.extend(f,i);a(document).ready(function(){if(k){var b;c.length==0?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:"fixed",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999}).bind("load",function(b){var d=a(this),e;d.css({width:"auto",height:"auto"});e=this.width||a(b.target).width();b=this.height||a(b.target).height();j=e/b;m(function(){d.fadeIn(f.speed,function(){c.find(".deleteable").remove();typeof l=="function"&&l()})})}).appendTo(c);a("body #backstretch").length==0&&a("body").append(c);c.data("settings",f);b.attr("src",k);a(window).resize(m)}});return this}})(jQuery);
$.backstretch([
"http://i42.servimg.com/u/f42/09/02/42/97/amazon10.jpg"
, "http://i57.servimg.com/u/f57/12/41/17/54/guitou11.jpg"]
, {duration: 3000, fade: 550});

  

je suis totalement novice dans le script, css et autre... et je viens de passer quelques heures à tout tenter parmi les nombreux tutos et partages trouvés ici !

donc, je n'ose pas essayer sur le forum réel bien sur   

Je ne suis pas fondatrice mais juste modératrice depuis peu et j'ai carte blanche pour effectuer ces modifications...

sachant que si celui-ci ne fonctionne pas, j'ai tenté un second, celui-ci

Code:

$(function() {
        
         var a = ["http://i57.servimg.com/u/f57/12/41/17/54/guitou11.jpg", "http://i42.servimg.com/u/f42/09/02/42/97/amazon10.jpg"];
          $("body").css("background-image","url("+a[Math.floor(Math.random()*a.length)]+")")

        
        });


qui me convient aussi, mais il me faut réussir à y ajouter backstretch afin qu'il s'adapte à tous les écrans !

Bref, je rame, merci d'avance de votre aide !

Corinne
http://essai-discus.forumsactifs.com/forum
ccs personnalisé dernièrement mais vraiment pas grand chose

[clechipey]

Bonjour,
peut-être manque t-il quelques précisions pour que vous puissiez me donner un coup de main ?
je regarde ce que je peux vous indiquer de plus...
Corinne

[Maxmax]

Salut,

Il faut que tu mettes ce code dans PA >> Modules >> Gestion des codes javascript :

Code:

/*! Backstretch - v2.0.4 - 2013-06-19
* http://srobbin.com/jquery-plugins/backstretch/
* Copyright (c) 2013 Scott Robbin; Licensed MIT */
(function(a,d,p){a.fn.backstretch=function(c,b){(c===p||0===c.length)&&a.error("No images were supplied for Backstretch");0===a(d).scrollTop()&&d.scrollTo(0,0);return this.each(function(){var d=a(this),g=d.data("backstretch");if(g){if("string"==typeof c&&"function"==typeof g[c]){g[c](b);return}b=a.extend(g.options,b);g.destroy(!0)}g=new q(this,c,b);d.data("backstretch",g)})};a.backstretch=function(c,b){return a("body").backstretch(c,b).data("backstretch")};a.expr[":"].backstretch=function(c){return a(c).data("backstretch")!==p};a.fn.backstretch.defaults={centeredX:!0,centeredY:!0,duration:5E3,fade:0};var r={left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},s={position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxHeight:"none",maxWidth:"none",zIndex:-999999},q=function(c,b,e){this.options=a.extend({},a.fn.backstretch.defaults,e||{});this.images=a.isArray(b)?b:[b];a.each(this.images,function(){a("<img />")[0].src=this});this.isBody=c===document.body;this.$container=a(c);this.$root=this.isBody?l?a(d):a(document):this.$container;c=this.$container.children(".backstretch").first();this.$wrap=c.length?c:a('<div class="backstretch"></div>').css(r).appendTo(this.$container);this.isBody||(c=this.$container.css("position"),b=this.$container.css("zIndex"),this.$container.css({position:"static"===c?"relative":c,zIndex:"auto"===b?0:b,background:"none"}),this.$wrap.css({zIndex:-999998}));this.$wrap.css({position:this.isBody&&l?"fixed":"absolute"});this.index=0;this.show(this.index);a(d).on("resize.backstretch",a.proxy(this.resize,this)).on("orientationchange.backstretch",a.proxy(function(){this.isBody&&0===d.pageYOffset&&(d.scrollTo(0,1),this.resize())},this))};q.prototype={resize:function(){try{var a={left:0,top:0},b=this.isBody?this.$root.width():this.$root.innerWidth(),e=b,g=this.isBody?d.innerHeight?d.innerHeight:this.$root.height():this.$root.innerHeight(),j=e/this.$img.data("ratio"),f;j>=g?(f=(j-g)/2,this.options.centeredY&&(a.top="-"+f+"px")):(j=g,e=j*this.$img.data("ratio"),f=(e-b)/2,this.options.centeredX&&(a.left="-"+f+"px"));this.$wrap.css({width:b,height:g}).find("img:not(.deleteable)").css({width:e,height:j}).css(a)}catch(h){}return this},show:function(c){if(!(Math.abs(c)>this.images.length-1)){var b=this,e=b.$wrap.find("img").addClass("deleteable"),d={relatedTarget:b.$container[0]};b.$container.trigger(a.Event("backstretch.before",d),[b,c]);this.index=c;clearInterval(b.interval);b.$img=a("<img />").css(s).bind("load",function(f){var h=this.width||a(f.target).width();f=this.height||a(f.target).height();a(this).data("ratio",h/f);a(this).fadeIn(b.options.speed||b.options.fade,function(){e.remove();b.paused||b.cycle();a(["after","show"]).each(function(){b.$container.trigger(a.Event("backstretch."+this,d),[b,c])})});b.resize()}).appendTo(b.$wrap);b.$img.attr("src",b.images[c]);return b}},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(0===this.index?this.images.length-1:this.index-1)},pause:function(){this.paused=!0;return this},resume:function(){this.paused=!1;this.next();return this},cycle:function(){1<this.images.length&&(clearInterval(this.interval),this.interval=setInterval(a.proxy(function(){this.paused||this.next()},this),this.options.duration));return this},destroy:function(c){a(d).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);c||this.$wrap.remove();this.$container.removeData("backstretch")}};var l,f=navigator.userAgent,m=navigator.platform,e=f.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],h=f.match(/Fennec\/([0-9]+)/),h=!!h&&h[1],n=f.match(/Opera Mobi\/([0-9]+)/),t=!!n&&n[1],k=f.match(/MSIE ([0-9]+)/),k=!!k&&k[1];l=!((-1<m.indexOf("iPhone")||-1<m.indexOf("iPad")||-1<m.indexOf("iPod"))&&e&&534>e||d.operamini&&"[object OperaMini]"==={}.toString.call(d.operamini)||n&&7458>t||-1<f.indexOf("Android")&&e&&533>e||h&&6>h||"palmGetResource"in d&&e&&534>e||-1<f.indexOf("MeeGo")&&-1<f.indexOf("NokiaBrowser/8.5.0")||k&&6>=k)})(jQuery,window);

Il faut bien cocher la case Oui pour Activer la gestion des codes Javascript.
Tu l'appliques sur toutes les pages.

Tu créés également un nouveau code javascript dans lequel tu mets :

Code:

$.backstretch([
"http://i42.servimg.com/u/f42/09/02/42/97/amazon10.jpg"
, "http://i57.servimg.com/u/f57/12/41/17/54/guitou11.jpg"], {duration: 3000, fade: 750});

Il faut également l'appliquer sur toutes les pages.

Cordialement,

Max

[clechipey]

Bonjour Max, et merci, je vais essayer tout ça de suite et vous tiens au courant !   

[clechipey]

Bon, je vais peut-être installer direct sur le forum, parce que sur le test, ça ne fonctionne pas ! mais comme il n'était pas beaucoup utilisé, il y a peut-être des templates qui n'ont pas été modifiés ou autre chose du genre mise à jour !  
je ne risque rien à tester directement sur le forum de toute façon, au pire, je remets ensuite dans l’état actuel !
en tout cas merci et si jamais une autre solution ou un complément existent, je suis preneuse !

[clechipey]

faut-il que je retire ce code du CSS perso ?

Code:

 body{
            background-position: top center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }


[clechipey]

Bon, et bien ça ne fonctionne définitivement pas sur le forum...  :no  j'ai donc tous remis comme c'était et m'en vais poursuivre mes recherches !   

[Maxmax]

As-tu mis les deux code que je t'ai donné ? Sur ton forum de test ou de "production" ?

[clechipey]

Oui, la gestion est activée, création des 2 codes "sur toutes les pages" et absolument rien ne se passe !
j'ai fait également l'essai sur le forum réel cet am sans plus de succès !

[Maxmax]

Tu as mis les 2 codes dans la même page javascript ou une page pour chaque code ? (si t'as qu'une page, fais en une pour chaque code)

[clechipey]

Non, j'ai suivi à la lettre les conseils et fait 2 codes distincts ! comme ça ne fonctionnait pas, j'ai tenté également de les regrouper sur une seule mais idem...  :no 

[Maxmax]

Salut,

As-tu remis les deux codes aujourd'hui ?
J'ai aperçu le code avec les liens des images, mais pas le 1er code (j'ai peut-être mal vu aussi).
Sur ton forum de test j'imagine que tu es fondatrice ?
Si oui, rends-toi dans PA >> Affichage >> Template/Général => overall_header.
Cherche le code :

Code:

   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->

Et insère juste après :

Code:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

Pense bien à :Enregis:puis publier (  ).

(j'ai réussi à faire fonctionner ton code sur une page test, il n'y a pas de raisons qu'on ne s'en sorte pas pour toi )

[clechipey]

Bonsoir et merci vraiment de prendre du temps pour moi !
je viens de passer par le template général et fait l'ajout indiqué, enregistré, publié, j'ai bien replacé mes deux codes script distincts sur toutes les pages et bloqué les autres pour qu'il n'y ai pas de conflit... et bien non, rien de rien !

en vrai, sur le forum "réel", j'ai fait un essai cet am avec ces codes, ça m'a dépitée après un tas de tests, et du coup j'ai installé provisoirement celui-ci

Code:

$(function() {
          var a = ["http://i57.servimg.com/u/f57/12/41/17/54/fond_d35.jpg", "http://i57.servimg.com/u/f57/12/41/17/54/fond_d31.jpg","http://i57.servimg.com/u/f57/12/41/17/54/fond_d32.jpg","http://i57.servimg.com/u/f57/12/41/17/54/fond_d33.jpg","http://i57.servimg.com/u/f57/12/41/17/54/fond_d34.jpg"];
          $("body").css("background-image", "url("+a[Math.floor(Math.random() * a.length)]+")")
        });

je dis bien provisoirement parce que si je n'arrive pas à y inclure backstretch, ça coince totalement au niveau résolution sur les écrans des tablettes et autres mobiles ! mais le résultat est très sympa sur pc ! tu peux aller jeter un oeil :
http://discusentreamis.positifforum.com/portal

donc, je ne sais plus trop dans quel sens je continu de creuser   

[Maxmax]

Hum on va faire étape par étape alors.
Sur ton forum de test, désactive le code qui redimensionne automatiquement pour voir ce que ça donne.

[clechipey]

ok, j'ai désactivé le code Backstretch - v2.0.4, pas de réaction !

[Maxmax]

Le code pour redimensionner automatiquement le fond suivant la résolution est le même que pour changer le fond automatiquement ?

[clechipey]

Je suis vraiment pas douée avec tout ça !
tu m'avais conseillé d'installer 2 codes :

celui-ci, qui pour moi redimensionne (je l'appelle Backstretch)

Code:

/*! Backstretch - v2.0.4 - 2013-06-19
* http://srobbin.com/jquery-plugins/backstretch/
* Copyright (c) 2013 Scott Robbin; Licensed MIT */
(function(a,d,p){a.fn.backstretch=function(c,b){(c===p||0===c.length)&&a.error("No images were supplied for Backstretch");0===a(d).scrollTop()&&d.scrollTo(0,0);return this.each(function(){var d=a(this),g=d.data("backstretch");if(g){if("string"==typeof c&&"function"==typeof g[c]){g[c](b);return}b=a.extend(g.options,b);g.destroy(!0)}g=new q(this,c,b);d.data("backstretch",g)})};a.backstretch=function(c,b){return a("body").backstretch(c,b).data("backstretch")};a.expr[":"].backstretch=function(c){return a(c).data("backstretch")!==p};a.fn.backstretch.defaults={centeredX:!0,centeredY:!0,duration:5E3,fade:0};var r={left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},s={position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxHeight:"none",maxWidth:"none",zIndex:-999999},q=function(c,b,e){this.options=a.extend({},a.fn.backstretch.defaults,e||{});this.images=a.isArray(b)?b:[b];a.each(this.images,function(){a("<img />")[0].src=this});this.isBody=c===document.body;this.$container=a(c);this.$root=this.isBody?l?a(d):a(document):this.$container;c=this.$container.children(".backstretch").first();this.$wrap=c.length?c:a('<div class="backstretch"></div>').css(r).appendTo(this.$container);this.isBody||(c=this.$container.css("position"),b=this.$container.css("zIndex"),this.$container.css({position:"static"===c?"relative":c,zIndex:"auto"===b?0:b,background:"none"}),this.$wrap.css({zIndex:-999998}));this.$wrap.css({position:this.isBody&&l?"fixed":"absolute"});this.index=0;this.show(this.index);a(d).on("resize.backstretch",a.proxy(this.resize,this)).on("orientationchange.backstretch",a.proxy(function(){this.isBody&&0===d.pageYOffset&&(d.scrollTo(0,1),this.resize())},this))};q.prototype={resize:function(){try{var a={left:0,top:0},b=this.isBody?this.$root.width():this.$root.innerWidth(),e=b,g=this.isBody?d.innerHeight?d.innerHeight:this.$root.height():this.$root.innerHeight(),j=e/this.$img.data("ratio"),f;j>=g?(f=(j-g)/2,this.options.centeredY&&(a.top="-"+f+"px")):(j=g,e=j*this.$img.data("ratio"),f=(e-b)/2,this.options.centeredX&&(a.left="-"+f+"px"));this.$wrap.css({width:b,height:g}).find("img:not(.deleteable)").css({width:e,height:j}).css(a)}catch(h){}return this},show:function(c){if(!(Math.abs(c)>this.images.length-1)){var b=this,e=b.$wrap.find("img").addClass("deleteable"),d={relatedTarget:b.$container[0]};b.$container.trigger(a.Event("backstretch.before",d),[b,c]);this.index=c;clearInterval(b.interval);b.$img=a("<img />").css(s).bind("load",function(f){var h=this.width||a(f.target).width();f=this.height||a(f.target).height();a(this).data("ratio",h/f);a(this).fadeIn(b.options.speed||b.options.fade,function(){e.remove();b.paused||b.cycle();a(["after","show"]).each(function(){b.$container.trigger(a.Event("backstretch."+this,d),[b,c])})});b.resize()}).appendTo(b.$wrap);b.$img.attr("src",b.images[c]);return b}},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(0===this.index?this.images.length-1:this.index-1)},pause:function(){this.paused=!0;return this},resume:function(){this.paused=!1;this.next();return this},cycle:function(){1<this.images.length&&(clearInterval(this.interval),this.interval=setInterval(a.proxy(function(){this.paused||this.next()},this),this.options.duration));return this},destroy:function(c){a(d).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);c||this.$wrap.remove();this.$container.removeData("backstretch")}};var l,f=navigator.userAgent,m=navigator.platform,e=f.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],h=f.match(/Fennec\/([0-9]+)/),h=!!h&&h[1],n=f.match(/Opera Mobi\/([0-9]+)/),t=!!n&&n[1],k=f.match(/MSIE ([0-9]+)/),k=!!k&&k[1];l=!((-1<m.indexOf("iPhone")||-1<m.indexOf("iPad")||-1<m.indexOf("iPod"))&&e&&534>e||d.operamini&&"[object OperaMini]"==={}.toString.call(d.operamini)||n&&7458>t||-1<f.indexOf("Android")&&e&&533>e||h&&6>h||"palmGetResource"in d&&e&&534>e||-1<f.indexOf("MeeGo")&&-1<f.indexOf("NokiaBrowser/8.5.0")||k&&6>=k)})(jQuery,window);

et celui-là, qui pour moi fait l'aléatoire :

Code:

$.backstretch([
"http://i42.servimg.com/u/f42/09/02/42/97/amazon10.jpg"
, "http://i57.servimg.com/u/f57/12/41/17/54/guitou11.jpg"], {duration: 3000, fade: 750});

je n'avais donc activé que ces deux là   
il fallait autre chose ? désolée...

[Maxmax]

Alors en faite :
Le 1er code dit comment le 2nd va marcher (en gros).
Ainsi, ces deux codes servent uniquement pour l'aléatoire ^^
Remet donc le 1er code, et on va donc voir ce qui cloche.

[clechipey]

Voilà donc les 2 codes cités ci-dessus sont activés sur toutes les pages !

[Maxmax]

Désactive le 1er code (le plus long) et mets à la fin du 2ème code (le plus court) un ";"

[clechipey]

donc, le code 2 devient

Code:

$.backstretch([
"http://i42.servimg.com/u/f42/09/02/42/97/amazon10.jpg"
, "http://i57.servimg.com/u/f57/12/41/17/54/guitou11.jpg"], {duration: 3000, fade: 750});;

soit maintenant deux ";" puisqu'il en avait déjà un

[Maxmax]

Au temps pour moi, pas besoin de 2 ";" x) Retourne dans ton overall_header, supprime la ligne que je t'ai donné :

Code:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

Et tu vas la mettre ailleurs dans ton overall_header, cherche la ligne :

Code:

{HOSTING_JS}

Tu mets la ligne précédemment effacée juste au dessus de celle-ci.

[clechipey]

ok c'est fait !

[Maxmax]

Remplace le 2ème code par :

Code:

$(document).ready(function() {
$.backstretch([
"http://i42.servimg.com/u/f42/09/02/42/97/amazon10.jpg"
, "http://i57.servimg.com/u/f57/12/41/17/54/guitou11.jpg"], {duration: 3000, fade: 750});
});

Est-ce que ça marche mieux ? *croise les doigts*

[clechipey]

Bravo, c'est magique cette fois ! nickel vraiment tu assures !    merci tout plein

je sens que je vais pouvoir abuser de toi encore un peu...   
bon pas ce soir quand même, mais tu pourras sans doute éclairer mes lanternes avec le code que j'ai mis en provisoire sur le forum réel afin que lui également s'adapte aux écrans de différentes résolutions, ainsi qu'iphone, tablet et android ! parce que lui s'appliquera lors des changements de pages et pas en alternatif chronométré !

merci encore et bonne soirée ! je ne vais peut-être pas fermer le sujet pour le moment...  

Corinne 

[Maxmax]

Le script que tu as mis :

Code:

$(function() {
          var a = ["http://i57.servimg.com/u/f57/12/41/17/54/fond_d35.jpg", "http://i57.servimg.com/u/f57/12/41/17/54/fond_d31.jpg","http://i57.servimg.com/u/f57/12/41/17/54/fond_d32.jpg","http://i57.servimg.com/u/f57/12/41/17/54/fond_d33.jpg","http://i57.servimg.com/u/f57/12/41/17/54/fond_d34.jpg"];
          $("body").css("background-image", "url("+a[Math.floor(Math.random() * a.length)]+")")
        });

Met juste un fond aléatoirement, et non en fonction de la résolution.
Pour que ton fond s'adapte à la résolution, il faut déjà que tu prépares des fond pour chaque résolution (tu pourrais autrement utiliser le même pour toutes les résolutions, mais soit le fond sera déformé, ou alors il ne fera pas toute la page)

[clechipey]

Merci, c'est justement ce que j'imaginais qu'il était peut-être possible de faire, ajouter à celui-là une fonction, Backstretch ou similaire, qui évite d'avoir à préparer toutes les images en différentes résolutions et qui les recadres directement !
je crois qu'il y a quelque chose comme ça à insérer donc pour préparer les fonds

Code:


5.   $(function(){
6.   
7.   var bg= "Adresse image (largeur plus grande que 1600px)";
8.   
9.   if(screen.width < 801) bg="Adresse image (largeur 800px)";
10.   else if(screen.width < 1025) bg="Adresse image (largeur 1024px)";
11.   else if(screen.width < 1281) bg="Adresse image (largeur 1280px)";
12.   else if(screen.width < 1601) bg="Adresse image (largeur 1600px)";
13.   
14.   document.body.style.backgroundImage="url(\""+bg+"\")";
15.   
16.   });           
17.                
18.           }


[Maxmax]

Oui tout à fait, tu peux intégrer ce code à l'autre code ainsi :

Code:

$(document).ready(function() {
$.backstretch([
"http://i42.servimg.com/u/f42/09/02/42/97/amazon10.jpg"
, "http://i57.servimg.com/u/f57/12/41/17/54/guitou11.jpg"], {duration: 3000, fade: 750});

 
var bg= "Adresse image (largeur plus grande que 1600px)";

if(screen.width < 801) bg="Adresse image (largeur 800px)";
else if(screen.width < 1025) bg="Adresse image (largeur 1024px)";
else if(screen.width < 1281) bg="Adresse image (largeur 1280px)";
else if(screen.width < 1601) bg="Adresse image (largeur 1600px)";
  
document.body.style.backgroundImage="url(\""+bg+"\")";
});

[clechipey]

Merci, c'est cool ! je regarde ça demain alors....   bonne nuit

[clechipey]

Oui tout à fait, tu peux intégrer ce code à l'autre code ainsi :

Code:

$(document).ready(function() {
$.backstretch([
"http://i42.servimg.com/u/f42/09/02/42/97/amazon10.jpg"
, "http://i57.servimg.com/u/f57/12/41/17/54/guitou11.jpg"], {duration: 3000, fade: 750});

 
var bg= "Adresse image (largeur plus grande que 1600px)";

if(screen.width < 801) bg="Adresse image (largeur 800px)";
else if(screen.width < 1025) bg="Adresse image (largeur 1024px)";
else if(screen.width < 1281) bg="Adresse image (largeur 1280px)";
else if(screen.width < 1601) bg="Adresse image (largeur 1600px)";
  
document.body.style.backgroundImage="url(\""+bg+"\")";
});

Bonjour, pas toujours évident de se comprendre, surtout quand l'un des deux est loin du niveau de compétences du second   

c'est dans ce code (appelons le A) là que j'aurais voulu intégrer le "redimensionnement auto"

Code:

       $(function() {
                  var a = ["http://i57.servimg.com/u/f57/12/41/17/54/fond_d35.jpg", "http://i57.servimg.com/u/f57/12/41/17/54/fond_d31.jpg","http://i57.servimg.com/u/f57/12/41/17/54/fond_d32.jpg","http://i57.servimg.com/u/f57/12/41/17/54/fond_d33.jpg","http://i57.servimg.com/u/f57/12/41/17/54/fond_d34.jpg"];
                  $("body").css("background-image", "url("+a[Math.floor(Math.random() * a.length)]+")")
                });

celui que tu m'as aidé à installer sur mon forum "test" (appelons le B) lui redimensionne automatiquement l'image à ce que j'avais cru apercevoir sur ma tablette (?) mais par contre le défilement se fait de façon chronométrée (et il est nécessaire d'aller modifier le template) !

le code (A) lui est défilant au fil des "clics" mais ne redimensionne pas l'image, ce qui fait que le résultat est nickel sur un PC mais très moche sur mobile ou tablette ! voilà où je souhaiterai pouvoir mettre un redimensionnement auto donc