L'annuaire des forums Forumactif
votre référence en terme de référencement et de développement de forums.
 




 Bandeau photos défilant

clem45avatar
Messages : 48
Bonjour à tous ! Sur le conseil de Mel', je me permet de venir posté ici, j'espère ne pas mettre trompé cette fois. Ma demande concerne un code html créant un bandeau photos évolutif, je m'explique :

Le lien du forum où le code sera installé :http://talbotsamba.forumpro.fr/
Lien de la publicité sur l'annuaire : En cours de réalisation... sur le portail, sur la page d'acceuil html, et dans une rubrique "partenaire" du forum
Support de mise en page : page HTML
Résultat en : HTML
Type de mise en page : Personnalisée
----------------------------------------------------
Plan :
Description plus détaillée : Bandeau html à l'aspect d'une pellicule où défilera les photos
Les couleurs :la pellicule : noir et blanc, les photos garde leurs couleurs originales
Texte : Aucun
Image(s) :
Pour le bandeau :
http://veropondaven.free.fr/images/pellicule3.png
http://www.stickers-decorhome.com/105-147-thickbox/sticker-pellicule-ci043.jpg

Les premières photos : (pleins d'autres ici : http://talbotsamba.forumpro.fr/t1829-l-image-du-mois-archive)
http://i62.servimg.com/u/f62/15/02/85/78/sl_pay21.jpg
http://i79.servimg.com/u/f79/12/99/07/65/ronded12.jpg
http://i68.servimg.com/u/f68/11/68/56/83/carte_10.jpg

D'autres commentaires : la partie la plus importante !  

Je désirerai créer un bandeau défilant. J'explique ce que l'on souhaite obtenir :
Notre forum possède une page d’accueil html, qui est en construction, http://talbotsamba.forumpro.fr/ , et nous affichons pour le moment uniquement l'image du mois. Je voudrais sous l'image du mois faire un bandeau-bannière où défile les photos, des mois précédents, les archives, qui figure dans un sujet sur le forum. Donc je recherche plus un code qu'une réalisation, car le bandeau évolue au fil des mois.

J'ai trouvé ce code là sur notre ami google :

Code:
Code:
<marquee align="center" height="5" scrolldelay="5" scrollamount="3" onmouseout="this.start()" onmouseover="this.stop()">
    <p>
    <img border="0" src="http://i62.servimg.com/u/f62/15/02/85/78/sl_pay21.jpg" alt="" hspace="0">
    <img border="0" src="http://i79.servimg.com/u/f79/12/99/07/65/ronded12.jpg" alt="" hspace="0">
    <img border="0" src="http://i68.servimg.com/u/f68/11/68/56/83/carte_10.jpg" alt="" hspace="0">
    </p></marquee>


Donc c'est à peu près ce que je souhaite, la photo s'arrête lorsque l'on met la souris dessus, c'est génial, mais par contre j'aimerai modéré la taille de l'image, car avec ce code les images ont leurs taille originale...

J'aimerai donc tous les mettre sur un pied d'égalité, et pas trop gros non plus, exemple 750 x 110px. Quelqu'un serait il faire cela ?


De plus, j'aimerai apporter une touche graphique, mais là je ne suis vraiment pas expert, en faisant défilé les photos dans une "pellicule", de ce genre : http://www.photos-elite.com/Pellicule%20rallye%20site%20.jpg avec du mouvement et en un peu plus classique peut-être...

Voili, voilou, je remercie pas avance vos réponses, remarques ou aide et à hâte de voir vos créations ! Encore merci et à très bientôt!
clem45avatar
Messages : 48
Re-Bonjour à tous !

J'ai essayé de travailler un peu sur mon code avec mon ami google et les différents forums qu'il me trouve, j'ai donc réussi à modérer la taille des images, ça avance !!

Voici le nouveau code :

Code:
 <marquee align "center" scrolldelay="5" scrollamount="3" onmouseout="this.start()" onmouseover="this.stop()">
            <p>
            <img height= "130"src="http://i62.servimg.com/u/f62/15/02/85/78/sl_pay21.jpg" alt="" hspace="0">
            <img height= "130"src="http://i79.servimg.com/u/f79/12/99/07/65/ronded12.jpg" alt="" hspace="0">
            <img height= "130"src="http://i68.servimg.com/u/f68/11/68/56/83/carte_10.jpg" alt="" hspace="0">
            </p></marquee>

Par contre je rencontre un nouveau problème, les image qui défilent passe derrière les image anciennement présentent sur la page... je vous laisse admirer : http://talbotsamba.forumpro.fr/ (en bas de la page)

Donc j'ai encore deux questions qui restent en suspend pour les spécialistes d'ici :
- Comment mettre au même plan mon bandeau et les autres images
- Comment créer un cadre autour du bandeau ? dans un premier temps, on verra ensuite pour l'aspect pellicule de ce cadre...

Merci d'avance ! à bientôt !
clem45avatar
Messages : 48
Bonjour à tous !

On ma conseillé le JQuery... je vais donc tenter ma chance dans ce codage, on verra bien !

Si quelqu'un connais ça comme sa poche ou qu'il veut apprendre avec moi, qu'il n'hésite pas à me faire signe car je suis un peu perdu, surtout que c'est souvent tout en anglais...

Merci d'avance !! A bientôt !
PhantasmagoriaV.I.P.avatar
Messages : 1019
Bonjour !

Tu voudrais créer un bandeau d'images qui défilent? Je pense qu'il te faudrait un service de graphiste pour cela et non de codeur vu que le code de défilement, tu l'as trouvé ^^
clem45avatar
Messages : 48
Bonsoir !

Mon sujet va finir par faire une belle partie de pingpong entre ces deux parties !

J'avais précédemment demandé dans la partie graphisme, mais on m'a conseillé de posté ici...
Il vrai que mon sujet touche au deux quand on regarde bien !

J'ai effectivement le code pour le défilement mais je n'arrive pas à l'habiller, car c'est ça réellement que je souhaite faire, que les images ne défilent pas simplement sur l'arrière plan, mais comment les faire défiler dans un cadre fixe et stylisé ? tel est la question...

Merci d'avoir porter intention à mon sujet, peut -être as tu une solution à mon problème ?

J'essaie aussi de chercher de mon côté comme je le dis dans mes précédent messages mais sois je cherche mal soit y a pas vraiment de réponse... mais comment font-ils ?

Merci encore, à bientôt
'ChristaV.I.P.avatar
Messages : 586
Bonjour !

En fait, pour t'aider à résoudre ton problème, il te faudrait, d'une part, l'habillage que tu souhaites. En effet, sur le principe, faire défiler des images sur un fond, ce n'est pas insurmontable (par contre, pour ma part, je me contenterai de lignes droites, donc l'illustration de pellicule ondulée que tu as donnée dans ton premier message, non je sais pas faire), mais les codeurs ne s'occupent pas du graphisme x)

Côté utilisation du jquery, je crois que j'avais, il n'y a pas si longtemps, utilisé un plugin très sympathique pour le défilement d'images, et relativement simple à maintenir (dans la mesure où il n'y a pas 500 photos x_x) [Cycle Plugin]

