Resim Galerisi (HTML)
CSS KODU:body
{
background: #1a1613;
color: white;
font-family: helvetica;
}
.hidden
{
display: none;
}
#prevNext
{
margin-bottom: -2.5em;
}
#prevNext img
{
position: relative;
z-index: 2;
cursor: pointer;
}
p
{
margin: 0;
padding: 0 1em;
font-size: 1.5em;
position: relative;
top: -50px;
line-height: 50px;
height: 50px;
background: black;
opacity: .7;
filter:alpha(opacity=70);
}
HTML KODU:
<title>jFlow</title>
<link href="http://meratis.me/wp-content/uploads/2012/03/default.css" rel="stylesheet" type="http://meratis.me/wp-content/uploads/2012/03/default.css" /> <script src="http://meratis.me/wp-content/uploads/2012/03/jquery-1.2.6.pack_.js" type="text/javascript"></script> <script src="http://meratis.me/wp-content/uploads/2012/03/jquery.flow_.1.1.min_.js" type="text/javascript"></script> <!--[if lt IE 7]>
<script type="text/javascript" src="http://meratis.me/wp-content/uploads/2012/03/unitpngfix.js"></script>
<![endif]--> <script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "980px",
height: "313px"
});
});
</script>
<div id="wrap">
<div id="controller" class="hidden"><span class="jFlowControl">No 1</span> <span class="jFlowControl">No 2</span> <span class="jFlowControl">No 3</span></div>
<div id="prevNext"><img alt="Previous Tab" class="jFlowPrev" src="images/prev.png" /> <img alt="Next Tab" class="jFlowNext" src="images/next.png" /></div>
<div id="slides">
<div><img alt="photo" src="images/1.jpg" />
<p>This is photo number one. Neato!</p>
</div>
<div><img alt="photo" src="images/2.jpg" />
<p>This is photo number two. Neato!</p>
</div>
<div><img alt="photo" src="images/3.jpg" />
<p>This is photo number three. Neato!</p>
</div>
</div>
</div>
<!-- end wrap -->