2017. 11. 27.Coppermine | Egérre felugró ablak tartalmának megváltoztatása
2017. 11. 26.GIF készítése egy pillanat alatt
2017. 11. 26.FREE theme | Dakota Johnson WordPress theme
2017. 11. 25.WordPress alapvető használata
2017. 11. 24.Ingyenes | Eliza Taylor G-Portálos téma
009.png

Eliza Taylor

001.png

Little Mix

040.png

Gal Gadot

008.png

Girls' Generation

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>


1 267 megtekintés

Hozzászólások