Tsamada

Ну что, начнемс. По запросу PikaChoose (не путать с Pok?mon-ом) в google.com или yandex.ru, вы, мои дорогие (я меня паранойя, что блог читают еще люди окромя меня), так вот, по этому запросу вы найдете много всякого полезного. И то, что это плагин для слайд-шоу с массой возможностей, и то что он интегрируется с Fancybox, и то что можно прикрутить jCarousel и ваще — сказка, а не плагин для обыкновенных задач.

Все это хорошо, но вот я добавлю все таки отсебятины, ну не совсем отсебятины, но все же.

Итак, необходимые опции для работы с PikaChoose jQuery Image Gallery Pok?mon, а также как прикрутить jCarousel можно найти в разделе Documentation, как интегрировать Fancybox найдем там же в разделе Fancybox Integration.

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

В шапке подключаем:

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
   <script type="text/javascript" src="/lib/jquery.jcarousel.min.js"></script>
   <script type="text/javascript" src="/lib/jquery.pikachoose.js"></script>
   <script type="text/javascript" src="/lib/jquery.fancybox.js"></script> 
   <link type="text/css" href="/css/jquery.pikachoose.css" rel="stylesheet" />
   <link type="text/css" href="/css/jquery.fancybox.css" rel="stylesheet" /> 
   
   <script language="javascript">
		$(document).ready(function (){
		   var a = function(self){
			  self.anchor.fancybox();
		   };
		   $("#pikame").PikaChoose({buildFinished:a, autoPlay:false, showCaption:false, carousel:true});
		});
   </script>

В месте где выводится галерея:

<ul id="pikame">
  <li><a href="/images/myimage1_l.jpg"><img src="/images/myimage1_m.jpg"></a></li>
  <li><a href="/images/myimage2_l.jpg"><img src="/images/myimage2_m.jpg"></a></li>
</ul>

В принципе можно пользоваться, а теперь внимание! Переходим к названию нашей статейки 🙂

Все естественно будет работать кроме навигации (стрелки "вперед" и "назад") в окне Fancybox. Сиё есть неудобняк. Я не хочу открывать и закрывать картину для того что-бы посмотреть другую, я хочу стрелки! А еще я хочу превью отдельно, обычный рисунок отдельно и во всплывающем который отдельно тоже!

Хотим — получаем.

Реализуем наши хотелки

Скриптец преобразуется в вот это чудо:

<script language="javascript">
	$(document).ready(function (){
	   var a = function(self){
		  // self.anchor.fancybox();
			var fancy = function(){
					var play=self.options.autoPlay;
					$('body').find('a.previmages,a.nextimages').remove();
					self.active.parents('li:first').prevAll().each(function(){
							var href=$(this).find('img').data('clickThrough');
							$('body').prepend($('<a>').attr({'href':href,'class':'previmages', 'rel':'gallery'}).css('display','none'));
					});
					self.active.parents('li:first').nextAll().each(function(){
							var href=$(this).find('img').data('clickThrough');
							$('body').append($('<a>').attr({'href':href,'class':'nextimages', 'rel':'gallery'}).css('display','none'));
					});
					self.anchor.attr('rel','gallery');
					$('a[rel=gallery]').fancybox({
							onStart:function(){if(play){self.imgPlay.trigger('click');}}
					});
			}
			self.anchor.bind('click',fancy);
			fancy();
	   };
	   $("#pikame").PikaChoose({buildFinished:a, autoPlay:false, showCaption:false, carousel:true});
	});
</script>

Ну а вывод будет таким:

<ul id="pikame">
  <li><a href="/images/full/myimage1_l.jpg"><img src="/images/thumbs/myimage1_s.jpg" ref="/images/prv/myimage1_m.jpg"></a></li>
  <li><a href="/images/full/myimage2_l.jpg"><img src="/images/thumbs/myimage2_s.jpg" ref="/images/prv/myimage1_m.jpg"></a></li>
</ul>

full — тут то изображение которое во всплывающем окне (большая картиночка)
prv — тут изображение среднее, на которое нам нуна кликнуть
thumbs — ну и навигационные тумбы

Как этим всем пользоваться, надеюсь, понятно.

Шпасибо за внимание и Добра!