Cikkajánló
Sziasztok! Mára már nem terveztem semmit hozni, de mivel a napokban volt egy kérés, hogy készítsek egy Gal Gadot-os fejlécet, így arra jutottam, hogy inkább egy teljes kinézetet készítek.
É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
Joseph Morgan Matthew Goode Norman Reedus Ian Fansite Selena Gomez Miley Cyrus Ashley Tisdale Demi Lovato   Hoztam még ötféle képeffektet, amit nagyon jól lehet használni elit cseréknél (is).
Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló Apró tippek weboldal szerkesztőknek
Lapozható képek szöveggel




 

Javascript kód
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 oldalatokon a G-Portárba töltsétek fel és utána az URL címét onnan másoljátok ki és illesszétek be a megfelelő helyre a javascript kódban!

 

Javascript fájlok letöltése
Négy darab .js fájlnak kell lennie, amit innen tudtok letölteni:

 

 

Javascript kódok
G-Portálon ezt a teljes kódot a ti .js fájlotok elérési útjával egy szélső modulba kell illeszteni. Azt javaslom, egy olyan modulban legyen, amiben nincsen semmi más.

 

<script src="/js/kepvalto-01.js"></script>
<script src="/js/kepvalto-02.js"></script>
<script src="/js/kepvalto-03.js"></script>
<script src="/js/kepvalto-04.js"></script>

 

CSS kód
a fontos értékek mellé kiemeltem, hogy mi micsoda. A többit ne nagyon módosítsátok, csak ha tudjátok mit csináltok ;) A CSS kód mehet a többibe bele. Nem kell külön modulokat csinálni minden CSS-nek, hanem egy modulba mehet az összes ;)

 

<style type="text/css">
.image-box { /* ettől lesz középen a doboz */
margin: 0px auto;
width: 360px; /* doboz szélessége */
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 0px 0;
padding: 10px; /* ettől lesznek a nyilak középen */
}
.tabs-widget li {
float: left; /* ez is a nyilakra hat */
list-style: none;
list-style-type: none;
margin: 0 0 0 5px;
padding: 0;
}
.tabs-widget li a { /* nyíl kinézete */
font-family: arial;
font-weight: normal;
color: #4f4f4f;
text-decoration: none;
font-size: 12px;
background: #e2e2e2;
padding: 8px;
margin-left:80px; /* bal nyíl helyzete */
margin-right:60px; /* jobb nyíl helyzete */
display: block;
}
.tabs-widget li a:hover { /* nyíl kinézete, ha ráviszed az egeret */
color: #ffffff !important;
background: #3C9ED3 !important;
}
.da-thumbs {
width: 360px; /* doboz szélessége */
height: 100%; /* magassága */
position: relative;
padding: 0;
list-style: none;
}
.da-thumbs li {
float: left; /* ettől lesz egymás mellett a kép */
margin: 5px; /* képek közötti távolság */
border: 1px solid #E2E2E2; /* képek köré keret */
padding: 6px;
position: relative;
}
.da-thumbs li a div {
background: rgba(0,0,0,0.7); /* szövegdoboz színe, ha ráviszed az egeret */
width: 100%;
height: 100%;
position: absolute;
}
.da-thumbs li a div span { /* szövegdobozban a szöveg kinézete */
font-family: Trebuchet MS;
font-size: 10px;
text-align: justify;
line-height: 15px !important;
text-transform: uppercase;
font-weight: normal;
color: #ffffff;
display: block;
padding: 5px;
}
.da-thumbs li a, .da-thumbs li a img {
display: block;
position: relative;
}
.da-thumbs li a {
overflow: hidden;
}
</style>

 

A doboz kódja, amiben a kép és a szöveg van
Kicsit hosszú a kód, és elsőre bonyolultnak tűnik, de egyáltalán nem az :) A kódba beleírtam, hogy mit hol találsz. A képek mérete, ami a dobozokban van: 155X110px. Ha kisebbet vagy nagyobbat raktok bele, akkor a CSS kódban is át kell írni a méret értékeket. Doboz szélessége, ilyesmi…

 

