Overlay

[Loud]

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