Sep 5 2013 at 18:24

Как из fancybox сделать функциональную галерею

Invite pending

FancyBox — Вполне удобный jquery плагин для реализации на сайте фото галерей и модальных окон, среди множества аналогичных скриптов мой выбор пал на неё. Но как обычно и происходит, разработчики пишут в основном для своих потребностей и широкому кругу лиц может подойти не на 100%.

В плане реализации, в изначальном виде меня всё устраивало, за исключением одного но. имеется проблема с социальным постингом.
Допустим хочу я открыть фотку, и разместить её у себя на с странице вконтакте, или отправить в твиттер, то стандартный функционал мне это не позволит ~~документированный вариант не подходит вовсе~~.

Как должно работать:
1. При открытии изображения, строка адреса должна дополнятся хешем с индексом картинки mysite.com/#1
2. Кликаем социальную кнопку, допустим это «Вконтакте» отправляем на страницу заголовок, описание и саму фотку.
3. Закрываем картинку, хеш отчищается.
4. Переходим по ссылке которую только что разместили у себя в ВК, переходим на сайт родитель и видим открывшуюся фотографию.

В связи с моими ~~отсутствующими~~ малыми познаниями javascript в целом, я приготовил ~~бубен и ритуальный костер~~ чашку кофе и полез в интернеты за хоть какой нибудь информацией.

Итак, что мне понадобилось:

FancyBox 2.1.5
Скрипт расшаривания материалов. Далее share.js
Иконки в *.png формате
Строка поиска в браузере

Методом проб и ошибок начал ~~лечить испытуемого~~ читать документацию плагина.
Для начала разобрался с кодом вызова.

var thisHash = window.location.hash;
$(document).ready(function() {
if(window.location.hash) { 		                //Проверяем есть ли # в адресе и открываем фото если true.
$(thisHash).fancybox({
})
.trigger('click');
}		
$('.fancybox').attr('rel', 'gallery').fancybox({                        //Инициализируем плагин
prevEffect : 'fade',
nextEffect : 'fade',
closeBtn  : true,
arrows    : true,
nextClick : true,
beforeClose: function() { 	                               //При закрытии картинки чистим хеш
window.location.hash = '';
},
afterLoad: function() {		                               //Подгружаем дополнительный контент в fancybox, в нашем случае социальные кнопки.
var el, id = $(this.element).data('title-id');
window.lnkimg = this.href;                       // Заранее создадим глобальную переменную, которая хранит ссылку на само изображение.
if(id){
el = $('#'+id);
if(el.length){
this.title = el.html();
}
}
window.location.hash = this.index;         //Добавляем в адрес # с индексом изображения.
},
	
});
});

Тут кажется всё ясно и понятно. Второе что нам нужно сделать, настроить скрипт обработчик социального постинга.

$(document).ready(function() {
e = document.getElementsByTagName('div');
for (var k = 0; k < e.length; k++) {
if (e[k].className.indexOf('shareblock') != -1) {
if (e[k].getAttribute('data-url') != -1) u = e[k].getAttribute('data-url');
if (e[k].getAttribute('data-title') != -1) t = e[k].getAttribute('data-title');
if (e[k].getAttribute('data-image') != -1) i = e[k].getAttribute('data-image');
if (e[k].getAttribute('data-description') != -1) d = e[k].getAttribute('data-description');
if (e[k].getAttribute('data-path') != -1) f = e[k].getAttribute('data-path');
if (!f) {
function path(name) {
var sc = document.getElementsByTagName('script'),
sr = new RegExp('^(.*/|)(' + name + ')([#?]|$)');
for (var i = 0, scL = sc.length; i < scL; i++) {
var m = String(sc[i].src).match(sr);
if (m) {
if (m[1].match(/^((https?|file)\:\/{2,}|\w:[\/\\])/)) return m[1];
if (m[1].indexOf("/") == 0) return m[1];
b = document.getElementsByTagName('base');
if (b[0] && b[0].href) return b[0].href + m[1];
else return document.location.pathname.match(/(.*[\/\\])/)[0] + m[1];
}
}
return null;
}
f = path('share.js');
}
if (!u) u = location.href;
if (!t) t = document.title;

function desc() {
var meta = document.getElementsByTagName('meta');
for (var m = 0; m < meta.length; m++) {
if (meta[m].name.toLowerCase() == 'description') {
return meta[m].content;
}
}
return '';
}
if (!d) d = desc();
u = encodeURIComponent(u);
t = encodeURIComponent(t);
t = t.replace('\'', '%27');
i = encodeURIComponent(i);
d = encodeURIComponent(d);
d = d.replace('\'', '%27');
var s = new Array(		//Твиттер
'"#" data-count="twi" onclick="window.open(\'https://twitter.com/intent/tweet?text=' + t + '&url=' + u + '\', \'_blank\', \'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0\');return false" title="Добавить в Twitter"'
);
			
var so = new Array (	//Вконтакте, не забыть добавить <i>linkimg</i>.
'"#" data-count="vk" onclick="window.open(\'http://vk.com/share.php?url=' + u + '&title=' + t + '&image='+lnkimg+ '&description=' + d + '\', \'_blank\', \'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0\');return false" title="Поделиться В Контакте"'
);
			
var l = '';	 //Твиттерим
for (j = 0; j < s.length; j++) l += 
'<div class="twbtns"><a rel="nofollow" href=' + s[0] + ' target="_blank"></a></div>';
			
var lo = ''; //Вконтактерим
for (jo = 0; jo < so.length; jo++) lo +=
'<div class="vkbtns"><a rel="nofollow"  href=' + so[0] + ' target="_blank"></a></div>';
						
e[k].innerHTML = '<div id="share">' + l + lo +'</span>'; //Показываем в fancybox
}
};
});

Добавляем на страницу код самого изображения

<a id="0" onclick="shareLoad();" class="fancybox" href="http://m33.ru/bitrix/templates/M33/images/gallery/bowling/1.jpg" data-title-id="title-1" data-fancybox-group="gallery" title="">
      <img src="http://m33.ru/bitrix/templates/M33/images/gallery/bowling/1m.jpg" alt="" />
</a>
<div id="title-1" class="hidden">
      <div class="shareblock"></div>
</div>

Остановлюсь на этом моменте подробнее.
В первой части <a id=«0» — устанавливаем индекс изображения, который будет отправляться в адрес, и по которому будет происходить поиск картинки в дальнейшем.

Далее onclick=«shareLoad();» — необходим для перехвата активной ссылки браузера посредством share.js, проще говоря, при открытии фотографии мы загружаем тот самый скрипт.
Для этого необходимо в теле страницы дописать:

function shareLoad() {
	$.getScript('share.js');	
}

Ну и соответственно в самом коде fancybox к кнопкам Вперед и Назад прикрутить тотже onClick.

next     : '<a title="Далее" onclick="shareLoad();" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
				prev     : '<a title="Назад" onclick="shareLoad();" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'

Третья часть data-title-id=«title-1» отвечает за подключение дополнительного элемента к галерее, в нашем случае это социальные кнопки, которые хранятся в

<div id="title-1" class="hidden">
      <div class="shareblock"></div>
</div>
Главное не забыть классу <i>hidden</i> присвоить <i>display:none</i>

На этом всё, настройка закончена.
Готовый вариант можно посмотреть тут — mryayoo.ru
Или скачать тут — mryayoo.ru/fancybox.rar

Tags:

Hubs: