Javascript.RU

Галерея

Галерея
Смотреть в действии
В качестве образца была взята одна тема форума, надеюсь автор на меня не обидится, если обидится, то удалю.
Вообще получилась не то, что хотелось, если дадите совет буду очень благодарен .

<html>
<head>
<title>Галлерея</title>

<style>
div.gallery{
width:300;
height:100;
border:2px dashed #888888;
overflow:hidden;
}

#tooltip{
display:none;
background:url("images/tooltip.png") no-repeat scroll 0 0 transparent;
color:#FFFFFF;
font-size:12px;
height:66px;
width:180px;
padding:10px 10px 40px;
font:14px/24px Calibri,"Trebuchet MS",Tahoma,sans-serif;
}

.roundCornerAll{
-moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius: 4px;
}

ul.gallery{
margin:0;
padding:0;
position:relative;
}

ul.gallery li{
display:inline;
}
ul.gallery img{
border:medium none;
}

</style>

<script>

function _$(id)
{
this.id=id;
return document.getElementById(id);
}

function domNTags(id,tag)
{
var elem=_$(id);
var list=elem.childNodes;
var n=0;
tag=tag.toUpperCase();
for(var i=0;i<list.length;i++){   
	if(list[i].tagName==tag){n++}	
}
return n;
}

_$.timer = function(secToRepeat,timerId,func)
{
	window[timerId] = setInterval(func,secToRepeat);
}

_$.timerStop = function(timerId)
{
	if(window[timerId]) {clearInterval(window[timerId]);delete window[timerId];}
}

_$.waitAndRun = function(sec,func)
{
	setTimeout(func, sec*1000);
}

function int(value)
{
return parseInt(value);
}

function abs(value)
{
return Math.abs(value);
}

function move(value,secToRepeat)
{
  if(!window['timerGallery'])
  {
	var imgPrev=_$('galleryPrev');
	var imgNext=_$('galleryNext');
	_$('ulGallery').style.opacity="0.5";
	_$.timer(secToRepeat,'timerGallery',function()
							  { 								
							    if(!window.galleryTimesToRepeat) {galleryTimesToRepeat=int(92/abs(value));}
								else{galleryTimesToRepeat--;}								
								if(galleryTimesToRepeat<1){delete window.galleryTimesToRepeat;stop();}
								var elem=_$('ulGallery');
								var left=int(elem.style.left);
								if(left>=10) {imgPrev.style.opacity='0.5';imgNext.style.opacity='1';}
								else if(left<=-450) {imgNext.style.opacity='0.5';imgPrev.style.opacity='1';}
								else {imgPrev.style.opacity='1';imgNext.style.opacity='1';}
								if(left<10 && value>0){elem.style.left=left+value;}
								else if(left>-450 && value<0){elem.style.left=left+value;}
								else {delete window.galleryTimesToRepeat;stop();};
						      });
  }
}

function stop()
{
_$('ulGallery').style.opacity="1";
_$.timerStop('timerGallery');
}

function mouseover(e,number)
{
var e=e || event;
var elem=_$('tooltip');
var secToRepeat=1;
var value=3;
var tolX=int(elem.style.left);
var tolY=int(elem.style.top);

if(window['timerTooltip']==undefined && abs(window.x-tolX)>value)
{   
	_$.timer(secToRepeat,'timerTooltip',function()
							  {								    
								var elem=_$('tooltip');								
								elem.innerHTML="Среботал элемент номер "+number;								
								var tolX=int(elem.style.left);
								var tolY=int(elem.style.top);
								if(abs(window.x-tolX)<value+3) {value=1;}
							    if(window.x<tolX){_$('tooltip').style.left=tolX-value;}
								if(window.x>tolX){_$('tooltip').style.left=tolX+value;}
								//if(y<tolY){_$('tooltip').style.top=--tolY;}
								//if(y>tolY){_$('tooltip').style.top=++tolY;}
								//if(x==tolX && y==tolY) {_$.timerStop('timerTooltip');}
								_$('test').innerHTML=abs(x-tolX)+" "+value;								
								if(abs(window.x-tolX)<value) {_$.timerStop('timerTooltip');}								
						      });
}
}

function mouseout()
{

}

