Demó
Kattints a képre és nézd meg a demót!

Amit a használatáról tudni kell:

1. több menüpontot is hozzá lehet adni, vagy el is lehet venni belőle
2. a nagy- és kisképek minden esetben szélességében és magasságában is egyformák legyenek
3. a képek linkelhetőek, de linkelés nélkül is lehet alkalmazni
4. bármilyen széles és magas lehet ez a fejléc. Persze azért maradjunk az ésszerű kereteken belül!
5. A CSS kódban kell beállítani az egész szélességét és magasságát és a képek méretét is
6. A div kódban kell megadni a képek elérhetőségét, a linkeket és a szövegeket is ami megjelenik majd a fejlécen

Javascript kód
A .js fájltt töltsétek le, majd töltsétek fel a tárhelyetekre, az URL címét pedig cseréljétek le a kódban. Kiemeltem az URL részt a Javascript kódban.
G-Portálosoknak: A .js fájlokat oldaladon a Médiatárba töltsd fel!
kepvalto-fejlec-script-05.js
Akkor lesz szép a script, ha minden képed egyforma nagyságú!!!
 

<script src="/js/kepvalto-fejlec-script-05.js"></script>

Képváltó kódja
 

<div id="sliderFrame">
        <div id="slider">
           <a href="/" target="_blank">
                <img src="/images/scripts/kepvalto-fejlec/05/001.jpg" alt="Üdvözöllek az oldalon" />
            </a>
             <a href="/" target="_blank">
                <img src="/images/scripts/kepvalto-fejlec/05/002.jpg" alt="Újabb képváltó fejléc script" />
            </a>
             <a href="/" target="_blank">
                <img src="/images/scripts/kepvalto-fejlec/05/003.jpg" alt="Nézd meg a többi script-et is!" />
            </a>
        </div>
        <!--kisképek url címe-->
        <div id="thumbs">
            <div class="thumb">
                <div class="frame"><img src="/images/scripts/kepvalto-fejlec/05/004.jpg" /></div>
                <div class="thumb-content"><p>Főoldal</p>Itt láthatóak a legújabb frissítések</div>
                <div style="clear:both;"></div>
            </div>
            <div class="thumb">
                <div class="frame"><img src="/images/scripts/kepvalto-fejlec/05/005.jpg" /></div>
                <div class="thumb-content"><p>Képváltó fejléc</p>Legyen neked is egyedi fejléced</div>
                <div style="clear:both;"></div>
            </div>
             <div class="thumb">
                <div class="frame"><img src="/images/scripts/kepvalto-fejlec/05/006.jpg" /></div>
                <div class="thumb-content"><p>Még több képváltó</p>A többi képváltó script megtekintése</div>
                <div style="clear:both;"></div>
            </div>
        </div>
        <!--clear above float:left elements. It is required if above #slider is styled as float:left. -->
        <div style="clear:both;height:0;"></div>
</div>

CSS kód
 

<style type="text/css">
#sliderFrame
{
    width:590px; /* a teljes fejléc szélessége */
    margin:0 auto; /*center-aligned*/
    padding:5px;
    box-shadow: 0 0 5px #BBB;border:1px solid #CCC; background-color:#FFF; /* a teljes doboznak keret, árnyék, stb... */
}
#slider, #slider div.sliderInner {
    width:350px;height:226px;/* a képet szélessége és magassága */ */
}
#slider {
    float:left;
    background:#fff url(/images/scripts/kepvalto-fejlec/05/homokora.gif) no-repeat 50% 50%;
    position:relative;
    transform: translate3d(0,0,0);
}
#slider a.imgLink, #slider .video {
    z-index:2;
    position:absolute;
    top:0px;left:0px;border:0;padding:0;margin:0;
    width:100%;height:100%;
}
#slider .video {
    background:transparent no-repeat 50% 50%;
}
#slider div.mc-caption-bg, #slider div.mc-caption-bg2 { /* a szöveg kinézete a képeken */
    position:absolute;
    width:300px; /* szöveg szélessége a képeken */
    height:auto;
    padding:15px 0;/* 10px will increase height.*/
    left:25px;
    bottom:10px;
    z-index:3;
    overflow:hidden;
    font-size:0;
}
#slider div.mc-caption-bg {
    background:#DDD;
    border:1px solid white;
    border-radius: 5px;
}
#slider div.mc-caption-bg2 {
    background:none;
}
#slider div.mc-caption { /* a szöveg stílusa a képek felett */
    font:bold 13px Arial;
    color:#000000;
    z-index:4;
    text-align:center;
    background:none;
}
#slider div.mc-caption a {
    color:#060;
}
#slider div.navBulletsWrapper  {
    display:none;
}
#slider div.loading{
    width:100%; height:100%;
    background:transparent url(/images/scripts/kepvalto-fejlec/05/homokora.gif)
   no-repeat 50% 50%;
    filter: alpha(opacity=60);
    opacity:0.6;
    position:absolute;
    left:0;
    top:0;
    z-index:9;
}
#slider img, #slider>b, #slider a>b {
    position:absolute; border:none; display:none;
}
#slider div.sliderInner {
    overflow:hidden;
    -webkit-transform: rotate(0.000001deg);
    position:absolute; top:0; left:0;
}
#slider>a, #slider video, #slider audio {display:none;}
/* -- az előnézeti képek menü és szöveg kinézete  -- */
#thumbs
{
    float:left;
    margin-left:10px;
    width:230px;
    font:normal 11px/13px Arial;
    border-top:1px solid #CCC;
    color:#666;
}
#thumbs .thumb
{
    border:1px solid #CCC;
    border-top:1px solid #FFF;
    padding:11px 8px;
    background:#EEE;
}
#thumbs .thumb-on
{
    background:#FFF;
}
#thumbs img{border:1px solid #DDD; cursor:pointer; width:70px; height:44px;}
#thumbs .frame {float:left;padding:2px;border:1px solid #CCC;background:white;
   border-radius:3px;box-shadow:0 0 3px #BBB;font-size:0;line-height:0;}
#thumbs .thumb-content {float:left;width:110px;padding-left:18px;}
#thumbs .thumb-content p {font-weight:bold; color:#BF5D9B; margin:0 0 3px;padding:0;}
#thumbs .thumb-on .thumb-content p {color:#BB0000;}
</style>

1 886 megtekintés