ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Всплывающий div со ссылками
2 сообщений из 2, страница 1 из 1
Всплывающий div со ссылками
    #39023218
Павел Гужанов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Павел Гужанов
Участник
Здравствуйте.

Пытаюсь сделать следующее: на страничке есть миниатюра картинки.
1. По клику на ней срабатывает лайтбокс, поверх странички показывается эта же картинка в полном размере, которая закрывается по клику на любом месте в браузере. Это работает
2. При наведении курсора на миниатюру должно появиться окно, в котором две ссылки: первая - Увеличить фото, по ней должен также сработать лайтбокс, вторая - Открыть фотогалерею - должна открывать страницу с фотогалереей, к которой относится эта картинка.

По п. 2 сделал следующее: У миниатюры картинки описал два события: onmouseover и onmouseout. При наведении курсора появляется окошко (див), в котором две нужные ссылки. Когда курсор покидает миниатюру - этот див исчезает. Это все работает правильно. Но. Когда курсор оказывается над дивом, он начинает мигать. Это правильно, потому что когда курсор над дивом, он уже не над картинкой и див пропадает. Курсор сразу оказывается над картинкой и див появляется снова. Как мне сделать, чтобы это не присходило?

И вторая проблема: При клике по первой ссылке увеличенное фото открывается в новой вкладке, а не поверх страницы. Получается, что не работает лайтбокс. По клику по второй ссылке вообще ничего не происходит

Код html:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href=style.css />
	<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="lightbox.js"></script>
	<script type="text/javascript" src="MyScripts.js"></script>
</head>
<body>
 <div class="content-bottom-cont-right" id="content-bottom-cont-right">
	<div class="right-photo">
		<a href="651.jpg" title="name.photo" target="_blank" rel="lightbox">
			<img id="right-img-1" src="651.jpg" class="image_thumb" 
				onmouseover="right_bar_over(`21`,`name`,`651.jpg`,`photo`,`localhost`,this.id )" 
				onmouseout="tipOut()" alt="" />
		</a>
	</div>
</div>
</body>
</html>



Код css:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
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.
body{
	background-color:gray;
}
.content-bottom-cont-right{
    float:left;
    width: 150px;
	position: static;
	margin:0 auto;
} 
.content-bottom-cont-right img{
    width: 120px;
    border: gray solid 1px; 
    margin:10px 10px 10px 15px;
    cursor: pointer; 
    position: relative;
    vertical-align: middle;
	z-index: 10;
}
.right-photo{
    background: -moz-linear-gradient(bottom, #7d8e30, #eaf0cf);
    background: -o-linear-gradient(bottom, #7d8e30, #eaf0cf);  
    background: -webkit-linear-gradient(bottom, #7d8e30, #eaf0cf);  
    background: -ms-linear-gradient(bottom, #7d8e30, #eaf0cf);
    width: 150px;
}
.right-photo p{
    padding: 5px;
    text-align: center;
    color: #474e27 ;
}
#toolDiv{
	position:absolute;
	background-color:white;
	font-size:9px;
	}



Код JS:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
var x = 0, y = 0;
var  divHtml;
function right_bar_over(galery_id, galery_name, photo, comment, siteUrl, id){
	if(x == 0){
		var imgEl = jQuery("#" + id);
		var divHtml = '<div id = "toolDiv">';
		divHtml += '<p>' + galery_name + ' ' + comment + '</p>';
		divHtml += '<a href="' + photo + '" target="_blank" rel="lightbox">Увеличить фото</a><br>';
		divHtml += '<a href="' + siteUrl + '?option=galery&galery_id=' + galery_id + '">Открыть фотогалерею ' + galery_name + '</a><br>';
		divHtml += '</div>';
		x = imgEl.offset().left;
		y = imgEl.offset().top;
		titleDiv = jQuery(divHtml);
		titleDiv.css("z-index","1000");
		titleDiv.offset(function(){
		  	return {top:y +20, left:x};
		});
		
		jQuery('body').append(titleDiv);
	}
}
function tipOut(){
	jQuery("#toolDiv").remove();
	x = 0;
}
...
Рейтинг: 0 / 0
05.08.2015, 11:04
| Ответить | Цитировать | Написать  
Всплывающий div со ссылками
    #39023305
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
Павел Гужанов,
а вообще без кода нельзя?
- есть балун http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
- он может брать html из title картинки
- туда (в картинки) прописать твои ссылки
- всё.
2. У тебя масло-масляное. Либо всплыв. картинка(лайтбокс), либо всплыв. доп.меню.
...
Рейтинг: 0 / 0
05.08.2015, 11:55
| Ответить | Цитировать | Написать  
2 сообщений из 2, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Всплывающий div со ссылками
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=68&tid=1445805]:
 0ms
get settings:
 8ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 39ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 42ms
get tp. blocked users:
 1ms
others: 209ms
total:  329ms
созд. / загр.: 329ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]