Pentru a accesa toate paginile forumului
te rugăm să te înregistrezi
[ Cereri şabloane · Ultimile postări · Membrii · Regulamentul forumului · Căutare · RSS · Photoshop ]
  • Pagina 1 din 1
  • 1
Scripturi și teme pentru ucoz » Scripturi şi şabloane » Diverse » Slaider [a doua variantă]
Slaider [a doua variantă]
StapanulData: Miercuri, 2012-06-13, 1:14 PM | Mesaj # 1
Neconectat
 Pasul 1: Panoul de Control - Design - Administrarea design-ului (şabloane) - alegeţi modulul. Eu am ales Editor de pagini [Paginile site-ului] - după <body> adăugaţi codul:

Code
<link rel="stylesheet" href="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Deasupra_tutur/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Deasupra_tutur/style_2.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Deasupra_tutur/cufon-yui.js" type="text/javascript"></script>
<script src="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Deasupra_tutur/Museo_Slab.font.js" type="text/javascript"></script>
<script src="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Deasupra_tutur/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
Cufon.replace('h2', { fontFamily:'Museo Slab' });
Cufon.replace('h3', { fontFamily:'Museo Slab' });

$(window).load(function() {
           $('#slider1').nivoSlider({ pauseTime:5000, pauseOnHover:false });
           setTimeout(function(){
            $('#slider2').nivoSlider({ pauseTime:5000, pauseOnHover:false });
           }, 1000);
           setTimeout(function(){
            $('#slider3').nivoSlider({
             pauseTime:5000,
             pauseOnHover:false,
             controlNavThumbs:true
            });
           }, 2000);
           setTimeout(function(){
            $('#slider4').nivoSlider({
             effect:'random',
             animSpeed:1500,
             pauseTime:5000,
             startSlide:2,
             directionNav:false,
             controlNav:true,
             keyboardNav:false,
             pauseOnHover:false
            });
           }, 3000);
});
</script>


Pasul 2: Pe paginile modulului care l-aţi ales adăugaţi acest cod unde doriţi:

Code
<div id="content">
                     
            <div id="slider1" class="nivoSlider">
             <img src="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Deasupra_tutur/up.jpg" alt="" />
             <img src="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Deasupra_tutur/monstersinc.jpg" alt="" />
             <img src="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Deasupra_tutur/nemo.jpg" alt="" />
             <img src="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Deasupra_tutur/walle.jpg" alt="" />            
</div>


Imaginile pot fi schimbate. Dacă doriţi alt fundal, trebuie să găsiţi în http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Deasupra_tutur/style.css codurile images/header.png, images/header_hover.png şi să le înlocuiţi cu imaginea dorită.

Rezultatul

Demonstraţie

 
StapanulData: Sâmbătă, 2012-06-16, 11:10 AM | Mesaj # 2
Neconectat
 Poftim o variantă asemănătoare, doar că puţin mai util, după părerea mea. Exemplu

Pasul 1: Panoul de Control - Design - Administrarea design-ului (şabloane) - alegeţi modulul. Eu am ales, la fel ca şi mai sus Editor de pagini [Paginile site-ului] - după <head> adăugaţi codul:

Code
<link rel="stylesheet" href="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Desene/default.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Desene/pascal.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Desene/orman.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Desene/nivo-slider.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Desene/style.css" type="text/css" media="screen" />


Pasul 2: Pe aceeaşi pagină, după <body> adăugaţi codul:

Code
<script type="text/javascript" src="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Desene/-jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Desene/jquery.nivo.slider.pack.js"></script>
        <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
        </script>


Pasul 3: Unde vreţi să apară slider-ul puneţi codul:

Code
<div id="wrapper">

            <div class="slider-wrapper theme-default">
                <div class="ribbon"></div>
                <div id="slider" class="nivoSlider">
                    <img src="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Desene/toystory.jpg" alt="" />
                    <a href="http://fierbinte.ucoz.ro/"><img src="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Desene/up.jpg" alt="" title="Găseşte ceea ce cauţi" /></a>
                    <img src="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Desene/walle.jpg" alt="" data-transition="slideInLeft" />
                    <img src="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Desene/nemo.jpg" alt="" title="#htmlcaption" />
                </div>
                <div id="htmlcaption" class="nivo-html-caption">
                    <strong>Acesta</strong> este un exemplu de adresă. <a href="#">Apasă</a>.
                </div>
            </div>

        </div>