window.onload = function()
{
	_$('gallery').onmousemove = function(e)
	{
		e=e||event;
		window.x=e.clientX;
		window.y=e.clientY;
		var elem=_$('gallery');
		var elemX=int(elem.style.left);
		var elemY=int(elem.style.top);
		if(window.x<60 || window.x>360 || window.y<200 || window.y>300) {_$('tooltip').style.display="none";}
		//alert(window.x+" "+window.y);        
		if(window.x>=60 && window.x<=360 && window.y>=200 && window.y<=300) {_$('tooltip').style.display="block";}
	}
}
</script>
</head>
<table id="gallery" style="position:absolute;left:20;top:200;">
<tr>
<td><img id="galleryPrev" onmousedown="if(this.style.opacity!=0.5) {move(2,1);}" ondragstart="return false;" src="images/go-previous.png" style="opacity:0.5;" /></td>
<td>
<div class="gallery roundCornerAll" >
	<ul class="gallery" id="ulGallery" style="width: 810px; left: 10px; top:10;">
        <li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img1.jpg" onmouseover="mouseover(event,1);"></a></li>
        <li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img2.jpg" onmouseover="mouseover(event,2);"></a></li>
        <li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img3.jpg" onmouseover="mouseover(event,3);"></a></li>
        <li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img4.jpg" onmouseover="mouseover(event,4);"></a></li>
        <li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img5.jpg" onmouseover="mouseover(event,5);"></a></li>
        <li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img6.jpg" onmouseover="mouseover(event,6);"></a></li>
        <li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img7.jpg" onmouseover="mouseover(event,7);"></a></li>
        <li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img8.jpg" onmouseover="mouseover(event,8);"></a></li> 				
    </ul>
</div>
</td>
<td><img id="galleryNext" onmousedown="if(this.style.opacity!=0.5) {move(-2,1);}" ondragstart="return false;" src="images/go-next.png" /></td>
</tr>
</table>
<div id='tooltip' style="position:absolute;top:93;left:200;">Tooltip</div>
<div id="test"></div>
</html>
+3

Автор: Дмитрий Пленкин (не зарегистрирован), дата: 29 апреля, 2010 - 21:38
#permalink

1) "Галерея", а не "галлерея"; "обидится", а не "обидеться".
2) HTML-код грязный.
3) JS-код интересный, но тоже "с душком".
4) Если более-менее быстро двигать мышкой над элементами, пока блок с мессаджем едет к точке назначения, то результат получается практически случайным. Вплоть до того, что курсор стоит на 8-ом элементе, мессадж - над 6-ым, а написано, что сработал 5-ый.

В общем, на троечку.


Автор: mycoding, дата: 29 апреля, 2010 - 21:42
#permalink

Да получилось не совсем то что, что хотелось.


Автор: Aleko, дата: 30 апреля, 2010 - 11:11
#permalink

Заповедник багов а не галерея =).

0. Ширина вьюпорта почему то рассчитана на 3 картинки с куском четвертой... это вообще интересно =)
1. Если мышкой двигать быстрее - не просиходит обновление инфы в облаке
2. Если опять же двигать мышой быстрее - глючит анимация
3. Если убрать мышку - облако исчезнет но его анимация будет продолжаться (зачем?)
4. Если убрать мышку проведя её по облаку наверх то облако не исчезнет вообще
5. В осле (даже в 8) всё торжественно дохнет из за ошибок (**пой чую что глубинных) в скрипте. Ну и ни о каком облаке говорить не приходится.

To афтар: аналогичную галерейку реализовывал у себя вот тут (в центре страницы http://studioad.ru/forum). Только там без ерунды типа облака.

Это только так, в код не смортя.


Автор: mycoding, дата: 30 апреля, 2010 - 13:09
#permalink

Благодарю за ссылку попытаюсь разобраться и улучшить.
А вообще был очень удивлён, дело в том, что событие onmouseover срабатывает по несколько раз, хотя должно срабатывать один раз на объекте.


Автор: mycoding, дата: 30 апреля, 2010 - 19:25
#permalink

Щас получше, но не получается сделать привязку по y, как у вас сделано не совсем пойму.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
1 + 9 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
mycoding
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum