2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
81 napja
111 néző

WordPress themes

WordPress themes
82 napja
114 néző

G-Portál themes

G-Portál themes
82 napja
67 néző

Tumblr themes

Tumblr themes
82 napja
101 néző

Képváltó kód 05.

Demó
Kattints a képre és nézd meg a demót!


Amit a használatáról tudni kell:

  1. több menüpontot is hozzá lehet adni, vagy el is lehet venni belőle
  2. a nagy- és kisképek minden esetben szélességében és magasságában is egyformák legyenek
  3. a képek linkelhetőek, de linkelés nélkül is lehet alkalmazni
  4. bármilyen széles és magas lehet ez a fejléc. Persze azért maradjunk az ésszerű kereteken belül!
  5. 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
  6. 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 404 megtekintés

Hozzászólások