Rezultatul:

Pomul se cunoaşte după roade, omul după fapte.
 
OmulPaianjenData: Sâmbătă, 2012-07-28, 6:13 PM | Mesaj # 3
Neconectat
Unde aveți nevoie de slaider, adăugați codul:


Cod
<div class="srcflash">      
       <script type="text/javascript">
var pics='http://fierbinte.ucoz.ro/Sabloane/2/26_Filme_alesE/slaider_ex_viu/2.jpg|http://fierbinte.ucoz.ro/Sabloane/2/26_Filme_alesE/slaider_ex_viu/3.jpg|http://fierbinte.ucoz.ro/Sabloane/2/26_Filme_alesE/slaider_ex_viu/4.jpg|http://fierbinte.ucoz.ro/Sabloane/2/26_Filme_alesE/slaider_ex_viu/5.jpg|http://fierbinte.ucoz.ro/Sabloane/2/26_Filme_alesE/slaider_ex_viu/6.jpg'
document.write('<object id="focus_flash" type="application/x-shockwave-flash" data="http://fierbinte.ucoz.ro/Sabloane/2/26_Filme_alesE/slaider_ex_viu/adplay.swf" style="width: 960px; height: 300px"><param name="movie" value="http://fierbinte.ucoz.ro/Sabloane/2/26_Filme_alesE/slaider_ex_viu/adplay.swf"><param name="quality" value="high"><param name="bgcolor" value="5c5c5c"><param name="allowfullscreen" value="high"><param name="allowscriptaccess" value="sameDomain"><param name="wmode" value="opaque"><param name="flashvars" value="pics='+pics+'&borderwidth='+960+'&borderheight='+300+'"><fieldset class="bord01"Eroare 406, brauzerul nu citește MIME.</fieldset></object>')</script><div style="display:none;"></div>
</div>


sau


Cod
<iframe src="http://fierbinte.ucoz.ro/Forum/Diverse/Slider/Omul_paianjen_ex_viu.html" width=960 height=312 style="z-index:1;" marginwidth=0 marginheight=0 scrolling=no frameborder=0> </iframe>
 
OmulPaianjenData: Luni, 2012-08-13, 4:04 PM | Mesaj # 4
Neconectat
 Pasul 1: Panoul de Control - Unelte - Manager de fişiere - încărcați aici cele trei dosare din această arhivă.

Pasul 2: Panoul de Control - Design - Administrarea design-ului (şabloane) - pe paginile unde o să fie slaiderul, după </head> adăugați codurile:

Code
<style type="text/css">   
   #featured { width: 565px; height: 290px; background: #009cff url('/images/loading.gif') no-repeat center center; overflow: hidden; }   
   </style>   
   <link rel="stylesheet" href="/css/orbit.css">   
   <style type="text/css">   
   .timer { display: none !important; }   
   div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }   
   </style>   
     
   <script type="text/javascript" src="/js/jquery.orbit.min.js"></script>   
     
   <script type="text/javascript">   
   $(window).load(function() {   
   $('#featured').orbit({   
   'bullets': true,   
   'timer' : true,   
   'animation' : 'horizontal-slide'   
   });   
   });   
   </script>


Iar acesta este codul slaiderului:

Code
<div id="featured">  
  <img src="http://jurnal.md/gallery_photo/start_225292.jpg" alt="Descrierea" />  
  <img src="http://jurnal.md/gallery_photo/start_225278.jpg" alt="Descrierea" />  
  <img src="http://jurnal.md/gallery_photo/start_225226.jpg" alt="Descrierea" />  
  <img src="http://jurnal.md/gallery_photo/start_225282.jpg" alt="Descrierea" />  
  </div>


Rezultatul:
 
CornholioData: Duminică, 2012-11-25, 0:06 AM | Mesaj # 5
Neconectat
 Ca idee imi cer scuze eu nu am reusit nici una din aceste variante ar mai fi o varianta interesanta spun eu WoWslider este un programel free in care iti faci sliderul.
 
Scripturi și teme pentru ucoz » Scripturi şi şabloane » Diverse » Slaider [a doua variantă]
  • Pagina 1 din 1
  • 1
Căutare:
Copyright © 2019. Toate drepturile rezervate
Politicieni | Acţiunea 2012 | Powered by uCoz