




Javascript kódok
A .js fájlokat 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-03.js, kepvalto-fejlec-script-03-01.js, kepvalto-fejlec-script-03-02.js
Akkor lesz szép a script, ha minden képed egyforma nagyságú!!!
Itt a javascript kódban azt emeltem ki, hogy hol kell kicserélned a képedre az enyémet. Az az, hova illeszd be a saját képed url címét.
<script src="/js/kepvalto-fejlec-script-03.js"></script>
<script src="/js/kepvalto-fejlec-script-03-01.js"></script>
<script src="/js/kepvalto-fejlec-script-03-02.js"></script>
Képváltó kódja
<div id="wrapper">
<div id="slider-wrapper">
<div class="nivoSlider" id="slider">
<img src="/images/scripts/kepvalto-fejlec/03/001.jpg" />
<img src="/images/scripts/kepvalto-fejlec/03/002.jpg" />
<img src="/images/scripts/kepvalto-fejlec/03/003.jpg" />
<img src="/images/scripts/kepvalto-fejlec/03/004.jpg" />
<img src="/images/scripts/kepvalto-fejlec/03/005.jpg" />
</div>
</div>
CSS kód
A nyilakat és a pöttyöket is mentsd le, majd töltsd fel a tárhelyedre és a CSS kódban cseréld le az URL címeket.
<style type="text/css">
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
width:100%;
height:100%;
z-index:6;
display:none;
}
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
.nivo-caption {
position:absolute;
background:#000;
color:#fff;
opacity:0.8;
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
#slider-wrapper {
background:no-repeat;
width:400px; /* a képed szélessége */
height:270px; /* a képed magassága */
}
#slider {
position:relative;
width:400px; /* a képed szélessége */
height:270px; /* a képed magassága */
background:url(/images/scripts/kepvalto-fejlec/03/001.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
display:none;
}
#slider a {
display:block;
}
.nivo-controlNav {
position:absolute;
left:135px; /* ennyivel vannak balra dobva a kép alatti karikák */
bottom:-35px; /* ennyivel vannak le dobva a kép alatti karikák */
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(/images/scripts/kepvalto-fejlec/03/002.png) no-repeat;
text-indent:-9999px;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(/images/scripts/kepvalto-fejlec/03/003.png) no-repeat;
text-indent:-9999px;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
} </style>
</div>
1 594 megtekintés