Bun venit pe Forumul Andrei

Daca vezi aceasta pagina inseamna ca nu ai cont sau nu esti logat.
Daca doresti doar sa vizualizezi forumul poti apasa pe "x-ul" din dreapta si acesta imagine nu va mai fi afisata.

Pentru o vizualizare cat mai buna a acestui forum recomandam
8
Va uram o zi buna in continuare si o navigare cat mai placuta pe acest forum !


   
AcasaSustineFAQInregistrareConectareCautareCalendar
Twitter



SlideNews

Navigare :: Scripturi si tutoriale :: Scripturi
AutorMesaj
 nick
avatar
Rang: Administrator


MesajSubiect: SlideNews Vin Aug 05, 2011 11:53 pm  
Codurile CSS si JS

Cod:
<link rel="stylesheet" type="text/css" href="http://forumulandrei.webs.com/SliderNews/css/layout.css" />
<link rel="stylesheet" type="text/css" href="http://forumulandrei.webs.com/SliderNews/css/style.css" />
<script language="javascript" type="text/javascript" src="http://forumulandrei.webs.com/SliderNews/mootools.svn.js"></script>
<script language="javascript" type="text/javascript" src="http://forumulandrei.webs.com/SliderNews/lofslidernews.mt11.js"></script>


Continutul slideului
Cod:
<div id="container">
       
<div id="lofslidecontent45" class="lof-slidecontent lof-descleft">
<div class="preload"><div></div></div>
 
  <div class="lof-main-wapper">
        <div class="lof-main-item">
              <img src="Link imagine 1" title="#" height="300" width="900">         
                <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Text 1" href="#">Textul dorit 1</a></h3>

                <p>De completat De completat De completat De completat De completat De completat De completat De completat</p>

            </div>
        </div>
      <div class="lof-main-item">
              <img src="Link imagine 2" title="#" height="300" width="900">         
                <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Text 1" href="#">Textul dorit 2</a></h3>

                <p>De completat De completat De completat De completat De completat De completat De completat De completat</p>

            </div>
        </div>
      <div class="lof-main-item">
              <img src="Link imagine 3" title="#" height="300" width="900">         
                <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Text 1" href="#">Textul dorit 3</a></h3>

                <p>De completat De completat De completat De completat De completat De completat De completat De completat</p>

            </div>
        </div>
        <div class="lof-main-item">
              <img src="Link imagine 4" title="#" height="300" width="900">         
                <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Text 1" href="#">Textul dorit 4</a></h3>

                <p>De completat De completat De completat De completat De completat De completat De completat De completat</p>

            </div>
        </div>
       
        <div class="lof-main-item">
              <img src="Link imagine 5" title="#" height="300" width="900">         
                <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Text 1" href="#">Textul dorit 5</a></h3>

                <p>De completat De completat De completat De completat De completat De completat De completat De completat</p>

            </div>
        </div>
        <div class="lof-main-item">
              <img src="Link imagine 6" title="#" height="300" width="900">         
                <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Text 1" href="#">Textul dorit 6</a></h3>

                <p>De completat De completat De completat De completat De completat De completat De completat De completat</p>

            </div>
        </div>
           
  </div>


  <div class="lof-navigator-outer">
        <ul class="lof-navigator">
            <li>

               <div>
                   <img src="Link imagine 1" height="70" width="140"/>
                   <h3> Text 1 </h3>
                     Continut Continut Continut Continut Continut Continut Continut Continut Continut Continut ...
                </div>   
            </li>
            <li>
               <div>

                   <img src="Link imagine 2" title="#" height="70" width="140">
                   <h3> Text 2 </h3>
                     Continut Continut Continut Continut Continut Continut Continut Continut Continut Continut ...
                </div>   
            </li>

            <li>
               <div>

                    <img src="Link imagine 3" title="#" height="70" width="140">
                    <h3> Text 3 </h3>
                   Continut Continut Continut Continut Continut Continut Continut Continut Continut Continut ...
                </div>   
            </li>
           
          <li>
                <div>
                    <img src="Link imagine 4" title="#" height="70" width="140">

                    <h3> Text 4</h3>
                    Continut Continut Continut Continut Continut Continut Continut Continut Continut Continut ...
                </div>
            </li>   
            <li>
                 <div>
                   <img src="Link imagine 5" title="#" height="70" width="140">
                   <h3> Text 5</h3>

                   Continut Continut Continut Continut Continut Continut Continut Continut Continut Continut ...
                </div> 
            </li>
          <li>
                <div>
                  <img src="Link imagine 6" title="#" height="70" width="140">
                    <h3> Text 6</h3>
                    Continut Continut Continut Continut Continut Continut Continut Continut Continut Continut ...
                </div>

            </li>          
        </ul>
  </div>
 </div>

Trebuie sa inlocuiesti :
Link imagine 1
Link imagine 2
Link imagine 3
Link imagine 4
Link imagine 5
Link imagine 6

Atat pentru dimensiunile height="300" width="900" cat si pentru dimensiunile height="70" width="140"(vor fi aceleasi imagini, redimensionarea se face automat )


Codul de executie

Cod:
<head>
<style>
   /** css for override **/
   .lof-descleft .lof-main-item-desc{
      top:0;
      left:30px;
      width:200px;
      height:100%;
   }
</style>
</head>

<script type="text/javascript">
   var _lofmain =  $('lofslidecontent45');
   var _lofscmain = _lofmain.getElement('.lof-main-wapper');
   var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');
   var object = new LofFlashContent( _lofscmain,
                             _lofnavigator,
                             _lofmain.getElement('.lof-navigator-outer'),
                             { fxObject:{ transition:Fx.Transitions.Quad.easeInOut,  duration:800},
                               interval:3000,
                                direction:'opacity'
                             }
   ).start( true, _lofmain.getElement('.preload') );
</script>

    </div>



[Trebuie sa fiti inscris si conectat pentru a vedea acest link]


[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

*Scrie romaneste
*Sterg mesajele inutile sau scrise cu CAPS
*Nu fa spam
*Linkurile relevante în context sunt binevenite.

Transferul se face din contul dumnevoastra de Paypal




Copyright © 2008-2014 Forumul Andrei. Toate drepturile rezervate. Termeni si conditii
Aspect creat si codat de Alexandru Miron & Nick

.