Il y a d'autres plugins de slideshow, genre celui-ci, reste à savoir ce que tu souhaites voir s'afficher.

M'enfin, tout cet étalage de confiture mis à part, ce que tu as fait en code simple me parait déjà tout à fait suffisant... comment se fait-il, cependant, qu'il y ait cette espèce de pub pour un... pommeau de voiture ? O.o

Peut être serait-il plus adéquat de donner le code de la page complète qu'on voit pourquoi il y a superposition de la pub sur les images qui défilent ?
clem45avatar
Messages : 48
Bonjour !

Tout d'abord un grand merci pour t'a réponse, je commençais à me sentir un peu seul (ici ou sur les autres forums d'ailleurs) , et merci pour la clarté des explications !

Pour l'image de fond, il est vrai que j'avais mis des exemple ondulé, mais ce n'est pas le résultat que je souhaitait, en effet je voulais en défilement dans un rectangle au forme rectiligne !! (la bannière ondulé était le seul exemple que j'avais trouvé sur google image...), si ce n'est pas insurmontable, il existe donc une façon de le coder ?

Pour le Jquery j'ai un peu laissé tombé, car très peu d'explication sur le net, et je pense que c'est très peu compatible avec nos forum gratuit... je me suis donc tourné vers du codage "classique" et j'ai réussi à trouver des choses assez sympa par rapport à ce que je cherche à faire ! le résultat n'est pas encore top, mais déjà mieux qu'avant je vous invite à le vérifier par vous mm sur cette page : http://talbotsamba.forumpro.fr/

