Форум

greymod · #1 (**permalink**) 03.12.2010, 00:11

Доброго времени суток, уважаемые!

Ребяты, нужна ваша помощь... на своем сайте www.rfidcenter.ru я хотел разместить несколько изображений, которые по клику можно было бы увеличивать в том же окне. Насколько я понял, есть скрипт JS fancybox. Подключил его и css-стиль согласно мануалу:

<link rel="stylesheet" href="fancyboxjquery.fancybox-1.3.3.css" type="text/css" media="screen" />

<script type="text/javascript" src="fancybox/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancybox/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/js/jquery.fancybox-1.2.1.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("a").fancybox();
});
</script>

И соответственно вставил нужную картинку:

<a  class="fancy" href="/public_images/fashion_b.png">
   <img alt="" width="231" height="379px" src="/public_images/fashion.png" /> </a>

В итоге у меня по клику отображается просто новая картинка в другом окне и этот скрипт, получается, что не срабатывает.

скачивал и устанавливал другие версии плагина - такая же ситуация ((

Подскажите, как быть... может есть какие-то альтернативы?
Заранее спасибо!

рони · #2 (**permalink**) 03.12.2010, 05:06

1.Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
2.Не подгружайте одно и тоже 2 раза

<script type="text/javascript" src="fancybox/js/jquery.fancybox-1.2.1.js"></script>
<script type="text/javascript" src="fancybox/js/jquery.fancybox-1.2.1.pack.js"></script>

3.Скачайте новую версию плагина http://fancybox.googlecode.com/files...ybox-1.3.4.zip
4.Изучите мануал по плагину http://www.fancybox.net/howto

greymod · #3 (**permalink**) 03.12.2010, 15:57

Сделал все по мануалу - так и не понял, в чем проблема

dmitriymar · #4 (**permalink**) 03.12.2010, 16:12

есть варианты это сделать и без джиквери

greymod · #5 (**permalink**) 03.12.2010, 16:45

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

dmitriymar · #6 (**permalink**) 03.12.2010, 16:54

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

рони · #7 (**permalink**) 03.12.2010, 17:31

greymod,
Попробуйте найти маленькую разницу с тем что у вас и в этом примере )))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<link rel="stylesheet" href="http://rfidcenter.ru/images/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://rfidcenter.ru/fancybox/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://rfidcenter.ru/images/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.lightbox").fancybox({
		'opacity'		: true,
		'overlayShow'	: true,
		'transitionIn'	: 'elastic',
		'titlePosition'	: 'over',
		'overlayColor'		: '#000',
		'overlayOpacity'	: 0.5,
		'padding'			: 1
	});
});
</script>
</head>
<body>
<a  class="lightbox" href="http://rfidcenter.ru/public_images/main_tags.png">
<img alt=""  src="http://rfidcenter.ru/public_images/main_tags.png" /></a>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript