Demó
Kattints a képre és nézd meg a demót!
Amit a használatáról tudni kell:
- több menüpontot is hozzá lehet adni, vagy el is lehet venni belőle
- a nagy- és kisképek minden esetben szélességében és magasságában is egyformák legyenek
- a képek linkelhetőek, de linkelés nélkül is lehet alkalmazni
- bármilyen széles és magas lehet ez a fejléc. Persze azért maradjunk az ésszerű kereteken belül!
- 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
- 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 926 megtekintés