Галерея фото c увеличением

Пример показа фото в окне.

Главная Контакты Софт Термины Неисправности Поисковики Шаблоны

Просмотр скрипта

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
    $("h2").append('<em></em>')
    $(".thumbs a").click(function(){
        var largePath = $(this).attr("href");
        var largeAlt = $(this).attr("title");
        $("#largeImg").attr({ src: largePath, alt: largeAlt });
        $("h2 em").html(" (" + largeAlt + ")"); return false;
    });
});
</script>
<style type="text/css">
body {
    margin: 20px auto;
    padding: 0;
    width: 580px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
h2 {
    font: bold 190%/100% Arial, Helvetica, sans-serif;
    margin: 0 0 .2em;
}
h2 em {
    font: normal 80%/100% Arial, Helvetica, sans-serif;
    color: #000000;
}
#largeImg {
    border: solid 1px #000000;
    width: 530px;
    height: 400px;
    padding: 1px;
}
.thumbs img {
    border: solid 1px #000000;
    width: 100px;
    height: 100px;
    padding: 1px;
}
.thumbs img:hover {
    border-color:#000000;
}
</style>
</head>
<body bgcolor="#A1FEF9">
<img id="largeImg" src="img-thumb.jpg" alt="Large image" />
<p class="thumbs">
    <a href="fotocvet.jpg" title="Image"><img src="img-thumb.jpg" /></a>
    <a href="fotocvet1.jpg" title="Image 2"><img src="img2-thumb.jpg" /></a>
    <a href="fotocvet2.jpg" title="Image 3"><img src="img3-thumb.jpg" /></a>
    <a href="fotocvet3.jpg" title="Image 4"><img src="img4-thumb.jpg" /></a>
    <a href="fotocvet4.jpg" title="Image 5"><img src="img5-thumb.jpg" /></a>
</p>

Эффекты просмотра фото

Для сайта

Пример создания сайта
Размещение в Интернете
Раскрутка сайта в Интернете
Заработок в Интернете
Visual Basic 6.0 с примерами
VBScript
Руководство по C++
JavaScript
Анимация в формате GIF
Вставка видео SWF в сайт.
Пиктограмма сайта (favicon)