G-Portálosoknak
Figyeljetek oda, mert sajnos a kódban hiba keletkezik, ha forráskódból szerkesztő nézetre váltotok. Utána, ha elmentitek, már nem fog működni :( Szóval legyen meg valahol a gépeteken elmentve a kód, és abban módosítsatok, aztán másoljátok ki és újra illesszétek be a modulba. Nem tudom miért van, hogy a G-Portálon vannak kódok, amik nem működnek szerkesztő nézet után :(

 

<div class="image-box">
<!-- ezek a nyilacskák, itt nincs mit módosítani ;) -->
<ul class="tabs-widget tabs-widget-widget-themater_tabs-2-id">
<li>
<a href="#widget-themater_tabs-2-id1"> &#10094; </a></li>
<li>
<a href="#widget-themater_tabs-2-id2"> &#10095; </a></li>
</ul>
<!-- IDÁIG -->
<!-- Innen indul az első négy kép kódja. Ezt értelemszerűen lehet növelni vagy elvenni belőle <li> kódtól </li> kódig -->
<div class="tabs-widget-content tabs-widget-content-widget-themater_tabs-2-id" id="widget-themater_tabs-2-id1">
<div id="widget">
<table align="center" border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td>
<section>
<ul id="da-thumbs" class="da-thumbs">
<li>
<!-- az a href résznél a perjel helyére írd a link címét. Az src résznél pedig cseréld ki a képem URL címét a te képed URL címére -->
<a href="/"><img style="border:0px!important; padding:0px!important;" src="/images/scripts/kepvalto/01/001.png" />
<div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</span></div>
</a>
</li>
<li>
<!-- az a href résznél a perjel helyére írd a link címét. Az src résznél pedig cseréld ki a képem URL címét a te képed URL címére -->
<a href="/"><img style="border:0px!important; padding:0px!important;" src="/images/scripts/kepvalto/01/002.png" />
<div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</span></div>
</a>
</li>
<li>
<!-- az a href résznél a perjel helyére írd a link címét. Az src résznél pedig cseréld ki a képem URL címét a te képed URL címére -->
<a href="/"><img style="border:0px!important; padding:0px!important;" src="/images/scripts/kepvalto/01/003.png" />
<div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</span></div>
</a>
</li>
<li>
<!-- az a href résznél a perjel helyére írd a link címét. Az src résznél pedig cseréld ki a képem URL címét a te képed URL címére -->
<a href="/"><img style="border:0px!important; padding:0px!important;" src="/images/scripts/kepvalto/01/004.png" />
<div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</span></div>
</a>
</li>
</ul>
</section>
</td>
</tr>
</tbody>
</table>
<ul>
</ul>
</div>
</div>
<!-- IDÁIG az első négy kép kódja -->
<!-- INNEN a második négy kép kódja következik -->
<div class="tabs-widget-content tabs-widget-content-widget-themater_tabs-2-id" id="widget-themater_tabs-2-id2">
<div id="widget">
<table align="center" cellpadding="10" cellspacing="0" class="raceResults">
<tbody>
<tr>
<td>
<section>
<ul id="da-thumbs" class="da-thumbs">
<li>
<!-- az a href résznél a perjel helyére írd a link címét. Az src résznél pedig cseréld ki a képem URL címét a te képed URL címére -->
<a href="/"><img style="border:0px!important; padding:0px!important;" src="/images/scripts/kepvalto/01/005.png" />
<div><span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</span></div>
</a>
</li>
<!-- az a href résznél a perjel helyére írd a link címét. Az src résznél pedig cseréld ki a képem URL címét a te képed URL címére -->
<li>
<a href="/"><img style="border:0px!important; padding:0px!important;" src="/images/scripts/kepvalto/01/006.png" />
<div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</span></div>
</a>
</li>
<!-- az a href résznél a perjel helyére írd a link címét. Az src résznél pedig cseréld ki a képem URL címét a te képed URL címére -->
<li>
<a href="/"><img style="border:0px!important; padding:0px!important;" src="/images/scripts/kepvalto/01/007.png" />
<div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</span></div>
</a>
</li>
<!-- az a href résznél a perjel helyére írd a link címét. Az src résznél pedig cseréld ki a képem URL címét a te képed URL címére -->
<li>
<a href="/"><img style="border:0px!important; padding:0px!important;" src="/images/scripts/kepvalto/01/008.png" />
<div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</span></div>
</a>
</li>
</ul>
</section>
</td>
</tr>
</tbody>
</table>
<ul>
</ul>
</div>
</div>
</div>

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

Hozzászólások