Overlay

Ići dole

Overlay

Počalji od Loud taj Čet Maj 27, 2010 2:10 pm

Verovatno ste nekad videli ovako nešto

http://flowplayer.org/tools/demos/overlay/index.htm(kliknite na slike)

Demo-> http://flowplayer.org/tools/demos/overlay/index.htm

----------------------------------

1.Korak->Html kod za slike na koje klikćemo
Kod:

<img src="slika1" rel="#mies1"/>
<img src="slika" rel="#mies2"/>

To lepite u body delu

2.Korak->HTML kod za Overlay

Kod:

<!-- first overlay. id attribute matches our selector -->
<div class="simple_overlay" id="mies1">
 
    <!-- large image -->
    <img src="velikaslika1" />
 
    <!-- image details -->
    <div class="details">
        <h3>Naslov</h3>
 
        <h4>Naslov</h4>
 
        <p>Tekst...</p>
    </div>
 
</div>
 
<!-- second overlay -->
<div class="simple_overlay" id="mies2">
    Isto kao u prvom overlayu
</div>


Isto u body delu

3.Korak->CSS
Kod:

/* the overlayed element */
.simple_overlay {
   
    /* must be initially hidden */
    display:none;
   
    /* place overlay on top of other elements */
    z-index:10000;
   
    /* styling */
    background-color:#333;
   
    width:675px;   
    min-height:200px;
    border:1px solid #666;
   
    /* CSS3 styling for latest browsers */
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;   
}
 
/* close button positioned on upper right corner */
.simple_overlay .close {
    background-image:url(../img/overlay/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}
/* styling for elements inside overlay */
.details {
    position:absolute;
    top:15px;
    right:15px;
    font-size:11px;
    color:#fff;
    width:150px;
}
 
.details h3 {
    color:#aba;
    font-size:15px;
    margin:0 0 -10px 0;
}

Stavljate tamo gde vam je css stranice

4.Korak->Javascript
Kod:
<script>
$("img[rel]").overlay();
  </script>

Iznad /head taga stavljate...

To je to ...
-------------------
Tutorijal uzet sa http://flowplayer.org/tools/demos/overlay/index.html

Preveo Marko

_________________________________





Loud
Loud
Administrator
Administrator

Broj poruka : 1118
Datum upisa : 23.01.2010
Godina : 21

Pogledaj profil korisnika http://svettutorijala.forumotion.net

Nazad na vrh Ići dole

Nazad na vrh


 
Dozvole ovog foruma:
Ne možete odgovarati na teme u ovom forumu