Показать сообщение отдельно
  #1 (permalink)  
Старый 28.02.2013, 13:24
Новичок на форуме
Отправить личное сообщение для olga007 Посмотреть профиль Найти все сообщения от olga007
 
Регистрация: 28.02.2013
Сообщений: 2

6 всплывающих окон на странице
Всем привет,
такая задача: на странице 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');
	}
}
});
}
);


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