Quelle logiciel ?

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

Résolu Quelle logiciel ?

Message par Stankiller le Dim 26 Juin 2011 - 16:50

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.


Dernière édition par Stankiller le Mar 28 Juin 2011 - 1:53, édité 1 fois

Stankiller
**

Messages : 64
Inscrit(e) le : 14/06/2011

http://royal-universe.forum-gratuit.net/
Stankiller a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Quelle logiciel ?

Message par Papione le Dim 26 Juin 2011 - 17:00

Bonjour !
Qui défilerait mais où ? En bannière, vous voulez dire ? Ou en page d'accueil ? Smile

Papione
*****

Féminin
Messages : 614
Inscrit(e) le : 13/09/2010

http://faqharrypotter.creer-forums.com/forum.htm
Papione a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Quelle logiciel ?

Message par Stankiller le Dim 26 Juin 2011 - 17:21

Je voudrai le mettre dans Affichage <<< Généralité.

Stankiller
**

Messages : 64
Inscrit(e) le : 14/06/2011

http://royal-universe.forum-gratuit.net/
Stankiller a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Quelle logiciel ?

Message par TheOursBlanc le Dim 26 Juin 2011 - 18:43

Bonjours, Stankiller!

A tu le code "HTML" de cette chose ?
Si tu ne la pas tu ne peux pas l'installer

TheOursBlanc
*****

Masculin
Messages : 801
Inscrit(e) le : 22/02/2011

http://astuceinternet.forumactif.fr
TheOursBlanc a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Quelle logiciel ?

Message par Alex Fowl le Dim 26 Juin 2011 - 18:47

Bonjour,

Vous pourrez en trouver plusieurs ici : Lien.

Cordialement,

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Quelle logiciel ?

Message par Stankiller le Dim 26 Juin 2011 - 19:55

@Xvaly : Non j'ai pas le code du HTML concernant cette chose.

@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. Interrog

Cordialement. Smile

Stankiller
**

Messages : 64
Inscrit(e) le : 14/06/2011

http://royal-universe.forum-gratuit.net/
Stankiller a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Quelle logiciel ?

Message par Alex Fowl le Dim 26 Juin 2011 - 20:37

Bonsoir,

Puis-je avoir le lien du site d’où vous avez eu ce slider ? Smile

Cordialement,

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Quelle logiciel ?

Message par Stankiller le Dim 26 Juin 2011 - 20:43

@Alex Fowl a écrit:Bonsoir,

Puis-je avoir le lien du site d’où vous avez eu ce slider ? Smile

Cordialement,
Le voilà : http://css-tricks.com/889-creating-a-slick-auto-playing-featured-content-slider/

Cordialement.

Stankiller
**

Messages : 64
Inscrit(e) le : 14/06/2011

http://royal-universe.forum-gratuit.net/
Stankiller a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Quelle logiciel ?

Message par Alex Fowl le Dim 26 Juin 2011 - 21:17

Bonsoir,

- Pour installer le code :

Panneau d'administration ==> Général ==> Les moteurs de recherche ==> Balises supplémentaires ==> ajout ==> 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 :
    - doit-être explicite (qui explique brièvement le problème),
    - 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 :editer: de votre premier message. Wink

A bientôt sur ForumActif Smile

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Quelle logiciel ?

Message par Stankiller le Dim 26 Juin 2011 - 23:10

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

Stankiller
**

Messages : 64
Inscrit(e) le : 14/06/2011

http://royal-universe.forum-gratuit.net/
Stankiller a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Quelle logiciel ?

Message par Alex Fowl le Dim 26 Juin 2011 - 23:26

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 :
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
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Quelle logiciel ?

Message par Stankiller le Dim 26 Juin 2011 - 23:47

Ok merci comment on fait pour réglé leur taille ?

Cordialement.

Stankiller
**

Messages : 64
Inscrit(e) le : 14/06/2011

http://royal-universe.forum-gratuit.net/
Stankiller a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Quelle logiciel ?

Message par Alex Fowl le Lun 27 Juin 2011 - 13:01

Bonsoir,

Pour modifier la taille de vos images ? Smile
Il vous faut utiliser un logiciel de type Photoshop, ou gimp.
Vous pouvez toujours faire une demande dans la section graphique : http://forum.forumactif.com/f53-

Cordialement,

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

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