Css Image Viewer перемещает страницу по клику - PullRequest
Новая
       18

Css Image Viewer перемещает страницу по клику

2 голосов
/ 11 ноября 2011

Когда я нажимаю на вкладки сбоку, это меняет картинку, что я и хочу, но также перемещает страницу, чтобы вид был сверху. Я заметил, что это произошло только тогда, когда внизу также было содержимое страницы, поэтому в этом примере я поместил множество разрывов строк.

Вот ссылка на мою страницу, если вы хотите получить лучший пример того, что я имею в виду:

dl.dropbox.com / у / 8391091 / Ebay% 20page.html

Код, который я привел здесь, только для просмотра изображений (CSS, HTML) 

            /* Setup Tabs */

            #view ul{

            margin-top: 0;
            background: black;
            width: 85px; /* Width of Tab Image */
            float: left;
            list-style: none;
            border-right:8px solid grey;
            }

            #view ul li{

            margin-left: -40px;
            margin-right: -40px;
            height:75px; /* Height of Tab Image */
            }

            /* Setup Tab so normal opacity is 40 and rollover is 100 */
            #view ul li a img{
            border: 0px;    
            /* for IE */
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
            filter:alpha(opacity=50);

            /* CSS3 standard */
            opacity:0.5;

            }

            /* Change Opacity to 100% on hover*/
            #view ul li a:hover img{

            /* for IE */
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter:alpha(opacity=100);

            /* CSS3 standard */
            opacity: 1.0;
            }

            /* Places images to the right of the tabs,
            and hides non selected images */
            #images{

            width: 500px; 
            height: 300px; 
            overflow: hidden;  /* Hides the non selected images */
            float: left;
            }

            /* Square border around viewer*/
            #wrapper{
            outline-style: none;
            border-top-left-radius: 5px 5px;
            border-top-right-radius: 5px 5px;
            border-bottom-left-radius: 5px 5px;
            border-bottom-right-radius: 5px 5px;
            -moz-border-radius-topleft: 5px 5px;
            -moz-border-radius-topright: 5px 5px;
            -moz-border-radius-bottomleft: 5px 5px;
            -moz-border-radius-bottomright: 5px 5px;
            width: 633px;
            height: 300px;
            border: 10px solid grey;
            margin: 0px auto;
            }
            </style>

            <div id="section1">
            <div id="view">
            <div id="wrapper">
            <!-- Tabs -->
            <ul>
            <li><a href="#image1" id="tab1"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4095.jpg?t=1312893965" width="125" height="75"/></a></li>
            <li><a href="#image2" id="tab2"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4093.png?t=1312894058" width="125" height="75"/></a></li>
            <li><a href="#image3" id="tab3"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4089.png?t=1312894246" width="125" height="75"/></a></li>
            <li><a href="#image4" id="tab4"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/Photo07-08-2011205730.jpg?t=1312894308" width="125"           height="75"/></a></li>
            </ul>

            <!-- Images -->
            <div id="images">
            <div><a name="image1"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4095.jpg?t=1312893965" width="500" height="300" /></div>
            <div><a name="image2"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4093.png?t=1312894058" width="500" height="300" /></div>
            <div><a name="image3"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4089.png?t=1312894246" width="500" height="300" /></div>
            <div><a name="image4"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/Photo07-08-2011205730.jpg?t=1312894308" width="500" height="300" /></div>
            </div>
            </div>      
            </div>
            <p class="text" align="center">(Click tabs at side for larger picture)</p>      
            </div>

            </br>
            </br>
            </br>
            </br>
            </br>

            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            More page content
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>

Ответы [ 2 ]

1 голос
/ 11 ноября 2011

Он использует идентификаторы фрагментов (в URL: "# image1") и является поведением по умолчанию. Когда вы используете их для ссылок перехода, он возвращает элемент с идентификатором, который находится в URL в верхней части страницы. Теперь чтобы исправить это, я не уверен, но я попробую прямо сейчас! А как насчет этого? \ http://alt -web.com / ДЕМО / CSS-Image-Viewer.shtml Вы можете просто сделать опрокидывание и сделать интервал с большим изображением, чтобы изменить его видимость с скрытого на видимый. Обычно это происходит так. Вам просто нужно немного изменить свой код, и все большие картинки накладываются друг на друга, а не скрываются при переполнении.

0 голосов
/ 13 ноября 2011 
a href="#viewer">
<img src="../Photo_Gallery/thumbs/pic1.jpg">
<span>
<img src="../Photo_Gallery/pic1.jpg">
<br>
   optional caption
</span>
</a>

, поэтому вы помещаете основное изображение в промежуток. 

.rollover li a span {
      visibility: hidden;
}
.rollover a:hover, .rollover a:hover span, .rollover a:active, .rollover a:active
span, .rollover a:focus, .rollover a:focus span {
      visibility: visible;
}

Вот как они делают это в учебнике. Так что вместо того, чтобы все ваши картинки были в строке и использовалось переполнение: скрыто, как выСделал. Поместите каждый под соответствующий эскиз, чем вы должны расположить их друг над другом скрытыми. Но дело в том, как они это делают, при загрузке страницы изображение не отображается.Поэтому я постараюсь найти способ это исправить.

...