Помогите вставить fancybox
Добрый вечер,
Не знаю как соединить fancybox и jsCarousel-2.0.0.js. В создании сайта новичок. Проблема в том, что я хочу при нажатии на картинку из карусели открывалось модальное окно fancybox и можно было просматривать галерею в большем окне. За ранее огромное спасибо. Код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>мой первый сайт</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="css/templatemo_style.css" rel="stylesheet" type="text/css" /> <link href="css/menuCSS.css" rel="stylesheet" type="text/css" /> <link rel="icon" href="favicon.ico" /> <script> !window.jQuery && document.write('<script src="jquery-1.4.4.min.js"><\/script>'); </script> <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="js/jsCarousel-2.0.0.js" type="text/javascript"></script> <link href="css/jsCarousel-2.0.0t.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script> <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.2.js"></script> <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.2.css" media="screen" /> <link rel="stylesheet" href="style.css" /> <script type="text/javascript"> $(document).ready(function() { $('#carouselhAuto').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 1, orientation: 'h' }); }); </script> </script> <script type="text/javascript"> $(document).ready(function() { /* * Examples - images */ $("a[rel=example_group]").fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none', 'titlePosition' : 'over', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; } }); }); </script> </head> <div id="carouselhAuto"> <div> <img alt="" src="img_center/Large/dish4.jpg" style="height:460px"/><br /> Хотелось бы, чтобы при нажатии на картинку, запускался модально fancybox и был просмотр галереии <span class="thumbnail-text" >Текст</span></div> <div> <img alt="" src="img_center/Large/dish3.jpg" style="height:460px"/><br /> <span class="thumbnail-text" >Текст</span></div> </div> </div> --></body> </html> |
Dmitry_1974,
не грузите jquery дважды и используйте последние версии плагинов . |
Спасибо что указали на ошибки. А проблему как решить не подскажете?
|
Цитата:
|
Цитата:
Цитата:
но это только для картинки на которую нажали |
В примере по fancybox пишется так:
<div id="content"> <p> <a rel="example_group" href="./example/1_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/1_s.jpg" /></a> <a rel="example_group" href="./example/2_b.jpg" title=""><img alt="" src="./example/2_s.jpg" /></a> <a rel="example_group" href="./example/3_b.jpg" title=""><img alt="" src="./example/3_s.jpg" /></a> <a rel="example_group" href="./example/4_b.jpg" title=""><img class="last" alt="" src="./example/4_s.jpg" /></a> </p> </div> А что с ним делать не понятно. По отдельности понятно, а как чтобы из карусели загружался не понятно |
Сейчас попробую. Спасибо
|
Спасибо Профессора!!!
Окно затемнилась и появился путь картинки. Чего дальше делать не понятно. Но буду сам пытаться, чтобы Вас не отвлекать. Если же у Вас будет время помогите дальше пройти. Надо то осталось чтобы fnacybox галерея запустилась. Еще раз Спасибо |
Dmitry_1974,
http://learn.javascript.ru/play/tNmmAb кликать по вертикальному слайдеру -- строка 32 Цитата:
|
Я туда же Ваш код вставил и стала появляться путь к файлу. Я и раньше это понимал и вставлял функции для теста. Я не понимал как вставить туда вызов fancebox. Между прочим в Вашем примере по ссылке он не работает.
У меня дальше возникает проблема как связать вызов с данными, чтобы fancybox понял что я хочу просматривать. Ведь моя цель, чтобы при нажатии открывался fancybox и показывал галерею из карусель в большом модальном окне, при чем показ начинался с img по которой кликнули. Буду пытаться. Если не получится, то буду Вас доставать. Вы уж извините. |
Цитата:
показан вызов картинки по которой кликнули - в этоже место можно добавить и показ остальных картинок. получится так  дерзайте :write: |
Да Вы правы работает.
Но вопросы только прибавляются. Пришлось прочитать учебник. Не помогло. Так как мои знания упираются в прошлое (C++, Assembler) а сейчас только VBA. То очень не просто разобраться к доступам к параметрам объектов. |
Dmitry_1974,
http://fancyapps.com/fancybox/ посмотрите документацию --вместо 1 src как вариант создать массив с необходимыми src -- и указать в этом массиве индекс соотвествующий нажатой картинке. 3 строки вместо 1. Available options Цитата:
Цитата:
|
Спасибо Вам большое.
Помните я писал, что Ваш пример не работает. Так он не работает на настольном моем компьютере, а наоуте работает. Вообще я не понимаю этот язык. Вызов функций для не логичен. Вот например: Из карусели Вы показали мне пример вызова: $.fancybox(src) и это работает. Я пытаюсь перенести $.fancybox(src) в другую функцию и это не работает. Почему не работает, что изменилось не понятно. Первый язык программирования с которым у меня не лады. Ведь я правильно понимаю, что $.fancybox(src) читается как вызов метода fancybox функции $ с параметром src. И вообще не понял зачем из обычного ООП сделали такой город. |
Цитата:
Цитата:
|
Спасибо.
Все забулькало. Буду теперь мучать опять. Правда теперь поставил версию 2.0 fancy. По поводу версий системы - это самое большое удивление. И на настольном и на ноуте стоит одно и тоже лицензионное W8.1. + Chrome. Еще раз огромное спасибо. P.S. Далеко не убегайте. Думаю проблемки появятся. |
Профессор, Рони.
Подскажи как сделать. Я точно хрен справлюсь с эти fancy. Вопроса два: 1. Я хочу ему передать параметры (вот код): $.fancybox(arrImg, { helpers: { title: { type:'inside' } } } ); так работает. Но если я сделаю так: $.fancybox(arrImg,{index:4}, и так же далее. То он запускает с 4-го слайда, но title уже не воспринимает и изменяет. Что я опять не догоняю. 2. Самый сложный вопрос. В fancy раскрываются фотки. При этом они очень большие и я в дальнейшем их уменьшу, но. Они разных размеров. А я пытаюсь сделать так: (Тема:ПАПАПА - по середине) все на одной строке (Стр. 2/31 - прижата справа). Я пытался вычислять размер картинки и это дает свои результаты, если только размер не больше максиума ширины иначе тухло. Я конечно могу привязаться к макисуму и исходит от него если габариты картинки выходят за рамки, но я не знаю как залезть в css из js. А просто константу делать не красиво. Извини, много букв. Спасибо |
Цитата:
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Забыл добавить. Документация в fancy сделана или ребенком или для телепатов. Всю перечитал пару тройку раз на всех языках.
|
Dmitry_1974,
$.fancybox(arrImg, {
index: 4,
helpers: {
title: {
type: 'inside'
}
}
});
|
Решено. Класс
|
Что то много получилось
|
Dmitry_1974,
по параметрам ширины смотрите документацию для телепатов - там на любой вариант есть .
$.fancybox(arrImg, {
maxWidth: 800,
index: 4,
helpers: {
title: {
type: 'inside'
}
}
});
|
Спасибо.
|
Это заработало.
|
Цитата:
|
Первый вопрос Вы решили за меня быстрее чем я посчитал скобки.:):)
|
Добрый вечер, Профессор.
У меня все получилось с фенси (дрянь а не вещь) благодаря Вам. Спасибо огромное. Если у Вас будет время просветите меня в одном вопросе. Вопрос: У меня страница сайта запускается с hash в качестве параметра. Сразу в body стойт на onload функция js. Все работает при запуске. Но проблема в том, что есть ещё функции на страничке на js которые что-то делают. Я целый день убил и не могу понять как сделать так чтобы при запуске js кликая на картинку не запускался js который на onload в body и который убивает всю идею. Код надо? Заранее СПасибо |
Цитата:
|
<script>
function show2(iAdd) { window.location.hash=iAdd; show1(); } function show1() { var iHash=window.location.hash; if (iHash.indexOf('picAll',0)!=-1) { } else if (iHash.indexOf('pic1',0)!=-1) { document.getElementById('hpic2').style.display = "none"; document.getElementById('hpic3').style.display = "none"; } else if (iHash.indexOf('pic2',0)!=-1) { document.getElementById('hpic1').style.display = "none"; document.getElementById('hpic3').style.display = "none"; } else if (iHash.indexOf('pic3',0)!=-1) { document.getElementById('hpic1').style.display = "none"; document.getElementById('hpic2').style.display = "none"; } else { alert('Can not find pic'); } document.getElementById('myBody').style.display = "block"; }; </script> </head> <body id="myBody" onload="show1()" style="display:none"> <div id="hpic1"><a href="" onclick="show2('pic1')"><div ><img src="../img_left/Small/pic1.png"></a> </div> <div id="hpic2"><a href="" onclick="show2('pic2')"><div ><img src="../img_left/Small/pic2.png"></a> </div> <div id="hpic3"><a href="" onclick="show2('pic3')"><div ><img src="../img_left/Small/pic3.png"></a> </div> </body> запуск сайта : index.html#picAll или index.html#pic2 как то так |
Dmitry_1974,
попробуйте так onclick="show2('pic1'),return false" |
| Часовой пояс GMT +3, время: 15:59. |