Hi there,
I am working on a project rotation page (projects.php). In this page, I will have a select number of featured projects that rotate, and once the user clicks on one of the featured project, a div is appended to the body with the project full page inside it on the projects page, and then the rotation container on projects.php is destroyed. Once the user is reading the project page, then wants to go back to the project rotation, he/she clicks on a link that effectively replaces the project full info with the project rotation.
Very similar concept to https://www.cappen.com/en/works- that’s almost exactly what I’d like to accomplish.
I have been able to append page info to my main projects rotation, but I can’t get it to replace the rotation or destroy the fullpage when going back to the projects main page. Additionally, I can only get it to append Project A even if clicking on Projects B, C or D, and it appends multiple projects without closing the first page.
A vanilla approach to appending / replacing would be completely OK in this case! Any help or tidbits would be much appreciated!!!
Projects Template
<?php if(!kirby()->request()->ajax()) { snippet('header'); } ?>
<?php
$projects = page('projects')->children()->visible()->sortBy('featuredorder','asc');
?>
<div id="works" class="animation-container --in">
<?php foreach($projects as $project): ?>
<div class="<?= 'work --'.($project->uid()) ?>">
<a href="<?php echo $project->url() ?>" class="work__link link-page">
<h2 class="work__title"><?= html($project->title()) ?></h2>
<text><?= html($project->tagline()) ?></text>
</a>
</div>
<?php endforeach ?>
</div>
<?php if(!kirby()->request()->ajax()) { snippet('footer'); } ?>
The appended project should appear right after the footer.
Project Template
<?php if(!kirby()->request()->ajax()) { snippet('header'); } ?>
<?= $page->text()->kirbytext() ?><?= $page->title() ?>
<?php if(!kirby()->request()->ajax()) { snippet('footer'); } ?>
Script.js
url = $('.work__link').attr('href');
var nextPage = url;
var $container = $('<div id="' + nextPage + '" class="animation-container"/>');
var currentPage, loadedPages = [],
$backWorks = $(".back-works"),
changePage = function(current, next) {
"function" == typeof window[current + "AnimaOut"] && window[current + "AnimaOut"](),
$barMenu.removeClass("--close"),
$menu.removeClass("--close"),
$backWorks.removeClass("--hide"),
setTimeout(function() {
$("#" + next).addClass("--in"),
setTimeout(function() {
$(window).scrollTop(0) }, 300) }, 300),
"function" == typeof window[next] && window[next](!0),
setTimeout(function() {
positionMenu(next),
$("#" + next).removeClass("--in").addClass("--active"),
$("#" + current).remove() }, 1300)
},
loadPage = function(url, back) {
return nextPage != currentPage && ($.ajax({ method: "GET", url: url }).done(function(data) {
back || urlChange(url);
var $container = $('<div id="' + nextPage + '" class="animation-container --in"/>');
$container.html(data),
$("body").append($container),
void loadedPages.push(nextPage)
}))};
getIdPage = function(url) {
var page, id = url.replace(baseUrl, "").replace(baseUrl, "").replace("/page", "").replace(hash, "").replace(/\/$/, "").split("/"),
hash = window.location.hash;
return page = "" == id[id.length - 1] ? "home" : "services" == id[0] ? "services" : id[id.length - 1], "home" != page && "work" != id[0] && "projects" != page && "services" != id[0] && "about" != page && (page = "not-found"), page },
$('.work__link').bind('click', function(e) {
e.preventDefault();
$backWorks.removeClass("--hide");
loadPage(url, $container);
$(this).show();
});
I would prefer not to use the final bind function as it seems redundant with the loadPage function, but I can’t figure out how to use the LoadPage function alone. I am fine with completely scrapping this script as well, just want the functionality above.
Again…thanks!!!