Малка спретната галерийка

Сходни публикации

Идеята ми е да пусна една галерия форматирана с CSS и то плаващ, до колко е сполучлива не знам Mad.
Вкаран е и малко JS за ‘красота’ на навигацията. Използвам съм вече отречената техника на <iframe> , но не всеки има познания по JS or AJAX и т.н. мисля, че доста лесно може всеки да си дооправи кода и форматира CSS-а по свой вкус.

Имам проблем с FTP-то затуй само каринка за демо

1.0 Създаваме документ album.html
2.0 Създаваме документ album.css
3.0 Създаваме папка pic
3.1 Създаваме папка largepic
3.1.1 Копираме каринките с размер /в случая/ 400х300;
3.2 Създаваме папка smallpic
3.2.1 Копираме картинки с размер 90х68;
3.3 Създаваме документ pic.css
3.4 Създаваме документ pic1.html
3.5 Създаваме документ pic2.html
3.6 Създаваме документи pic#.html нужни за всяка картинка.l

album.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>kolermo</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<link rel="stylesheet" href="album.css" type="text/css" />


<!-- JS Code by Choo data.bg използвам съм и Css-а от неговия пример за да съм коректен -->
<script type="text/javascript">
var
contentHeight,
holderHeight,
scrollSize,
flag = 0,
speed
;

function getSizes() {
contentHeight = document.getElementById('content').offsetHeight;
holderHeight = document.getElementById('holder').offsetHeight;
scrollSize = (contentHeight - holderHeight) * -1;
}

function scrollDown(spd) {
var obj = document.getElementById('content');
if(flag > scrollSize) {
flag = flag - spd;
obj.style.marginTop = flag + "px";
speed = setTimeout("scrollDown(" + spd + ")", 4);
}
}

function scrollUp(spd) {
var obj = document.getElementById('content');
if(flag < 0) {
flag = flag + spd;
obj.style.marginTop = flag + "px";
speed = setTimeout("scrollUp(" + spd + ")", 4);
}
}

function stopScroll() {
speed = clearTimeout(speed);
}

window.onload = getSizes;
</script>
<!-- 10x Choo-->
</head>

<body>

<div class="center">
<div class="left">
<div class="holder" id="holder">
<div class="content" id="content">

<div class="pic"><a href="pic/pic1.html" target="if3"><img src="pic/smallpic/1.jpg" width="90" height="68" border="0" alt="pic1" title="pic"/></a></div>

<div class="pic"><a href="pic/pic2.html" target="if3"><img src="pic/smallpic/2.jpg" width="90" height="68" border="0" alt="pic1" title="pic"/></a></div>

<div class="pic"><a href="pic/pic3.html" target="if3"><img src="pic/smallpic/3.jpg" width="90" height="68" border="0" alt="pic1" title="pic"/></a></div>
<div class="pic"><a href="pic/pic4.html" target="if3"><img src="pic/smallpic/4.jpg" width="90" height="68" border="0" alt="pic1" title="pic"/></a></div>

<div class="pic"><a href="pic/pic5.html" target="if3"><img src="pic/smallpic/5.jpg" width="90" height="68" border="0" alt="pic1" title="pic"/></a></div>

<div class="pic"><a href="pic/pic6.html" target="if3"><img src="pic/smallpic/6.jpg" width="90" height="68" border="0" alt="pic1" title="pic"/></a></div>

<div class="pic"><a href="pic/pic7.html" target="if3"><img src="pic/smallpic/7.jpg" width="90" height="68" border="0" alt="pic1" title="pic"/></a></div>

<div class="pic"><a href="pic/pic8.html" target="if3"><img src="pic/smallpic/8.jpg" width="90" height="68" border="0" alt="pic1" title="pic"/></a></div>

<div class="pic"><a href="pic/pic9.html" target="if3"><img src="pic/smallpic/9.jpg" width="90" height="68" border="0" alt="pic1" title="pic"/></a></div>

<div class="pic"><a href="pic/pic10.html" target="if3"><img src="pic/smallpic/10.jpg" width="90" height="68" border="0" alt="pic1" title="pic"/></a></div>

</div>

</div>
<div class="scroller">
<a href="#" onmouseover="scrollDown(2);" onmouseout="stopScroll();" onmousedown="scrollDown(5);" onmouseup="stopScroll();">Надолу</a>|<a href="#" onmouseover="scrollUp(2);" onmouseout="stopScroll();" onmousedown="scrollUp(5);" onmouseup="stopScroll();">Нагоре</a>
</div>


</div>


<div class="large">
<!-- Създаваме рамката -->
<iframe src="pic/pic1.html" name="if3" width="400" height="400" frameborder="0" scrolling="no"></iframe>
</div>

</div>
</body>
</html>

album.css

body {
margin: 0 auto;
border: 0px solid red;
background-color: #E4F7F6;
}
.center {
height:500px;
border: 1px solid #ccc;
background-color: #E4F7F6;
}

.left{
margin-left: 10px;
width:110px;
height:500px;
float: left;
background-color: #E4F7F6;
border: 0px solid red;
}
.large {
float:right;
margin-top: 10px;
padding-right: 40px;
border: 0px solid #000;
background-color: #E4F7F6;
font-size: 14px;
font-family: Verdana, serif;
}
.pic {
margin-top:5px;
width:90px;
height:68px;
border: 2px solid #BBF0EB;
float:left;
}

<!-- CSS-а на Choo нужен за сролването на малките картинки -->
.holder {
width:100px;
height:400px;
margin-top: 40px;
float: left;
background-color: #E4F7F6;
border: 0px solid red;
overflow: hidden;
}
div.content {
float: left;
text-align: center;
border: 0px solid red;
background-color : #E4F7F6;
font-size: 10px;
font-family: Verdana, serif;
}

div.scroller
{
width: 90px;
height:15px;
float: left;
margin-top: 20px;
background-color: #E4F7F6;
text-align: center;
font-size: 9px;
font-family:Verdana, serif;
border: 0px solid red;
}

.scroller a {
width: 110px;
height:10px;
color: #ccc;
background-color:#E4F7F6;
text-decoration: none;
text-align:center;
font-size: 9px;
font-family:Verdana, serif;}

.scroller a:hover {color: #888;
background-color:#E4F7F6;
text-decoration: none;}

pic1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Галерия</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<link rel="stylesheet" href="pic.css" type="text/css" />
</head>

<body>


<div class="picmenu">
<div class="next"><a href="pic2.html" target="if3">next</a></div>
</div>
<div class="large">
<img src="largepic/3.jpg" width="400" height="300" border="0" alt="pic1" title="pic1"/>
</div>

</body>
</html>

pic2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>kolermo</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<link rel="stylesheet" href="pic.css" type="text/css" />
</head>

<body>


<div class="picmenu">
<div class="back"><a href="pic1.html" target="if3">back</a></div>
<div class="next"><a href="pic3.html" target="if3">next</a></div>
</div>
<div class="large">
<img src="largepic/2.jpg" width="400" height="300" border="0" alt="pic1" title="pic1"/>
</div>



</body>
</html>

pic.css

body {background-color: #E4F7F6;}

.picmenu {
margin:0 auto;
margin-bottom:30px;
width:360px;
height:20px;
border: 0px solid red;
text-align: center;
font-family:Verdana, serif;
font-size: 12px;
}
.large {
width:400px;
height:300px;
border: 2px solid #BBF0EB;
background-color: #E4F7F6;
font-size: 14px;
font-family: Verdana, serif;
}

a{
background-color:#E4F7F6;
text-align: center;
font-family:Verdana, serif;
font-size: 12px;
font-weight : bold;
text-decoration: none;
color: #ccc;
}
a:hover {color: #888;
text-decoration: none;}


.back{
float: left;
width:50px;
height:20px;

}
.home {
float: left;
width:50px;
height:20px;

}
.next {
float: right;
width:50px;
height:20px;
text-align: right;
}

Сходни публикации

Лепкав хедър със скролиране.

Tooltip без jQuery/Javascript

Background image – Създаване на линк

Малка спретната галерийка

web-tourist

предишнаДобавете и заглавието на темата в индекса

следващаКак да сложим парола на MySQL и phpMyAdmin

Оставете коментар Cancel Reply

Сходни публикации

Лепкав хедър със скролиране.

Tooltip без jQuery/Javascript

Background image – Създаване на линк

Виж Още:

web-tourist

предишнаДобавете и заглавието на темата в индекса

следващаКак да сложим парола на MySQL и phpMyAdmin

Оставете коментар Cancel Reply