Voici le code que j'ai utilisé :

Code:
<marquee align "center" height="5" scrolldelay="5" scrollamount="3" onmouseout="this.start()" onmouseover="this.stop()">
    <p>
    <img height= "130"src="http://i62.servimg.com/u/f62/15/02/85/78/sl_pay21.jpg" alt="" hspace="0">
    <img height= "130"src="http://i79.servimg.com/u/f79/12/99/07/65/ronded12.jpg" alt="" hspace="0">
    <img height= "130"src="http://i68.servimg.com/u/f68/11/68/56/83/carte_10.jpg" alt="" hspace="0">
<img height= "130"src="http://www.photoservice.com/volumeLR/phs_volume20081006/20512824_3964702/m_82892568_0.jpg" alt="" hspace="0">
<img height= "130"src="http://i46.servimg.com/u/f46/12/06/22/81/p1050713.jpg" alt="" hspace="0">
<img height= "130"src="http://i24.servimg.com/u/f24/11/79/04/97/samba_10.jpg" alt="" hspace="0">
<img height= "130"src="http://zerogoki.free.fr/samba/P1000572.JPG" alt="" hspace="0">
<img height= "130"src="http://i47.servimg.com/u/f47/12/27/33/23/im000519.jpg" alt="" hspace="0">
<img height= "130"src="http://i40.servimg.com/u/f40/13/10/40/74/dsc00818.jpg" alt="" hspace="0">
<img height= "130"src="http://i48.servimg.com/u/f48/12/48/60/01/monte_14.jpg" alt="" hspace="0">
<img height= "130"src="http://i71.servimg.com/u/f71/13/41/52/10/dscf0012.jpg" alt="" hspace="0">
    </p></marquee>

  <script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="800px"
//Specify the slider's height
var sliderheight="150px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<img height= "140" src="http://i62.servimg.com/u/f62/15/02/85/78/sl_pay21.jpg" border=1>'
leftrightslide[1]='<img height= "140" src="http://i79.servimg.com/u/f79/12/99/07/65/ronded12.jpg" border=1>'
leftrightslide[2]='<img height= "140" src="http://i68.servimg.com/u/f68/11/68/56/83/carte_10.jpg" border=1>'
leftrightslide[3]='<img height= "140" src="http://www.photoservice.com/volumeLR/phs_volume20081006/20512824_3964702/m_82892568_0.jpg" border=1>'
leftrightslide[4]='<img height= "140" src="http://i46.servimg.com/u/f46/12/06/22/81/p1050713.jpg" border=1>'
leftrightslide[5]='<img height= "140" src="http://i24.servimg.com/u/f24/11/79/04/97/samba_10.jpg" border=1>'
leftrightslide[6]='<img height= "140" src="http://zerogoki.free.fr/samba/P1000572.JPG" border=1>'
leftrightslide[7]='<img height= "140" src="http://i47.servimg.com/u/f47/12/27/33/23/im000519.jpg" border=1>'
leftrightslide[8]='<img height= "140" src="http://i40.servimg.com/u/f40/13/10/40/74/dsc00818.jpg" border=1>'
leftrightslide[9]='<img height= "140" src="http://i48.servimg.com/u/f48/12/48/60/01/monte_14.jpg" border=1>'
leftrightslide[10]='<img height= "140" src="http://i71.servimg.com/u/f71/13/41/52/10/dscf0012.jpg" border=1>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>

