46 |
47 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum voluptatem, quisquam veniam sequi in quasi excepturi laudantium fugit nihil odio minima quae consequuntur dolorum pariatur obcaecati, adipisci dignissimos officia saepe itaque deleniti porro odit vitae voluptate. Blanditiis sunt obcaecati corporis, alias adipisci. Eum illum voluptatibus expedita nulla eius provident pariatur!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum voluptatem, quisquam veniam sequi in quasi excepturi laudantium fugit nihil odio minima quae consequuntur dolorum pariatur obcaecati, adipisci dignissimos officia saepe itaque deleniti porro odit vitae voluptate.
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | jQuery(document).ready(function($){
2 | var itemInfoWrapper = $('.cd-single-item');
3 |
4 | itemInfoWrapper.each(function(){
5 | var container = $(this),
6 | // create slider pagination
7 | sliderPagination = createSliderPagination(container);
8 |
9 | //update slider navigation visibility
10 | updateNavigation(container, container.find('.cd-slider li').eq(0));
11 |
12 | container.find('.cd-slider').on('click', function(event){
13 | //enlarge slider images
14 | if( !container.hasClass('cd-slider-active') && $(event.target).is('.cd-slider')) {
15 | itemInfoWrapper.removeClass('cd-slider-active');
16 | container.addClass('cd-slider-active').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
17 | $('body,html').animate({'scrollTop':container.offset().top}, 200);
18 | });
19 | }
20 | });
21 |
22 | container.find('.cd-close').on('click', function(){
23 | //shrink slider images
24 | container.removeClass('cd-slider-active');
25 | });
26 |
27 | //update visible slide
28 | container.find('.cd-next').on('click', function(){
29 | nextSlide(container, sliderPagination);
30 | });
31 |
32 | container.find('.cd-prev').on('click', function(){
33 | prevSlide(container, sliderPagination);
34 | });
35 |
36 | container.find('.cd-slider').on('swipeleft', function(){
37 | var wrapper = $(this),
38 | bool = enableSwipe(container);
39 | if(!wrapper.find('.selected').is(':last-child') && bool) {nextSlide(container, sliderPagination);}
40 | });
41 |
42 | container.find('.cd-slider').on('swiperight', function(){
43 | var wrapper = $(this),
44 | bool = enableSwipe(container);
45 | if(!wrapper.find('.selected').is(':first-child') && bool) {prevSlide(container, sliderPagination);}
46 | });
47 |
48 | sliderPagination.on('click', function(){
49 | var selectedDot = $(this);
50 | if(!selectedDot.hasClass('selected')) {
51 | var selectedPosition = selectedDot.index(),
52 | activePosition = container.find('.cd-slider .selected').index();
53 | if( activePosition < selectedPosition) {
54 | nextSlide(container, sliderPagination, selectedPosition);
55 | } else {
56 | prevSlide(container, sliderPagination, selectedPosition);
57 | }
58 | }
59 | });
60 | });
61 |
62 | //keyboard slider navigation
63 | $(document).keyup(function(event){
64 | if(event.which=='37' && $('.cd-slider-active').length > 0 && !$('.cd-slider-active .cd-slider .selected').is(':first-child')) {
65 | prevSlide($('.cd-slider-active'), $('.cd-slider-active').find('.cd-slider-pagination li'));
66 | } else if( event.which=='39' && $('.cd-slider-active').length && !$('.cd-slider-active .cd-slider .selected').is(':last-child')) {
67 | nextSlide($('.cd-slider-active'), $('.cd-slider-active').find('.cd-slider-pagination li'));
68 | } else if(event.which=='27') {
69 | itemInfoWrapper.removeClass('cd-slider-active');
70 | }
71 | });
72 |
73 | function createSliderPagination($container){
74 | var wrapper = $('').insertAfter($container.find('.cd-slider-navigation'));
75 | $container.find('.cd-slider li').each(function(index){
76 | var dotWrapper = (index == 0) ? $('
