Cikkajánló
Én ezt a weboldalt a munkahelyemen használom eléggé sűrűn. Ez arra jó, ha tetszik egy adott betűtípus vagy pont ugyanarra van szükségünk, akkor ezen az oldalon meg lehet azt
Mivel egy ideje nem sok friss volt az oldalon így hoztam pár dolgot. 3 féle .psd fejlécet készítettem a napokban, plusz elhoztam a kivágott képeket is, amiket felhasználtam a
A cím kérdésére az őszinte válasz az lenne, hogy akármennyi, mert mindenki saját maga dönti el, hogy mennyi honlapot szeretne szerkeszteni. Ez jogos is, de az én véleményem ettől
Emma Roberts G-Portálos téma Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák
Képváltó kód 03.

 

 

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>

lindadesign Hozzászólások
1 447 megtekintés

Hozzászólások