Mixitup and jPages

Developer
Tingyu
Size
2,840 Kb
Views
151,800
  1. Mixitup and jPages Previews
  2. Mixitup and jPages HTML Codes
  3. Mixitup and jPages CSS Codes
  4. Mixitup and jPages JS Codes

How do I make an mixitup and jpages?

Add pagination when using Mixitup. What is a mixitup and jpages? How do you make a mixitup and jpages? This script and codes were developed by Tingyu on 07 September 2022, Wednesday.

Mixitup and jPages Previews
IQ Test

Mixitup and jPages - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mixitup and jPages</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="categories" class="categories"> <button class="filter" data-filter="all">All</button> <button class="filter blue" data-filter=".blue-color">Blue</button> <button class="filter green" data-filter=".green-color">Green</button> <button class="filter yellow" data-filter=".yellow-color">Yellow</button>
</div>
<div style="clear: both"></div>
<div class="wrapper" id="Container"> <div class="mix blue-color">A</div> <div class="mix green-color">B</div> <div class="mix yellow-color">C</div> <div class="mix yellow-color">D</div> <div class="mix blue-color">E</div> <div class="mix yellow-color">F</div> <div class="mix green-color">G</div> <div class="mix yellow-color">H</div> <div class="mix blue-color">I</div> <div class="mix yellow-color">J</div> <div class="mix green-color">K</div> <div class="mix yellow-color">L</div> <div class="mix yellow-color">M</div> <div class="mix blue-color">N</div> <div class="mix green-color">O</div> <div class="mix yellow-color">P</div> <div class="mix yellow-color">Q</div> <div class="mix green-color">R</div> <div class="mix blue-color">S</div> <div class="mix yellow-color">T</div> <div class="mix green-color">U</div> <div class="mix green-color">V</div> <div class="mix yellow-color">W</div> <div class="mix blue-color">X</div> <div class="mix yellow-color">Y</div> <div class="mix yellow-color">Z</div> <div class="mix green-color">A</div> <div class="mix yellow-color">B</div> <div class="mix blue-color">C</div> <div class="mix green-color">D</div> <div class="mix green-color">E</div> <div class="mix blue-color">F</div>
</div>
<div style="clear:both"></div>
<div id="pagination" class="pagination"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.shopify.com/s/files/1/0771/2161/t/3/assets/jPages.min.js?10688064064350896456'></script>
<script src='https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mixitup and jPages - Script Codes CSS Codes

.wrapper, .categories { width: 900px; margin: 0 auto;
}
.categories button { width: 100px; height: 30px; float: left; margin-left: 15px; text-align: center;
}
.wrapper > div { width: 200px; height: 100px; background: #f2f2f2; float: left; margin: 15px; text-align: center;
}
.wrapper .blue-color { background: blue; color: #fff;
}
.wrapper .green-color { background: green;
}
.wrapper .yellow-color { background: yellow;
}
.pagination { width: 900px; margin: 0 auto;
}
.pagination a { float: left; list-style: none; margin-left: 15px; color: black; text-decoration: none; cursor: pointer;
}
.mix { display: none;
}
a.jp-current { color: red;
}

Mixitup and jPages - Script Codes JS Codes

var pagination = $('.pagination');
function setPagination(){ pagination.jPages({ containerID: 'Container', perPage: 6, startPage: 1, startRange: 1, midRange: 3, endRange: 1, first: false, last: false });
}
function destroyPagination() { pagination.jPages('destroy');
};
setPagination();
$('#Container').mixItUp({ callbacks: { onMixLoad: function(state,futureState ){ console.log('mix Loaded'); //setPagination(); }, onMixStart: function(state,futureState ){ destroyPagination(); },	onMixEnd: function(state, futureState){	console.log('mix End'); setPagination();	}	}
});
Mixitup and jPages - Script Codes
Mixitup and jPages - Script Codes
Home Page Home
Developer Tingyu
Username TingChe
Uploaded September 07, 2022
Rating 3
Size 2,840 Kb
Views 151,800
Do you need developer help for Mixitup and jPages?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tingyu (TingChe) Script Codes
Name
Animation - moving from bottom
Implement Flip effect with css3
Translate Overlay hover effect
Play around velocity js
Responsive mansory layout
Play with Raphael.js
A Pen by Tingyu
Chart with Chart.js
Customize radio buttons width CSS3
Using MixItUp plugin
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!