Je vois déjà vos yeux grand ouvert de surprise et d'incompréhension sur la longueur de ce code !! Je le trouve moi aussi très long trop long même... bon y a déjà un petit bout à la fin que l'on peut supprimer pour ne pas avoir le lien de pub... mais à part ça... je coince un peu !
Pour ce qui est de notre pub de pommeau de vitesse elle a désormais laissé sa place et la mise en page est dans l'ordre... mais au vue de mon code je me demande si je n'ai pas 2 bandeau d'image superposé !! J'ai donc voulu supprimé le code qui est le premier ci dessus entre la balise "marquee"... et là surprise il n'y a plus rien !! et là je suis encore plus perdu... l'un a besoin de l'autre pour fonctionner et vis versa ? que puis je modifier supprimer à votre avis ??

J'espère ne pas m'enliser et vous faire des cheveux blanc sur ce code, mais là je suis complètement perdu... je modifie des chose à tâtons mais n'ayant que peu de connaissance je n'avance pas bien vite... alors n'hésitez pas si vous avez remarqué quelques choses ou si vous avez la recette miracle !

Encore merci pour votre aide ! A bientôt !
'ChristaV.I.P.avatar
Messages : 586
En réalité, ForumActif supporte très bien le JQuery, et tu en trouves déjà de base dans les annonces défilantes et quelques autres éléments XD D'ailleurs, pour information, il y a du Javascript dans le code que tu donnes ^^'

Et comme je trouve que le code javascript est trop lourd, je le vire (joie), ta pellicule marcherait très bien comme ça :

Dans le CSS de ton forum tu mets ceci :


Et à la place de ce que tu m'as donné tu mets ça :


Je n'aime pas trop la balise marquee mais techniquement c'est ce qui a de plus simple '_' Après, plutôt que de mettre de grosses bordures noires comme j'ai fait (côté CSS) il te suffirait simplement d'avoir un fond "pellicule" et roule arthur '_'
clem45avatar
Messages : 48
Merci pour les détails, je savais pour le javascript qui était bien pris en compte par les forums, mais je ne savais pas que le jquery était un codage similaire (oui oui je débute lol) ...

Un autre grand merci pour la simplification de mes codes, et cela fonctionne à merveille !! Je me suis permis de diminuer la taille car au final 150px je trouve ça un peu trop enfin ce n'est qu'un détail, qui me regarde d'ailleurs lol...

mais ce serait trop beau si j'avais fini avec mes questions lol :
- Avec mon précédent code, les images tournées en boucle, il n'y avait pas d'espace entre la dernière et la première, et le trucs que je trouvais vraiment sympa c'est que lors de l'arrivée sur la page la première photo ne commence pas à défiler de la droite avec un grand blanc devant mais directement à gauche avec les autres à a suite... j'ai un peu cherché dans mon ancien code mais je n'ai pas trouvé la bonne ligne qui permettait de faire ça. Une idée ?

- Pour ce qui est du fond pellicule à la place des bande noir extérieur, il faut donc remplacer dans le css, la ligne border par un backround contenant une image ?

Encore un grand merci, continuons ainsi on va y arriver lol , je l'aurai grâce à toi !
'ChristaV.I.P.avatar
Messages : 586
Ah, pour avoir un défilement continu, il faut utiliser du javascript en effet (Par ailleurs, le JQuery, c'est une bibliothèque javascript. Vois ça comme une boite à outils : plutôt que de construire tes outils en plus de ta maison, tu construits ta maison avec les outils qui sont dans la boite x) )

Pour le fond pellicule, en effet il faudra remplacer les bordures par un background x)

Sinon, j'ai tenté de trouver un plugin jquery qui ne lague pas sur mon ordi et qui fonctionne bien sur forumactif, et ça me donne ça (sans réglages supplémentaires pour le moment, là j'ai fait ça à la truelle XD)

clem45avatar
Messages : 48
Salut Christa !!

Merci beaucoup pour ton implication Wink !

C'est vrai que ça donne bien en jquery ! Par contre pour les petites connexion j'ai l'impression que ce n'est pas la meilleurs solus', enfin bon ça devient rare... que me conseil tu de continuer en classique ou de te suivre dans le Jquery ?

Bon comme tu dis ça était fait à la truelle lol, mais mis à part le manque d'espacement entre les photos et toujours ces fameuse bordures style péliculle il ne manque pas grand chose... si ?

Dans tous les cas il faut que je créer un backround donc déjà je vais essayer de faire ça, pour la mettre à ta disposition... sa peut ce faire avec un format image simplement ? et je remplace dans le css la couleur du backround par l'adresse de l'image après qu'elle soit hébergé ?

Encore merci ! à très bientôt !
'ChristaV.I.P.avatar
Messages : 586
*Revient après avoir changé son clavier, l'autre étant mort* Ah bah oui, en jQuery c'est assez lourd oui ^^' C'est un choix à faire, la balise marquee (bien que propriétaire) est relativement simple à gérer, mais n'a pas d'effet 'infini'.

Même le CSS est compliqué d'ailleurs. Donc j'attends de voir si tu as une image à me fournir (attention : le fond restera fixe !) pour te donner tout ça @_@
clem45avatar
Messages : 48
Salut ! trop de programmation lol le clavier ne s'en ai pas remis !

Très ben pour les explication , souhaitant vraiment que le bandeau défile à l'infini on va donc rester en JQuery je pense...

Je suis bien conscient que le fond sera fixe, ça ne me dérange pas.
Voici l'image que je peux fournir :

http://i45.servimg.com/u/f45/11/25/76/38/fondpe10.jpg

Si elle est trop grande n'hésite pas à la découpé, mais j'aimerai que les deux bordures droite et gauche reste ainsi.
Pour te donner un petit détail en plus j'aimerai un léger espacement entre les photospar une bordure noir.
Et puis une petite question, comment rajoute t’ont des photos dans le code Jquery ? car mon bandeau évolue tous les mois...

Merci d'avance ! Wink ! A bientôt !
'ChristaV.I.P.avatar
Messages : 586
Hello, me revoilà ! Désolée de l'absence, pas mal de trucs en cours. T'es toujours dans le coin ? @_@
clem45avatar
Messages : 48
'Christa a écrit:
Hello, me revoilà ! Désolée de l'absence, pas mal de trucs en cours. T'es toujours dans le coin ? @_@

Salut !! pas de soucis pour l’absence, la preuve plus de 10 jours sépare mon message du tiens ... bref oui je suis toujours dans le coin et bien sur la commande est toujours d'actu'. Ce n'est pas à la minute donc passe tes priorité en premier, ça met égal...
Merci de ton implication, à bientôt.
'ChristaV.I.P.avatar
Messages : 586
J'allais m'en occuper mais c'est maintenant une otite qui me rend totalement naze =.= Je t'oublie pas, hein.
clem45avatar
Messages : 48
'Christa a écrit:
J'allais m'en occuper mais c'est maintenant une otite qui me rend totalement naze =.= Je t'oublie pas, hein.

pas de soucis Wink bon rétablissement...
'ChristaV.I.P.avatar
Messages : 586
Encore une fois, désolée pour le retard ! Voici ce que donne le code :



Et voici le code source. Attention, c'est poilu '_' On va commencer par le Javascript, dans ton PA (Panneau Admin), rends toi à l'onglet "Modules" et tout en bas dans "Gestion des codes Javascript".

Crée toi un nouveau Javascript avec le nom de SimplyScroll, c'est le plugin JQuery que j'ai trouvé, et colles y donc ledit plugin :
Code:
/*
 * simplyScroll 1.0.4 - a scroll-tastic jQuery plugin
 *
 * http://logicbox.net/jquery/simplyscroll
 * http://logicbox.net/blog/simplyscroll-jquery-plugin
 * http://plugins.jquery.com/project/simplyScroll
 *
 * Copyright (c) 2009 Will Kelly - http://logicbox.net
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * Last revised: 03/07/2009 21:13
 *
 */

(function($){$.fn.simplyScroll=function(o){return this.each(function(){new $.simplyScroll(this,o);});};var defaults={className:'simply-scroll',frameRate:24,speed:1,horizontal:true,autoMode:'off',pauseOnHover:true,startOnLoad:false,localJsonSource:'',flickrFeed:'',jsonImgWidth:240,jsonImgHeight:180};$.simplyScroll=function(el,o){var self=this;this.o=$.extend({},defaults,o||{});this.auto=this.o.autoMode!=="off"?true:false;this.$list=$(el);this.$list.addClass('simply-scroll-list').wrap('<div class="simply-scroll-clip"></div>').parent().wrap('<div class="'+this.o.className+' simply-scroll-container"></div>');if(!this.o.auto){this.$list.parent().parent().prepend('<div class="simply-scroll-forward"></div>').prepend('<div class="simply-scroll-back"></div>');}
if(this.o.flickrFeed){$.getJSON(this.o.flickrFeed+"&format=json&jsoncallback=?",function(data){json=[];$.each(data.items,function(i,item){json.push({"src":item.media.m,"title":item.title,"link":item.link});});self.renderData(json);});}else if(this.o.localJsonSource){$.getJSON(this.o.localJsonSource,function(json){self.renderData(json);});}else{if(!this.o.startOnLoad){this.init();}else{$(window).load(function(){self.init();});}}};$.simplyScroll.fn=$.simplyScroll.prototype={};$.simplyScroll.fn.extend=$.simplyScroll.extend=$.extend;$.simplyScroll.fn.extend({init:function(){this.$items=this.$list.children();this.$clip=this.$list.parent();this.$container=this.$clip.parent();if(!this.o.horizontal){this.itemMax=this.$items.eq(0).outerHeight(true);this.clipMax=this.$clip.height();this.dimension='height';this.moveBackClass='simply-scroll-btn-up';this.moveForwardClass='simply-scroll-btn-down';}else{this.itemMax=this.$items.eq(0).outerWidth(true);this.clipMax=this.$clip.width();this.dimension='width';this.moveBackClass='simply-scroll-btn-left';this.moveForwardClass='simply-scroll-btn-right';}
this.posMin=0;this.posMax=this.$items.length*this.itemMax;this.$list.css(this.dimension,this.posMax+'px');if(this.o.autoMode=='loop'){var addItems=Math.ceil(this.clipMax/this.itemMax);this.$items.slice(0,addItems).clone(true).appendTo(this.$list);this.posMax+=(this.clipMax-this.o.speed);this.$list.css(this.dimension,this.posMax+(this.itemMax*addItems)+'px');}
this.interval=null;this.intervalDelay=Math.floor(1000/this.o.frameRate);while(this.itemMax%this.o.speed!==0){this.o.speed--;if(this.o.speed===0){this.o.speed=1;break;}}
var self=this;this.trigger=null;this.funcMoveBack=function(){self.trigger=this;self.moveBack();};this.funcMoveForward=function(){self.trigger=this;self.moveForward();};this.funcMoveStop=function(){self.moveStop();};this.funcMoveResume=function(){self.moveResume();};if(this.auto){if(this.o.pauseOnHover){this.$clip.hover(this.funcMoveStop,this.funcMoveResume);}
this.moveForward();}else{this.$btnBack=$('.simply-scroll-back',this.$container).addClass('simply-scroll-btn'+' '+this.moveBackClass+' '+'disabled').hover(this.funcMoveBack,this.funcMoveStop);this.$btnForward=$('.simply-scroll-forward',this.$container).addClass('simply-scroll-btn'+' '+this.moveForwardClass).hover(this.funcMoveForward,this.funcMoveStop);}},moveForward:function(){var self=this;this.movement='forward';if(this.trigger!==null){this.$btnBack.removeClass('disabled');}
self.interval=setInterval(function(){if(!self.o.horizontal&&self.$clip[0].scrollTop<(self.posMax-self.clipMax)){self.$clip[0].scrollTop+=self.o.speed;}else if(self.o.horizontal&&self.$clip[0].scrollLeft<(self.posMax-self.clipMax)){self.$clip[0].scrollLeft+=self.o.speed;}else if(self.o.autoMode=='loop'){self.resetPos();}else{self.moveStop(self.movement);}},self.intervalDelay);},moveBack:function(){var self=this;this.movement='back';if(this.trigger!==null){this.$btnForward.removeClass('disabled');}
self.interval=setInterval(function(){if(!self.o.horizontal&&self.$clip[0].scrollTop>0){self.$clip[0].scrollTop-=self.o.speed;}else if(self.o.horizontal&&self.$clip[0].scrollLeft>0){self.$clip[0].scrollLeft-=self.o.speed;}else if(self.o.autoMode=='loop'){self.resetPos();}else{self.moveStop(self.movement);}},self.intervalDelay);},moveStop:function(moveDir){clearInterval(this.interval);if(this.trigger!==null){if(typeof moveDir!="undefined"){$(this.trigger).addClass('disabled');}
this.trigger=null;}
if(this.auto){if(this.o.autoMode=='bounce'){moveDir=='forward'?this.moveBack():this.moveForward();}}},moveResume:function(){this.movement=='forward'?this.moveForward():this.moveBack();},resetPos:function(){if(!this.o.horizontal){this.$clip[0].scrollTop=0;}else{this.$clip[0].scrollLeft=0;}},renderData:function(json){if(json.length>0){var self=this;$.each(json,function(i,item){$("<img/>").attr({src:item.src,title:item.title,alt:item.title,width:self.o.jsonImgWidth,height:self.o.jsonImgHeight}).appendTo(self.$list);});this.init();}}});})(jQuery);
Tu coche la case "Sur le portail" et tu valide.
Maintenant, crées un nouveau Javascript avec ce code (toujours avec juste la case "sur le portail" d'activée :
Code:
(function($) {
   $(function() { //on DOM ready
      $("#scroller").simplyScroll({
         autoMode: 'loop'
      });
   });
})(jQuery);
Et tu valide.

Côté CSS, il y a un code "par défaut" accompagnant le Plugin, et mes propres modifs avec. Rends toi dans l'onglet Apparence > Couleurs > Feuille de Style CSS et ajoute le code suivant :

En enfin (on va y arriver) voici le code de ton bandeau défilant, à rajouter dans la page HTML que tu as comme portail :



Fais moi signe si tu as besoin d'explications supplémentaires @x@
clem45avatar
Messages : 48
Bonsoir !!

Désoler, vraiment pas eu le temps de me connecter sérieusement ces dernier temps !

Le résultat est génial, je viens de tous mettre en place, ça fonctionne parfaitement !! jamais je n'aurai réussi à faire tous ça !! Un grand merci pour ta réalisation et le temps que tu y a passé !!

Bon comme je suis quelqu'un de plutôt casse bonbon, est il possible d'ajouter ces petit détails :
- une vitesse un peu plus rapide,
- une séparation entre les photos de quelques pixels,

N'hésite pas , encore merci, A bientôt
Clément.
'ChristaV.I.P.avatar
Messages : 586
Hello !

Pour modifier la vitesse, tu dois modifier le deuxième code JQuery que je t'ai donné :
Il te suffit d'augmenter ou de diminuer la valeur de speed pour ajuster la vitesse de défilement à ton goût.

Et dans le CSS que je t'ai donné, modifie cette partie :
Code:
.simply-scroll .simply-scroll-list li img {
  max-height:115px;
}

Et remplace-la par ceci :
Code:
.simply-scroll .simply-scroll-list li img {
  max-height:115px;
  border-left:2px solid #000000;
  border-right:2px solid #000000;
}
clem45avatar
Messages : 48
Salut !

Eh bien cette fois c'est parfais, les améliorations viennent cloturer le travail, superbe réalisation, merci à toi pour ce beau boulot, tes explications concrètes et ton implication !!

Commande terminée !! Au plaisir d'en faire d'autres Wink

A bientôt et encore merci Wink
Clément.

,
 Sujets similaires
-
» Bandeau photos défilant
» [Resolu] bandeau défilent d'image...saccadé
» texte défilant
» Album Photos de famille
» Hébergement gratuit images photos fichiers

Répondre au sujet


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

Modérer

Trames

  • Nos services
  • Prés. obligatoire
  • Référencé
  • Réf. (comp)
  • Prérelance
  • 1ère relance
  • 2ème relance
  • Recherche (relance)
  • Recherche (corbeille)
  • Formulaire manquant
  • Formulaire incomplet
  • 1
  • 2
  • 3
  • 4
  • 5
  • Evaluation