Javascript-форум - Фотогалерея.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Фотогалерея. (https://javascript.ru/forum/misc/13596-fotogalereya.html)

Фотогалерея.

есть готовая фотогалерея.

Код:

<head>

<title>Gallery</title>

<style type="text/css">

body{

        margin:0;

        padding:50px;

        text-align:center;

        font-family:Arial, Helvetica, sans-serif;

        color:#FFF;

        background:#000;

}

a img{border:none;}

 

#gallery{

        width:663px;

        height:400px;

        overflow:hidden;

        position:relative;

        z-index:1;

        margin:0 auto 100px auto;

}

#tabs2{

        list-style:none;

        padding:0;

        margin:0;

        width:130px;

        height:400px;

        float:left;

}

#tabs2 li{

        padding:0;

        margin:0;

        float:left;

}

#tabs2 li a img{

        display:block;

        width:120px;

        height:90px;

}

#tabs2 li a{

        display:block;

        border:5px solid #999;

        width:120px;

        height:90px;

}

#tabs2 li a:hover{border:5px solid #fff;}

#tabs2 li a img.fullPic, #gallery1 div{

        position:absolute;

        z-index:1;

        left:130px;

        top:0;

        width:533px;

        height:400px;

}

#tabs2 li a:hover img.fullPic{z-index:3;}

#gallery div{

        z-index:2;

        background:#242424;

}

</style>

</head>



<script language="JavaScript">



var imagesMassiv = new Array('images/pic1.jpg', 'images/pic2.jpg', 'images/pic3.jpg', 'images/pic4.jpg');

var countImages = 0;

var timer;

function show(){

        if(countImages > 3){

                countImages = 0;

        }

        document.images['Show'].src = imagesMassiv[countImages];

        countImages = countImages + 1;

}



</script>

<body>

<h1>Gallery</h1>

<div id="gallery">

<table>

        <ul id="tabs2">

                <li><a href="#"><img src="images/pic1s.jpg" alt="" /><img src="images/pic1.jpg" class="fullPic" alt="" /></a></li>

                <li><a href="#"><img src="images/pic2s.jpg" alt="" /><img src="images/pic2.jpg" class="fullPic" alt="" /></a></li>

                <li><a href="#"><img src="images/pic3s.jpg" alt="" /><img src="images/pic3.jpg" class="fullPic" alt="" /></a></li>

                <li><a href="#"><img src="images/pic4s.jpg" alt="" /><img src="images/pic4.jpg" class="fullPic" alt="" /></a></li>

                <li><a href="#"><img src="images/pic1.jpg" id="Show" class="fullPic" /></a></li>

        </ul>

</table>

</div>

<input type="button" value="PLAY" onClick="timer = setInterval('show()', 50)">

<input type="button" value="STOP" onClick="clearInterval(timer)">



</body>

</html>

нужно переместить список фотографий под главное окно в строчку, но поскольку они заключены в одни

Код:

<li></li>

то как бы я не менял они остаются в столбик... подскажите что делать

учить htmlприменять не список а таблицу либо контейнеры

Цитата:

Сообщение от bpystep

то как бы я не менял они остаются в столбик... подскажите что делать

Цитата:

Сообщение от dmitriymar

учить html

Цитата:

Сообщение от bpystep

#tabs2{
list-style:none;
padding:0;
margin:0;
width:130px;
height:400px;
float:left;
}

изменить/удалить ширину

Цитата:

Сообщение от dmitriymar

учить html применять не список а таблицу либо контейнеры

Таблицу пытался поставить, но дело в том что если бы было здесь

Код:

<li><a href="#"><img src="images/pic1s.jpg" alt="" /><img src="images/pic1.jpg" class="fullPic" alt="" /></a></li>

раздельно, то все было бы окей, а так никак не получается.

Цитата:

Сообщение от monolithed

изменить/удалить ширину

для этого сначала нужно список поместить вниз. а потом уже заниматься размерностью блоков.

ну и убрать тег списка...каждую ссылку либо в свою ячейку либо контейнер

Цитата:

Сообщение от dmitriymar

ну и убрать тег списка...каждую ссылку либо в свою ячейку либо контейнер

блин ну пробовал я так, не выходит!!!!!!!

ну тогда ответ один- учить основы html чтобы вышло

Цитата:

Сообщение от dmitriymar

ну тогда ответ один- учить основы html чтобы вышло

Хочешь можешь устроить мне опрос по основам Html, я тебе без гугла отвечу, через аську, чтоб ты точно знал что я не гуглю... Не надо посылать человека что-то учить, если он говорит: "Ну не выходит так, я уже пробовал!"

если ничего дельного предложить не можешь, проходи лесом..

З.Ы. Насчет опроса я не пошутил.

Цитата:

<table>
	<ul id="tabs2">
		<li><a href="#"><img src="images/pic1s.jpg" alt="" /><img src="images/pic1.jpg" class="fullPic" alt="" /></a></li>
		<li><a href="#"><img src="images/pic2s.jpg" alt="" /><img src="images/pic2.jpg" class="fullPic" alt="" /></a></li>
		<li><a href="#"><img src="images/pic3s.jpg" alt="" /><img src="images/pic3.jpg" class="fullPic" alt="" /></a></li>
		<li><a href="#"><img src="images/pic4s.jpg" alt="" /><img src="images/pic4.jpg" class="fullPic" alt="" /></a></li>
		<li><a href="#"><img src="images/pic1.jpg" id="Show" class="fullPic" /></a></li>
	</ul>
</table>

Если вы знаете html обьясните мне зачем тут ul находится в table, может я что-то не знаю?
далее
Если вы знаете html, что происходит при нажатии на <a href="#"></a>?
И если вы знаете css

Цитата:

#tabs2{
	list-style:none;
	padding:0;
	margin:0;
	width:130px;
	height:400px;
	float:left;
}

Как они выстроятся при фиксированной ширине в 130px?

А ещё много js.

Цитата:

Сообщение от Skipp

Как они выстроятся при фиксированной ширине в 130px?

Тоже самое сказал, но видимо автор в танке.