Quelle logiciel ?
4 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème divers :: Archives des problèmes divers
Page 1 sur 1 • Partagez
Quelle logiciel ?
Bonjours.
En cette belle journée (ou pas) j'aimerai bien installer cette chose sur mon forum qui défile cela serai bien :
Il faut installer quoi ? Est ce un logiciel ?
Merci d'avance pour les réponses.
Cordialement.
En cette belle journée (ou pas) j'aimerai bien installer cette chose sur mon forum qui défile cela serai bien :
Il faut installer quoi ? Est ce un logiciel ?
Merci d'avance pour les réponses.
Cordialement.
Dernière édition par Stankiller le Mar 28 Juin 2011 - 1:53, édité 1 fois
Re: Quelle logiciel ?
Bonjour !
Qui défilerait mais où ? En bannière, vous voulez dire ? Ou en page d'accueil ?
Qui défilerait mais où ? En bannière, vous voulez dire ? Ou en page d'accueil ?
Re: Quelle logiciel ?
Je voudrai le mettre dans Affichage <<< Généralité.
Re: Quelle logiciel ?
Bonjours, Stankiller!
A tu le code "HTML" de cette chose ?
Si tu ne la pas tu ne peux pas l'installer
A tu le code "HTML" de cette chose ?
Si tu ne la pas tu ne peux pas l'installer
Alex Fowl- Membre actif
-
Messages : 7557
Inscrit(e) le : 28/03/2009
Re: Quelle logiciel ?
@Xvaly : Non j'ai pas le code du HTML concernant cette chose.
@Alex Fowl : Merci du lien , j'ai pris un code HTML :
J'ai le code HTML mais quelqu'un pourrait m'expliquer comment mettre des photos ? Ou faire autre chose car là je suis perdu.
Cordialement.
@Alex Fowl : Merci du lien , j'ai pris un code HTML :
- Code:
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper">
<!-- REGULAR IMAGE PANEL -->
<img src="images/tempphoto-1.jpg" alt="temp" />
<div class="photo-meta-data">
Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a>
<span>"Free Tibet" Protest at the Olympic Torch Rally</span>
</div>
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<!-- PANEL CONTENT -->
</div>
</div>
<div class="panel" title="Panel 3">
<div class="wrapper">
<!-- EXAMPLE OF OTHER PANEL POSSIBILITIES -->
<img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
<h1>How to Cook a Scotch Egg</h1>
<ul>
<li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
<li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
<li>1/2 cup AP flour</li>
<li>1-2 eggs, beaten</li>
<li>3/4 cup panko-style bread crumbs</li>
<li>Vegetable oil for frying</li>
</ul>
</div>
</div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<!-- PANEL CONTENT -->
</div>
</div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<!-- PANEL CONTENT -->
</div>
</div>
<div class="panel" title="Panel 6">
<div class="wrapper">
<!-- PANEL CONTENT -->
</div>
</div>
</div>
</div>
<!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
AND THE CLASS="CROSS-LINK" ARE REQUIRED -->
<a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
<div id="movers-row">
<div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
</div>
</div>
J'ai le code HTML mais quelqu'un pourrait m'expliquer comment mettre des photos ? Ou faire autre chose car là je suis perdu.
Cordialement.
Re: Quelle logiciel ?
Bonsoir,
Puis-je avoir le lien du site d’où vous avez eu ce slider ?
Cordialement,
Puis-je avoir le lien du site d’où vous avez eu ce slider ?
Cordialement,
Alex Fowl- Membre actif
-
Messages : 7557
Inscrit(e) le : 28/03/2009
Re: Quelle logiciel ?
Le voilà : http://css-tricks.com/889-creating-a-slick-auto-playing-featured-content-slider/Alex Fowl a écrit:Bonsoir,
Puis-je avoir le lien du site d’où vous avez eu ce slider ?
Cordialement,
Cordialement.
Re: Quelle logiciel ?
Bonsoir,
- Pour installer le code :
Panneau d'administration ==> Général ==> Les moteurs de recherche ==> Balises supplémentaires ==> ==> Lier un javascript :
Faire cette opération pour ces quatre liens :
http://css-tricks.com/examples/FeaturedContentSlider/js/jquery-1.2.6.min.js
http://css-tricks.com/examples/FeaturedContentSlider/js/jquery-easing-1.3.pack.js
http://css-tricks.com/examples/FeaturedContentSlider/js/jquery-easing-compatibility.1.2.pack.js
http://css-tricks.com/examples/FeaturedContentSlider/js/coda-slider.1.1.1.pack.js
Panneau d'administration ==> Affichage ==> Gestion des images ==> Feuille de style css ==> Coller ce code :
Panneau d'administration ==> Affichage ==> Page d'accueil ==> Généralités ==> Message sur la page d'accueil ==> Ce code :
- Pour le modifier :
Dans le dernier code :
Tout ce qui est texte : Texte 1, Texte 2 ...
Les parties : Grande_image1, Grande_image2 : A remplacer par un lien vers vos images grand format (419x282).
Les parties : Petite_image1, Petite_image2 : A remplacer par un lien vers vos images petit format (60x40).
- Plus :
Ce tutoriel.
Cordialement,
- Pour installer le code :
Panneau d'administration ==> Général ==> Les moteurs de recherche ==> Balises supplémentaires ==> ==> Lier un javascript :
Faire cette opération pour ces quatre liens :
http://css-tricks.com/examples/FeaturedContentSlider/js/jquery-1.2.6.min.js
http://css-tricks.com/examples/FeaturedContentSlider/js/jquery-easing-1.3.pack.js
http://css-tricks.com/examples/FeaturedContentSlider/js/jquery-easing-compatibility.1.2.pack.js
http://css-tricks.com/examples/FeaturedContentSlider/js/coda-slider.1.1.1.pack.js
Panneau d'administration ==> Affichage ==> Gestion des images ==> Feuille de style css ==> Coller ce code :
- Code:
* { margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
/*
UTILITY STYLES
*/
.floatLeft { float: left; margin-right: 10px;}
.floatRight { float: right; }
.clear { clear: both; }
a { outline: none; }
/*
PAGE STRUCTURE
*/
#page-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px;
background: url(http://css-tricks.com/examples/FeaturedContentSlider/images/bg.png) top center; }
/*
TYPOGRAPHY
*/
ul { list-style: square inside; }
a, a:visited { color: #729dff; text-decoration: none; }
a:hover, a:active { color: white; }
blockquote { padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px;
font-family: Georgia, serif; font-style: italic; margin-top: 10px;}
/*
SLIDER
*/
.slider-wrap { width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer { position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row { margin: -43px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data { background: url(http://css-tricks.com/examples/FeaturedContentSlider/images/transpBlack.png); padding: 10px; height: 30px;
margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -14px;
position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb { background: transparent url(http://css-tricks.com/examples/FeaturedContentSlider/images/icon-uparrowsmallwhite.png) top center no-repeat; }
Panneau d'administration ==> Affichage ==> Page d'accueil ==> Généralités ==> Message sur la page d'accueil ==> Ce code :
- Code:
<script type="text/javascript">
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;
theInterval = function(cur){
clearInterval(theInt);
if( typeof cur != 'undefined' )
curclicked = cur;
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function(){
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 6 == curclicked )
curclicked = 0;
}, 3000);
};
$(function(){
$("#main-photo-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});
theInterval();
});
</script>
<div id="page-wrap">
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper">
<img src="Grande_image1" alt="temp" />
<div class="photo-meta-data"> Texte 1<br />
<span>Texte 2</span>
</div>
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<img src="Grande_image2" alt="temp" />
<div class="photo-meta-data">Texte 3<br />
<span>Texte 4</span>
</div>
</div>
</div>
<div class="panel" title="Panel 3">
<div class="wrapper">
<img src="Grande_image3" alt="" class="floatLeft"/>
Texte 5
</div>
</div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<img src="Grande_image4" alt="temp" />
<div class="photo-meta-data">
Texte 6<br />
<span>Texte 7</span>
</div>
</div>
</div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<img src="Grande_image5" alt="temp" />
<div class="photo-meta-data">
Texte 8<br />
<span>Texte 9</span>
</div>
</div>
</div>
<div class="panel" title="Panel 6">
<div class="wrapper">
Texte 10
</div>
</div>
</div>
</div>
<a href="#1" class="cross-link active-thumb"><img src="Petite_image1" class="nav-thumb" alt="temp-thumb" /></a>
<div id="movers-row">
<div><a href="#2" class="cross-link"><img src="Petite_image2" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#3" class="cross-link"><img src="Petite_image3" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#4" class="cross-link"><img src="Petite_image4" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#5" class="cross-link"><img src="Petite_image5" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#6" class="cross-link"><img src="Petite_image6" class="nav-thumb" alt="temp-thumb" /></a></div>
</div>
</div>
</div>
- Pour le modifier :
Dans le dernier code :
Tout ce qui est texte : Texte 1, Texte 2 ...
Les parties : Grande_image1, Grande_image2 : A remplacer par un lien vers vos images grand format (419x282).
Les parties : Petite_image1, Petite_image2 : A remplacer par un lien vers vos images petit format (60x40).
- Plus :
Ce tutoriel.
Cordialement,
Bonjour, Afin de faciliter les recherches ultérieures, merci de respecter les règles concernant le titre de votre sujet. En effet, votre titre :
- ne doit pas être en majuscules, - ne doit pas contenir de mots trop généralistes : "aide" ; "help" ; "besoin d'aide" ; "problème"... Merci de le modifier en cliquant sur le bouton de votre premier message. A bientôt sur ForumActif |
Alex Fowl- Membre actif
-
Messages : 7557
Inscrit(e) le : 28/03/2009
Re: Quelle logiciel ?
Merci mais par contre si j'ai bien compris je fait lier un javascript puis sélectionner après je met le lien sur Référencement : métatags puis je fais ajouter pour les quatres liens ?
Après ^pour les codes pas de problèmes par contre quand je met le code sur la feuille de style CSS il y a les noms des membres ou on a déja cliquer dessus deviennent bleu et ceux non qui sont blanc alors que dès que j'avais pas mis ce code cela ne me le fesait pas et la position du logo est à gauche alors que je l'ai mis centré dans PA comment faire ?
Après j'ai mis le code dans généralités ça il y a pas de problèmes merci pour les instructions j'essayerai de me débrouillez.
Merci pour le tutoriel.
Après
Après ^pour les codes pas de problèmes par contre quand je met le code sur la feuille de style CSS il y a les noms des membres ou on a déja cliquer dessus deviennent bleu et ceux non qui sont blanc alors que dès que j'avais pas mis ce code cela ne me le fesait pas et la position du logo est à gauche alors que je l'ai mis centré dans PA comment faire ?
Après j'ai mis le code dans généralités ça il y a pas de problèmes merci pour les instructions j'essayerai de me débrouillez.
Merci pour le tutoriel.
Après
Re: Quelle logiciel ?
Bonsoir,
Pour les javascripts :
Lier un javascript ==> Sélectionner ==> Attribut "src" : Collez un premier lien et enregistrez.
Il s'agit de la manipulation à faire pour les quatre liens.
Pour le css, remplacez le code par :
Cordialement,
Pour les javascripts :
Lier un javascript ==> Sélectionner ==> Attribut "src" : Collez un premier lien et enregistrez.
Il s'agit de la manipulation à faire pour les quatre liens.
Pour le css, remplacez le code par :
- Code:
/*
UTILITY STYLES
*/
.floatLeft { float: left; margin-right: 10px;}
.floatRight { float: right; }
.clear { clear: both; }
a { outline: none; }
/*
PAGE STRUCTURE
*/
#page-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px;
background: url(http://css-tricks.com/examples/FeaturedContentSlider/images/bg.png) top center; }
/*
TYPOGRAPHY
*/
ul { list-style: square inside; }
/*
SLIDER
*/
.slider-wrap { width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer { position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row { margin: -43px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data { background: url(http://css-tricks.com/examples/FeaturedContentSlider/images/transpBlack.png); padding: 10px; height: 30px;
margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -14px;
position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb { background: transparent url(http://css-tricks.com/examples/FeaturedContentSlider/images/icon-uparrowsmallwhite.png) top center no-repeat; }
Cordialement,
Alex Fowl- Membre actif
-
Messages : 7557
Inscrit(e) le : 28/03/2009
Re: Quelle logiciel ?
Ok merci comment on fait pour réglé leur taille ?
Cordialement.
Cordialement.
Re: Quelle logiciel ?
Bonsoir,
Pour modifier la taille de vos images ?
Il vous faut utiliser un logiciel de type Photoshop, ou gimp.
Vous pouvez toujours faire une demande dans la section graphique : https://forum.forumactif.com/f53-
Cordialement,
Pour modifier la taille de vos images ?
Il vous faut utiliser un logiciel de type Photoshop, ou gimp.
Vous pouvez toujours faire une demande dans la section graphique : https://forum.forumactif.com/f53-
Cordialement,
Alex Fowl- Membre actif
-
Messages : 7557
Inscrit(e) le : 28/03/2009
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème divers :: Archives des problèmes divers
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum