code backstretch ne fonctionne pas

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu code backstretch ne fonctionne pas

Message par clechipey le Jeu 24 Avr 2014 - 16:48

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

 scratch 

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  Rolling Eyes 

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


Dernière édition par clechipey le Mar 29 Avr 2014 - 21:11, édité 1 fois

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Dim 27 Avr 2014 - 10:04

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

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par Maxmax le Dim 27 Avr 2014 - 10:37

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

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Dim 27 Avr 2014 - 10:50

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

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Dim 27 Avr 2014 - 11:13

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 ! scratch 
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
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Dim 27 Avr 2014 - 13:40

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

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

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Dim 27 Avr 2014 - 17:12

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


clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par Maxmax le Dim 27 Avr 2014 - 18:17

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

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Dim 27 Avr 2014 - 18:29

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 !

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par Maxmax le Dim 27 Avr 2014 - 23:17

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)

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Lun 28 Avr 2014 - 7:20

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...  Non ! 

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par Maxmax le Lun 28 Avr 2014 - 18:51

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 ( ajout ).

(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 Smile)

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Lun 28 Avr 2014 - 19:38

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  scratch 

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par Maxmax le Lun 28 Avr 2014 - 20:13

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.

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Lun 28 Avr 2014 - 20:20

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

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par Maxmax le Lun 28 Avr 2014 - 20:55

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

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Lun 28 Avr 2014 - 21:03

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à  Embarassed 
il fallait autre chose ? désolée...

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par Maxmax le Lun 28 Avr 2014 - 21:25

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.

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Lun 28 Avr 2014 - 21:34

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

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par Maxmax le Lun 28 Avr 2014 - 21:41

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

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Lun 28 Avr 2014 - 21:47

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

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par Maxmax le Lun 28 Avr 2014 - 21:56

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.

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Lun 28 Avr 2014 - 22:06

ok c'est fait !

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par Maxmax le Lun 28 Avr 2014 - 22:15

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*

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Lun 28 Avr 2014 - 22:24

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

je sens que je vais pouvoir abuser de toi encore un peu...  Embarassed 
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...  Razz

Corinne 

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par Maxmax le Lun 28 Avr 2014 - 22:45

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)

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Lun 28 Avr 2014 - 22:56

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.           }

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par Maxmax le Lun 28 Avr 2014 - 23:18

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+"\")";
});

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Lun 28 Avr 2014 - 23:30

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

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code backstretch ne fonctionne pas

Message par clechipey le Mar 29 Avr 2014 - 11:31

@Maxmax a écrit: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  Mr. Green 

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  reflexion

clechipey
*

Féminin
Messages : 46
Inscrit(e) le : 02/12/2013

http://discusentreamis.positifforum.com/
clechipey a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum