класс fancybox - увеличение картинки
Доброго времени суток, уважаемые!
Ребяты, нужна ваша помощь... на своем сайте 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> В итоге у меня по клику отображается просто новая картинка в другом окне и этот скрипт, получается, что не срабатывает. скачивал и устанавливал другие версии плагина - такая же ситуация (( Подскажите, как быть... может есть какие-то альтернативы? Заранее спасибо! |
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 |
Сделал все по мануалу - так и не понял, в чем проблема :(
|
есть варианты это сделать и без джиквери
|
dmitriymar,
подскажите как, если у вас есть опыт... буду очень признателен. |
сделай это через canvas. изображение занимает всю область канвы а её размеры сам задаёш. есть одно но- в интернет эксплорере не поддерживаеться канва-но есть библиотека какая подгружается и он начинает полностью работать с канвой
|
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>
|
| Часовой пояс GMT +3, время: 12:06. |