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

Новости | Инвентарь | Портфолио | Магазин | Компания | Ководство

| Техногрет |  |  |  |

HTML XSLT JavaScript Etc

Владимир Токмаков

# Просмотр картинок 13 июня 2005

| Задача. | Сделать навигацию без перезагрузки страницы. |

### Как это выглядит в браузере

← →

он, они, она, оно

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66

    <style type="text/css">
        #fsClipper { height: 330px; width: 100%; overflow: auto; //overflow: hidden; //overflow-x: auto; }
        .fsControl, #fsLinks a { color: darkblue; cursor: pointer; //cursor: hand; }
        .fsControl.disabled, #fsLinks a.current { color: #000000; cursor: default; text-decoration: none; }
        .fsControl.disabled { color: #666666; }
        #fsScreen { height: 300px ! important; background: no-repeat 50% 50%; }
    </style>
    <div id="fsClipper">
        <div id="fsScreen"></div>
    </div>
    <p>
        <span id="fsControl_prev" class="fsControl">&larr;</span>
        <span id="fsControl_next" class="fsControl">&rarr;</span>
    </p>
    <p id="fsLinks">
        <a href="/portfolio/illustrations/i/0ca1b1284e6e6b78.jpg" onclick="return Show_picture( '/portfolio/illustrations/i/0ca1b1284e6e6b78.jpg', 200, 200 )">он</a>,
        <a href="/portfolio/illustrations/i/577698ac49499acc.jpg" onclick="return Show_picture( '/portfolio/illustrations/i/577698ac49499acc.jpg', 200, 200 )">они</a>,
        <a href="/portfolio/illustrations/i/69d02a844a673326.jpg" onclick="return Show_picture( '/portfolio/illustrations/i/69d02a844a673326.jpg', 200, 200 )">она</a>,
        <a href="/portfolio/illustrations/i/69fbeb22269a853d.jpg" onclick="return Show_picture( '/portfolio/illustrations/i/69fbeb22269a853d.jpg', 200, 200 )">оно</a>
    </p>
    <script type="text/javascript">
        function Filmstrip(){
            this.ePicture = document.getElementById('fsScreen');
            this.ePrev = document.getElementById('fsControl_prev');
            this.eNext = document.getElementById('fsControl_next');
            var eLinks = document.getElementById('fsLinks');
            this.aeLink = eLinks.getElementsByTagName('A');
            this.show_picture = function( sBackground, iWidth, iHeight ){
                this.ePicture.style.backgroundImage = "url(" + sBackground + ")";
                if( iWidth )
                    this.ePicture.style.width = iWidth;
                if( iHeight )
                    this.ePicture.style.height = iHeight;
                this.set_current( sBackground );
            }
            this.set_current = function( sHref ){
                for( var i = 0 ; i < this.aeLink.length ; i++ ){
                    if( this.aeLink[i].href.match( new RegExp( sHref + "$" ) ) ){
                        this.aeLink[i].className += " current";
                        this.ePrev.className = this.ePrev.className.replace( /\s+disabled/g, "" );
                        this.eNext.className = this.eNext.className.replace( /\s+disabled/g, "" );
                        if( i == 0 ){
                            this.ePrev.className += " disabled";
                            this.ePrev.onclick = function(){};
                            this.eNext.onclick = this.aeLink[i + 1].onclick;
                        }else if( i == this.aeLink.length - 1 ){
                            this.eNext.className += " disabled";
                            this.eNext.onclick = function(){};
                            this.ePrev.onclick = this.aeLink[i - 1].onclick;
                        }else{
                            this.eNext.onclick = this.aeLink[i + 1].onclick;
                            this.ePrev.onclick = this.aeLink[i - 1].onclick;
                        }
                    }else{
                        this.aeLink[i].className = this.aeLink[i].className.replace( /\s*current/g, "" );
                    }
                }
            }
        }
        var oFilmstrip = new Filmstrip();
        function Show_picture( sHref, iWidth, iHeight ){
            oFilmstrip.show_picture( sHref, iWidth, iHeight );
            return false;
        }
        oFilmstrip.aeLink[0].onclick();
    </script>

Электропочта: mailbox@artlebedev.ru Телефоны и адреса студии Телефон: (495) 540-18-00 | © 1995—2006 Студия Артемия Лебедева |