Не стандартное решение на Jquery

Доброго времени суток!
Есть сайт, на главной странице которого выводится портфолио, скрин прилагаю take.ms/E3Rsc. Место для вывода фотографий на главной странице ограничено только 5 фотографиями, заказчик хочет, чтоб эти 5 фотографии выполняли роль типа папок с фотками при нажатии на фото, чтоб открывалось фото в оригинально размере плагином fancybox ну а дальше должна быть возможность пролистать около 20 фотографий для каждой фотографии вот код хтмл для одного фото что на главной

<div class="cbp-item item design">
         		<!-- Item Link -->
         		<a href="project_01.html" class="cbp-caption ex-link">

              	<!-- Item Image -->
                  <div class="cbp-caption-defaultWrap">
                  	<!-- Image Src -->
                      <img src="jpg/13.jpg" alt="Crexis">

                      <!-- Item Note -->
                     <div class="item_icon">
                     	<!-- Icon -->
                     	<p><i class="fa fa-image"></i></p>
                      	<p>Photography</p>
                      </div>
                       <!-- End Item Note -->
                  </div>
                  <!-- End Item Image -->

                  <!-- Item Details -->
                  <div class="cbp-caption-activeWrap">
                  	<!-- Centered Details -->
                      <div class="center-details">
                          <div class="details">
                          	<!-- Item Name -->
                              <h2 class="name ">
                              	Girl In Snow
                              </h2>
                              <!-- Tags -->
                              <p class="tags">
                              	Design
                              </p>
                          </div>
                      </div>
                      <!-- End Center Details Div -->
                  </div>
                  <!-- End Item Details -->
              </a>
              <!-- End Item Link -->
          </div>

во избежании дублирования кода привел разметку одной фотки, у кого какие идеи?

Адиль

04 февраля 2016, 11:48

2 138

Комментарии: 4

Павел Карелин

04 февраля 2016, 16:23

В лайтбоксе который я в основном использую для своих проектов есть опция data-lightbox="" указываешь название набора всем изображениям и скрываешь их с помощью css. И все.

Андрей Сухомозгий

04 февраля 2016, 17:23

У меня на одном сайте было вот так:
Список альбомов, как у вас. У каждого альбома есть превью…
Вот код для одного альбома:

<div class="swiper-slide albums-slide-media swiper-slide-active" style="order: 0; background-image: url("/assets/images/resources/17/227x225/inner-page-pic.jpg");" data-swiper-column="0" data-swiper-row="0">
	<div class="album-grey-inner-box">
		<table>
			<tbody>
				<tr><td><span>Второй альбом для теста</span>
		<img src="/assets/img/album-arrow.png" alt=""></td></tr>
			</tbody>
		</table>
		
	</div>
	<a href="#" class="gallery-album-link" data-albumname="Второй альбом для теста" data-albumid="17" data-action="getAllPics"></a>
</div>

Кликом по ссылке шел запрос на сервер с id альбома. В ответ приходил список ссылок. А дальше чисто на js — подставляем в fancybox и листаем:

$(document).ready(function() {
	// Вешаем обработчик события "клик" на все ссылки с классом ajax_link
	$('a.gallery-album-link').click(function(e) {
	e.preventDefault();
	// Берем действие из атрибута data-action ссылки
	var action = $(this).data('action');
	var albumid = $(this).data('albumid');
	var new_albumname = $(this).data('albumname');
	var link_array  = [];
	var pic_array = [];
	// Ajax запрос к текущей страницы (а на ней наш сниппет) методом post
	$.post(document.location.href, {action: action, id: albumid}, function(data) {
		link_array = data.split(",");
		var trimed_link_array = link_array.pop();
		$.fancybox.open(link_array, {
			afterShow: function(){
				if($('.album-name').length==0){
					$(".fancybox-overlay").prepend('<div class=album-name>'+new_albumname+'</div>');
				}
			},
			beforeClose: function(){
				$('.album-name').remove();
			},
			padding : 0,
			prevEffect: 'fade',
			nextEffect: 'fade',
			maxHeight: 590,
			tpl:{
				wrap     : '<div class="fancybox-wrap fsdgfdsgf" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
				image    : '<img class="fancybox-image" src="{href}" alt="" />',
				error    : '<p class="fancybox-error">The requested content cannot be loaded.
Please try again later.</p>',
				closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
				next     : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
				prev     : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
			},
			margin: [20, 82, 20, 82],
			helpers	: {
				title	: null,
				thumbs	: {
					width	: 125,
					height	: 84
				},
				overlay : {
					css : {
						'background' : 'rgba(43, 55, 67, 0.95)'
					}
				}
			}
		}
		);
	});		
  })
})

Не нужно все картинки альбома сразу выводить на странице и скрывать все кроме первой.
Надеюсь помог…

Адиль

04 февраля 2016, 21:40

Достаточно интересное решение у вас. Но оказывается у fancybox из под коробки есть стандартное решение. Сейчас не у компа завтра скину код реализации.

Адиль

08 февраля 2016, 08:27

Для реализации данного функционала у Fancybox есть решение из под коробки
в моем случае все что мне нужно было это определить следующий обработчик события

$("#fancybox-manual-c").click(function() {
				$.fancybox.open([
					{
						href : '1_b.jpg',
						title : 'My title'
					}, {
						href : '2_b.jpg',
						title : '2nd title'
					}, {
						href : '3_b.jpg'
					}
				], {
					helpers : {
						thumbs : {
							width: 75,
							height: 50
						}
					}
				});
			});

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

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.