Форум

olga007 · #1 (**permalink**) 28.02.2013, 13:24

Всем привет,
такая задача: на странице 6 ссылок в виде разных картинок. По нажатию на каждую должно всплывать окошко с описанием.
Как сделать такое окошко для 1 ссылки я нашла в интернете, но как сделать для 6 ссылок с разными id? Не переписывать же скрипт 6 раз :-)
Подскажите пожалуйста....

html:

<body>
	<div id="wrapper">
    	<img id="bg" src="images/bg-wrapper.jpg" alt="" width="1200" height="850" />
        <a href="" id="windowOpen6"></a>
        <div id="window">
            <div id="windowTop">
                <div id="windowTopContent">
                    Дом 6
                </div>
            <img src="images/window_min.jpg" id="windowMin" />
            <img src="images/window_max.jpg" id="windowMax" />
            <img src="images/window_close.jpg" id="windowClose" />
            </div>
            <div id="windowBottom">
                <div id="windowBottomContent">&nbsp;
                </div>
            </div>
            
            <div id="windowContent">
                <img src="images/dom6.jpg" alt="" width="275" height="185" />
            </div>
            <img src="images/window_resize.gif" id="windowResize" />
        </div>
	</div>
</body>

скрипт:

$(document).ready(
	function()
	{
		$('#windowOpen6').bind('click',function() {
			if($('#window').css('display') == 'none') {
				$(this).TransferTo(
					{
						to:'window',
						className:'transferer2',
						duration: 200,
						complete: function()
						{
							$('#window').show();
						}
					});
			}
		this.blur();
		$("#bg").css('opacity', '0.7');
		return false;
		});

$('#windowClose').bind('click',function(){
	$('#window').TransferTo(
	{
		to:'windowOpen',
		className:'transferer2', 
		duration: 200
	}).hide();
	$("#bg").css('opacity', '1');
	});
	
$('#windowMin').bind('click',function(){
	$('#windowContent').SlideToggleUp(300);
	$('#windowBottom, #windowBottomContent').animate({height: 10}, 300);
	$('#window').animate({height:40},300).get(0).isMinimized = true;
	$(this).hide();
	$('#windowResize').hide();
	$('#windowMax').show();
});

$('#windowMax').bind('click',function(){
	var windowSize = $.iUtil.getSize(document.getElementById('windowContent'));
	$('#windowContent').SlideToggleUp(300);
	$('#windowBottom, #windowBottomContent').animate({height: windowSize.hb + 13}, 300);
	$('#window').animate({height:windowSize.hb+43}, 300).get(0).isMinimized = false;
	$(this).hide();
	$('#windowMin, #windowResize').show();
});

$('#window').Resizable({
	minWidth: 575,
	minHeight: 385,
	maxWidth: 575,
	maxHeight: 385,
	dragHandle: '#windowTop',
	handlers: {
	se: '#windowResize'
	},

onResize : function(size, position) {
	$('#windowBottom, #windowBottomContent').css('height', size.height-33 + 'px');
	var windowContentEl = $('#windowContent').css('width', size.width - 25 + 'px');
	if (!document.getElementById('window').isMinimized) {
		windowContentEl.css('height', size.height - 48 + 'px');
	}
}
});
}
);

Спасибо, буду признательна за подсказку...

ksa · #2 (**permalink**) 28.02.2013, 15:06

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

как сделать для 6 ссылок с разными id?

Варианты:
- передавать ИД параметрами
- использовать классы и структуру ДОМ

olga007 · #3 (**permalink**) 28.02.2013, 15:42

ksa,

спасибо, воспользуюсь первым вариантом.

рони · #4 (**permalink**) 28.02.2013, 23:27

olga007,
Диалоговое окно UI

Deff · #5 (**permalink**) 28.02.2013, 23:49

olga007,
А принтскрин итогового вида можно ?
Чот тут наворочено (*Или ссылку на демо

cyber · #6 (**permalink**) 28.02.2013, 23:50

Deff, я думал только мне это странным показалось)

Deff · #7 (**permalink**) 28.02.2013, 23:52

Текущий скрипт с данным контентом в Опере не запускается

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>


<script src="http://code.jquery.com/jquery-latest.js"></script>


</head>
<body>
<body>
	<div id="wrapper">
    	<img id="bg" src="images/bg-wrapper.jpg" alt="" width="1200" height="850" />
        <a href="" id="windowOpen6"></a>
        <div id="window">
            <div id="windowTop">
                <div id="windowTopContent">
                    Дом 6
                </div>
            <img src="images/window_min.jpg" id="windowMin" />
            <img src="images/window_max.jpg" id="windowMax" />
            <img src="images/window_close.jpg" id="windowClose" />
            </div>
            <div id="windowBottom">
                <div id="windowBottomContent">&nbsp;
                </div>
            </div>
            
            <div id="windowContent">
                <img src="images/dom6.jpg" alt="" width="275" height="185" />
            </div>
            <img src="images/window_resize.gif" id="windowResize" />
        </div>
	</div>


<script type="text/javascript">
$(document).ready(
	function()
	{
		$('#windowOpen6').bind('click',function() {
			if($('#window').css('display') == 'none') {
				$(this).TransferTo(
					{
						to:'window',
						className:'transferer2',
						duration: 200,
						complete: function()
						{
							$('#window').show();
						}
					});
			}
		this.blur();
		$("#bg").css('opacity', '0.7');
		return false;
		});

$('#windowClose').bind('click',function(){
	$('#window').TransferTo(
	{
		to:'windowOpen',
		className:'transferer2', 
		duration: 200
	}).hide();
	$("#bg").css('opacity', '1');
	});
	
$('#windowMin').bind('click',function(){
	$('#windowContent').SlideToggleUp(300);
	$('#windowBottom, #windowBottomContent').animate({height: 10}, 300);
	$('#window').animate({height:40},300).get(0).isMinimized = true;
	$(this).hide();
	$('#windowResize').hide();
	$('#windowMax').show();
});

$('#windowMax').bind('click',function(){
	var windowSize = $.iUtil.getSize(document.getElementById('windowContent'));
	$('#windowContent').SlideToggleUp(300);
	$('#windowBottom, #windowBottomContent').animate({height: windowSize.hb + 13}, 300);
	$('#window').animate({height:windowSize.hb+43}, 300).get(0).isMinimized = false;
	$(this).hide();
	$('#windowMin, #windowResize').show();
});

$('#window').Resizable({
	minWidth: 575,
	minHeight: 385,
	maxWidth: 575,
	maxHeight: 385,
	dragHandle: '#windowTop',
	handlers: {
	se: '#windowResize'
	},

onResize : function(size, position) {
	$('#windowBottom, #windowBottomContent').css('height', size.height-33 + 'px');
	var windowContentEl = $('#windowContent').css('width', size.width - 25 + 'px');
	if (!document.getElementById('window').isMinimized) {
		windowContentEl.css('height', size.height - 48 + 'px');
	}
}
});
}
);

</script>





</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript