как в galleriffic внедрить fancybox
Здравствуйте.
На сайте используется галерея galleriffic. Все как обычно: маленькие иконки и большая картинка. Выбираешь определенную иконку и она отображается, как большая картинка. Только мне нужно, чтобы при нажатии на большую картинку она открывалась в модальном окне(срабатывал fancybox). Я прописала адрес ссылки к большой картинке, но эта картинка открывается в новом окне. А мне нужно, чтобы срабатывал fancybox. Я так понимаю, что между двумя плагинами возникает конфликт. Если у кого-то есть опыт работы с подобными задачами или есть идеи, как разрешить данный вопрос прошу помочь. Спасибо за помощь. |
lara_,
Типично пытаются подключать к каждому плагину свою библиотеку jQuery По идее нужно оставлять лишь одну из них, на месте подключения самой первой библиотеки |
Deff, не совсем Вас поняла.
Я подключила библиотеки jquery-1.7.2.min.js, gallerific.js, jquery.fancybox-1.3.4.pack.js. Я новичок в подобных вопросах, поэтому не могли бы Вы понятнее мне объяснить. Спасибо. |
Цитата:
|
http://www.polinadobryakova.com/gall...lied-arts.html
При щелчке на большой картинке она должна открываться в модальном окне(сейчас картинка открывается в новом окошке). |
lara_,
1. А где инициализация fancybox ? 2. Пропишите ссылки на большую(помимо тега a) в атрибуте data="Тут ссылка" в мелкой картинке, ибо галлерея вынимает картинку из тега и кладет её в правый слайдер. Перед инициализацией fancybox нужно выпарсить URL из data и переобуть картинку заново |
1. инициализация fancybox:
$("a[rel=galI]").fancybox({ 'transitionIn': 'none', 'transitionOut': 'none', 'titlePosition' : 'over', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">' + title + '</span>';} }); //внизу страницы 2.Прописала ссылки (не уверена, что правильно поняла). |
Цитата:
gallery/resizer.php?imgfile=painting-ru%2Fb2.jpg&max_width=472&max_height=543 |
gallery/resizer.php?imgfile=painting-ru%2Fb2.jpg&max_width=472&max_height=543
-Это ссылка на масштабированную картинку. Мне нужно, чтобы при нажатии открывалась картинка с реальными размерами. Или они должны быть одинаковы? |
Цитата:
|
Вот такая суммарная замена инициализации
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
$("#thumbs ul.thumbs a.thumb img").mousedown(function(){
objNN='';
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 8,
preloadAhead: 16,
enableTopPager: false,
enableBottomPager: true,
maxPagesToShow: 5,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: false,
renderNavControls: true,
nextPageLinkText: '',
prevPageLinkText: '',
enableHistory: true,
autoStart: false,
syncTransitions: false,
defaultTransitionDuration: 900
});
//Устанавливаем fancybox на текущую картинку в слайдере
var objNN='';
$("#slideshow a.advance-link img").live('mouseover',function(){
if(objNN!==$(this)[0]){ objNN=$(this)[0];
$(this).parent().fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">' + title + '</span>';}
});
}
});
});
</script>
|
Спасибо большое, что потратили свое время и помогли мне.
Сейчас у меня при нажатии на иконку происходит смена большой картинки(увеличивается иконка), а также срабатывает fancybox. Спасибо большое, т.к. у меня вообще ничего не получилось. Можно еще спросить: дело в том, что я, наверное, не совсем правильно объяснила, что мне нужно. При щелчке мыши на большой картинке (она расположена справа) должен срабатывать fancybox(модальное окно с отбражением большой картинки). |
Цитата:
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 8,
preloadAhead: 16,
enableTopPager: false,
enableBottomPager: true,
maxPagesToShow: 5,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: false,
renderNavControls: true,
nextPageLinkText: '',
prevPageLinkText: '',
enableHistory: true,
autoStart: false,
syncTransitions: false,
defaultTransitionDuration: 900
});
//Устанавливаем fancybox на текущую картинку в слайдере
var objNN='';
$("#slideshow a.advance-link img").live('mouseover',function(){
if(objNN!==$(this)[0]){ objNN=$(this)[0];
$(this).parent().fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">' + title + '</span>';}
});
}
});
});
</script>
|
Спасибо Вам большое.
Как здорово!!! Все работает!! Я так рада. Спасибо Вам. Вы мне очень помогли. Спасибо. |
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
$("#thumbs ul.thumbs a.thumb img").mousedown(function(){
objNN='';
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 8,
preloadAhead: 16,
enableTopPager: false,
enableBottomPager: true,
maxPagesToShow: 5,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: false,
renderNavControls: true,
nextPageLinkText: '',
prevPageLinkText: '',
enableHistory: true,
autoStart: false,
syncTransitions: false,
defaultTransitionDuration: 900
});
//Устанавливаем fancybox на текущую картинку в слайдере
var objNN='';
$("#slideshow a.advance-link img").live('mouseover',function(){
if(objNN!==$(this)[0]){ objNN=$(this)[0];
$(this).parent().fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">' + title + '</span>';}
});
}
});
});
</script>
Поправил |
| Часовой пояс GMT +3, время: 23:39. |