Small thumbnails on home
This commit is contained in:
3
js/lib/modernizr-custom.js
Normal file
3
js/lib/modernizr-custom.js
Normal file
File diff suppressed because one or more lines are too long
@@ -1,33 +1,34 @@
|
||||
jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error
|
||||
$('.misha_loadmore').click(function(){
|
||||
|
||||
var button = $(this),
|
||||
data = {
|
||||
'action': 'loadmore',
|
||||
'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
|
||||
'page' : misha_loadmore_params.current_page
|
||||
};
|
||||
button.trigger("moreload-start")
|
||||
jQuery(function ($) { // use jQuery code inside this to avoid "$ is not defined" error
|
||||
$('.misha_loadmore').click(function () {
|
||||
|
||||
var button = $(this),
|
||||
data = {
|
||||
'action': 'loadmore',
|
||||
'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
|
||||
'page': misha_loadmore_params.current_page
|
||||
};
|
||||
button.trigger("moreload-start")
|
||||
console.log(misha_loadmore_params)
|
||||
|
||||
|
||||
|
||||
$.ajax({ // you can also use $.post here
|
||||
url : misha_loadmore_params.ajaxurl, // AJAX handler
|
||||
data : data,
|
||||
type : 'POST',
|
||||
beforeSend : function ( xhr ) {
|
||||
|
||||
url: misha_loadmore_params.ajaxurl, // AJAX handler
|
||||
data: data,
|
||||
type: 'POST',
|
||||
beforeSend: function (xhr) {
|
||||
|
||||
button.html('<p>Betöltés...</p>'); // change the button text, you can also add a preloader image
|
||||
},
|
||||
success : function( data ){
|
||||
if( data ) {
|
||||
|
||||
button.html( '<a>Tovább</a>' ).before(data); // insert new posts
|
||||
misha_loadmore_params.current_page++;
|
||||
button.trigger("moreload-finish")
|
||||
|
||||
if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page )
|
||||
success: function (data) {
|
||||
if (data) {
|
||||
|
||||
button.html('<a>Tovább</a>').before(data); // insert new posts
|
||||
misha_loadmore_params.current_page++;
|
||||
button.trigger("moreload-finish")
|
||||
|
||||
if (misha_loadmore_params.current_page -1 == misha_loadmore_params.max_page)
|
||||
button.remove(); // if last page, remove the button
|
||||
|
||||
|
||||
// you can also fire the "post-load" event here if you use a plugin that requires it
|
||||
// $( document.body ).trigger( 'post-load' );
|
||||
} else {
|
||||
|
||||
115
js/scripts.js
115
js/scripts.js
@@ -143,29 +143,74 @@
|
||||
|
||||
/* ----------------------------------- css ---------------------------------- */
|
||||
|
||||
var articleWrapCounter = 0
|
||||
|
||||
if (isHome & !isMobile) {
|
||||
$('html').css({ overflowY: "hidden" })
|
||||
|
||||
//wrapping for big-small difference
|
||||
$('article:first-child').wrap('<div class="home-wrapper-big home-wrapper-1"></div>')
|
||||
$('article:nth-child(2)').wrap('<div class="home-wrapper-big home-wrapper-2"></div>')
|
||||
$('article:first-child').wrap('<div class="home-wrapper-big home-wrapper-1"></div>').addClass("home-big")
|
||||
$('article:nth-child(2)').wrap('<div class="home-wrapper-big home-wrapper-2"></div>').addClass("home-big")
|
||||
var wrapArticles = $("article").length - 2
|
||||
var n = 0
|
||||
var articleWrapCounter = 0
|
||||
for (let i = 0; i < wrapArticles; i++) {
|
||||
var j = i + 3
|
||||
if (i % 6 == 0) {
|
||||
n++
|
||||
articleWrapCounter++
|
||||
}
|
||||
$('article:nth-child(' + j + ')').addClass("home-thumbnail-small-" + n)
|
||||
$('article:nth-child(' + j + ')').addClass("home-small home-thumbnail-small-" + articleWrapCounter)
|
||||
}
|
||||
for (let i = 0; i < n; i++) {
|
||||
for (let i = 0; i < articleWrapCounter; i++) {
|
||||
var j = i + 3
|
||||
var k = i+1
|
||||
var k = i + 1
|
||||
$(".home-thumbnail-small-" + k).wrapAll('<div class="home-wrapper-small home-wrapper-' + j + '"></div>')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//returns three random numebers 0-5
|
||||
function randomNumbers() {
|
||||
// All numbers are equal
|
||||
var numberOne = 3;
|
||||
var numberTwo = 3;
|
||||
var numberThree = 3;
|
||||
|
||||
// run this loop until numberOne is different than numberThree
|
||||
do {
|
||||
numberOne = Math.floor(Math.random() * 5);
|
||||
} while (numberOne === numberThree);
|
||||
|
||||
// run this loop until numberTwo is different than numberThree and numberOne
|
||||
do {
|
||||
numberTwo = Math.floor(Math.random() * 5);
|
||||
} while (numberTwo === numberThree || numberTwo === numberOne);
|
||||
|
||||
var i = [numberOne, numberTwo, numberThree]
|
||||
return i
|
||||
}
|
||||
|
||||
//jquery function, adds random class to 3 random cihldren
|
||||
(function ($) {
|
||||
$.fn.addRandomClasses = function () {
|
||||
let rn = randomNumbers()
|
||||
for (let i = 0; i < 3; i++) {
|
||||
var j = rn[i] + 1
|
||||
this.children("article:nth-child(" + j + ")").addClass("random")
|
||||
}
|
||||
return this
|
||||
};
|
||||
})(jQuery);
|
||||
|
||||
|
||||
$(".home-wrapper-small").each(function () {
|
||||
// var rn = randomNumbers()
|
||||
// for (let i = 0; i < rn.length; i++) {
|
||||
// var j = rn[i] +1
|
||||
// $(this).children("article:nth-child(" + j + ")").addClass("random")
|
||||
// }
|
||||
// addRandomClass($(this))
|
||||
$(this).addRandomClasses()
|
||||
})
|
||||
|
||||
/* ----------------------------- Snap on mobile ----------------------------- */
|
||||
|
||||
@@ -199,7 +244,7 @@
|
||||
|
||||
// var offset = ($(nextelem).offset().left) - desktophomemargin
|
||||
var offset = ($(nextelem).position().left)
|
||||
console.log("scrolling to: " + nextelem.attr("id") + " - offset: " + offset)
|
||||
console.log("scrolling to: " + nextelem.attr("class") + " - offset: " + offset)
|
||||
$('html, body').stop().animate({ scrollLeft: offset }, 800);
|
||||
return nextelem;
|
||||
}
|
||||
@@ -231,8 +276,8 @@
|
||||
var articleWidth = $(selector + ':first-child')[0].getBoundingClientRect().width
|
||||
var currscroll = $('html').scrollLeft()
|
||||
var scrollnr = Math.floor(currscroll / articleWidth) + 1
|
||||
currElem = $( selector + ':nth-child(' + scrollnr + ')')
|
||||
// console.log(currElem.attr("id"))
|
||||
currElem = $(selector + ':nth-child(' + scrollnr + ')')
|
||||
console.log("start location: " + currElem.attr("class"))
|
||||
}
|
||||
|
||||
var scrolltimer = false;
|
||||
@@ -270,13 +315,63 @@
|
||||
|
||||
$('.misha_loadmore').on("moreload-start", function () {
|
||||
currElem = $(this).prev()
|
||||
console.log("currelem: " + currElem.attr("class"))
|
||||
|
||||
})
|
||||
|
||||
$('.misha_loadmore').on("moreload-finish", function () {
|
||||
|
||||
//wrap new elements on load
|
||||
articleWrapCounter++
|
||||
var wrapnum = articleWrapCounter + 2
|
||||
$("#content>article")
|
||||
.addClass("home-small home-thumbnail-small-" + articleWrapCounter)
|
||||
.wrapAll('<div class="home-wrapper-small home-wrapper-' + wrapnum + '"></div>')
|
||||
$(".home-wrapper-" + wrapnum).addRandomClasses()
|
||||
|
||||
//Scroll to new element
|
||||
currElem = homeScroll(currElem, "next")
|
||||
})
|
||||
|
||||
/* ------------------------------ hover on home ----------------------------- */
|
||||
|
||||
function showTitle(th) {
|
||||
$(th).children("h2").show()
|
||||
$(th).children(".metadata").addClass("vis")
|
||||
}
|
||||
|
||||
function hideTitle(th) {
|
||||
$(th).children("h2").hide()
|
||||
$(th).children(".metadata").removeClass("vis")
|
||||
}
|
||||
|
||||
$(document).on({
|
||||
mouseenter: function () {
|
||||
if (!Modernizr.touchevents) {
|
||||
showTitle(this)
|
||||
}
|
||||
},
|
||||
mouseleave: function () {
|
||||
if (!Modernizr.touchevents) {
|
||||
hideTitle(this)
|
||||
}
|
||||
}
|
||||
}, '.home-small');
|
||||
|
||||
$(document).on({
|
||||
'touchend': function (e) {
|
||||
e.preventDefault()
|
||||
var art = $(this).parents("article")
|
||||
var metadata = art.children(".metadata")
|
||||
if (metadata.hasClass("vis")) {
|
||||
hideTitle(art)
|
||||
} else {
|
||||
hideTitle($(".vis").parents("article"))
|
||||
showTitle(art)
|
||||
}
|
||||
}
|
||||
}, ".home-small a.thumbnailwrapper")
|
||||
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* CIRCULAR TEXT */
|
||||
|
||||
Reference in New Issue
Block a user