Aide - Recherche - Membres - Calendrier
Version complète : Banniere Pub/Promo
Forum osCommerce-fr > Oscommerce 2.3 > Contributions OsC2.3
Skathaï
24 Mar 2012, 17:20
Bonjour,

En navigant sur le net, je suis tombé sur cette photo d'un site basé sur osc2.3




Connaissez vous la contrib, qui permettrais de faire la bannière sous le menu horizontal.

Les seules que j'ai trouvé pour le moment, ne sont que des Slides basic.

Skath
krokus
24 Mar 2012, 22:31
The Lof SiderNews Plugin
Skathaï
25 Mar 2012, 07:31
Super, merci Krokus, vais aller étudier ca^^.
julien038
3 Apr 2012, 09:27
Skathaï, as tu réussi?
Skathaï
5 Apr 2012, 15:56
Salut Julien,

Oui, j'ai réussi.Commence par télécharger le dossier puis :

Ajouter le fichier:
- layout.css dans catalog/css
- jquery.easing.js dans catalog/js
- jquery.js dans catalog/js
- script.js dans catalog/js

Copier le dossier images dans catalog/images

Créer lofslidernews.php dans catalog/includes
et ajouter:
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lof JSliderNews 2.0 - Jquery 1.7.x</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style3.css" />
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
$(document).ready( function(){
        var buttons = { previous:$('#jslidernews3 .button-previous') ,
                        next:$('#jslidernews3 .button-next') };
        $('#jslidernews3').lofJSidernews( { interval:5000,
                                                 easing:'easeOutBounce',
                                                duration:1200,
                                                auto:false,
                                                mainWidth:930,
                                                mainHeight:300,
                                                navigatorHeight        : 100,
                                                navigatorWidth        : 310,
                                                maxItemDisplay:3,
                                                buttons:buttons} );
    });

</script>
<style>

    ul.lof-main-wapper li {
    position:relative;
}
</style>
</head>
<body>
    <div id="container">

<!------------------------------------- THE CONTENT ------------------------------------------------->
<div id="jslidernews3" class="lof-slidecontent" style="width:930px; height:300px;">
    <div class="preload"><div></div></div>


            <div  class="button-previous">Previous</div>

             <!-- MAIN CONTENT -->
              <div class="main-slider-content" style="width:930px; height:300px;">
                <ul class="sliders-wrap-inner">
                    <li>
                            <img src="images/thumbl_980x340.png" title="Newsflash 2" >
                          <div class="slider-description">
                            <div class="slider-meta"><a target="_parent" title="Newsflash 1" href="#Category-1">/ Newsflash 1 /</a> <i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 1</h4>
                            <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                    </li>
                   <li>
                      <img src="images/thumbl_980x340_002.png" title="Newsflash 1" >
                         <div class="slider-description">
                           <div class="slider-meta"><a target="_parent" title="Newsflash 2" href="#Category-2">/ Newsflash 2 /</a>     <i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 2</h4>
                            <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                    </li>
                   <li>
                      <img src="images/thumbl_980x340_003.png" title="Newsflash 3" >
                        <div class="slider-description">
                          <div class="slider-meta"><a target="_parent" title="Newsflash 3" href="#Category-3">/ Newsflash 3 /</a>     <i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 3</h4>
                            <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...
                            <a class="readmore" href="#">Read more </a>
                            </p>

                         </div>
                    </li>
                    <li>
                      <img src="images/thumbl_980x340_004.png" title="Newsflash 5" >
                        <div class="slider-description">
                          <div class="slider-meta"><a target="_parent" title="Newsflash 4" href="#Category-4">/ Newsflash 4 /</a>    <i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 4</h4>
                            <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                    </li>
                    <li>
                      <img src="images/thumbl_980x340_005.png" title="Newsflash 5" >
                        <div class="slider-description">
                           <div class="slider-meta"><a target="_parent" title="Newsflash 5" href="#">/ Newsflash 5 /</a>    <i> — Monday, February 15, 2010 12:42</i></div>
                           <h4>Content of Newsflash 5</h4>
                            <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                    </li>
                    <li>

                      <img src="images/thumbl_980x340_006.png" title="Newsflash 5" >
                        <div class="slider-description">
                          <div class="slider-meta"><a target="_parent" title="Newsflash 6" href="#">/ Newsflash 6 /</a>    <i> — Monday, February 15, 2010 12:42</i></div>
                            <h4>Content of Newsflash 6</h4>
                            <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                            <a class="readmore" href="#">Read more </a>
                            </p>
                         </div>
                    </li>

                  </ul>
            </div>
           <!-- END MAIN CONTENT -->
           <!-- NAVIGATOR -->
               <div class="navigator-content">
                  <div class="navigator-wrapper">
                        <ul class="navigator-wrap-inner">
                          <li>
                                <div>
                                    <img src="images/lofthumbs/791902news3.jpg" />
                                    <h3> NewsFlash 1 </h3>
                                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...
                                </div>
                            </li>
                             <li>
                                <div>
                                    <img src="images/lofthumbs/435576news10.jpg" />
                                    <h3> NewsFlash 2 </h3>
                                    <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                </div>
                            </li>

                            <li>
                                <div>
                                    <img src="images/lofthumbs/641906img1.jpg" />
                                    <h3> NewsFlash 3 </h3>
                                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                </div>
                            </li>

                           <li>
                                <div>
                                    <img src="images/lofthumbs/416719news7.jpg" />
                                    <h3> NewsFlash 4</h3>
                                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                </div>
                            </li>
                            <li>
                                 <div>
                                    <img src="images/lofthumbs/641906img1.jpg" />
                                    <h3> NewsFlash 5</h3>
                                    <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                 </div>
                            </li>
                           <li>
                                <div>
                                    <img src="images/lofthumbs/416719news7.jpg" />
                                    <h3> NewsFlash 6</h3>
                                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                                </div>
                            </li>
                        </ul>
                  </div>

             </div>
          <!----------------- END OF NAVIGATOR --------------------->
                            <div class="button-next">Next</div>
</div>

<!------------------------------------- END OF THE CONTENT ------------------------------------------------->

    </div>
</body>



J'ai utilisé le style3, tu peux prendre les autres en prenant le code adéquat.

Ouvrir header.php
Ajouter a la fin.
<?php require(DIR_WS_INCLUDES . 'lofslidernews.php'); ?>


Voila, c'est pas compliqué, mais j'ai mis du temps a comprendre comment utiliser ce plugin.
Skath.
krokus
5 Apr 2012, 17:02
Bravo, par contre inclure dans lofslidernews.php le doctype et le head c'est pas une bonne idée, il vaudrait mieux mettre cette partie dans template_top et donc ne pas rajouter le doctype puisqu'il est deja declare et ne rajouter que les javascript qui ne sont pas declare parce que la tu as des declaration en double, au final ta page lofslidernews.php ne devrait contenir que ce qu'il y a entre <div id="jslidernews3" class="lof-slidecontent" style="width:930px; height:300px;"> et </div>
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2013 Invision Power Services, Inc.