by
tim » Tue Jun 09, 2015 1:22 pm
I use ajax to load cloned pages into popup overlays pretty often. It's pretty straightforward. When you load the external file, the server builds the Couch-based page before serving it. There's no conflict in that sense. I don't think that Couch is going to add any problems to using ajax. I generally keep the page view super-simple, just the most minimal html, because it's not really meant to stand on its own.
I've never used the gallery template, but it's essentially just a clonable template with a bulk upload feature. It shouldn't be any different from an ordinary clonable template. As far as comments go, all ajax does is use javascript to load external content, so showing the comments themselves shouldn't be a problem. But I don't have any experience with it. Of course, any action (like a form) that requires reloading the page will reset everything and could cause issues.
Here's a simplified ajax gallery template. (Sorry it's not a Couch-gallery-type template. You could modify it, though.) It has thumbnails in the list view and a larger image in the page view that is loaded into a popup when the thumbnail is clicked. It uses jQuery, which makes loading external pages very simple among other things.
The css includes a close button and a loading gif which you can provide for yourself. But the page still functions without them.
II hope this might be some help.
- thumbs.jpg (112.64 KiB) Viewed 5389 times
- overlay.jpg (140.88 KiB) Viewed 5389 times
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Gallery' clonable='1' >
<cms:editable name='hide' type='message'>
<style>#k_element_artwork_thumb, #k_element_artwork_large{display:none;}</style>
</cms:editable>
<cms:editable name='artwork'
label="Image"
quality='100'
show_preview='1'
preview_width='250'
type='image' />
<cms:editable name='artwork_thumb'
assoc_field='artwork'
width='150'
height='150'
quality='100'
enforce_max='1'
type='thumbnail' />
<cms:editable name='artwork_large'
assoc_field='artwork'
width='800'
height='600'
quality='100'
enforce_max='1'
type='thumbnail' />
<cms:editable name='caption' label="Caption" type='text' />
</cms:template>
<cms:if k_is_page>
<p style="text-align:center; margin:0;"><img src="<cms:show artwork_large />" alt="<cms:show k_page_title/>"/><br/><strong><cms:show k_page_title /></strong><br/><cms:show caption/></p>
<cms:else/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="This is my gallery." />
<title>My Gallery</title>
<style>
h1, p {
margin:0;
text-align:center;
}
p {
margin-bottom:20px;
}
img {
max-width:99%;
}
.gallery-thumbs {
text-align:center;
padding:0 20px 20px;
line-height:1em;
width:180px;
height:180px;
float:left;
}
.gallery-thumbs img {
border:1px solid #333;
}
.gallery-thumbs .title {
font-size:13px;
color:#333;
}
.gallery-thumbs a {
text-decoration:none;
}
.gallery-thumbs a:hover {
text-decoration:underline;
}
.overlay-bg {
display: none;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
z-index: 1000;
background: #000;
background: rgba(0,0,0,0.5) url(loading.gif) 0px 0px no-repeat;
}
.overlay-content {
display: none;
background: #fff;
padding: 1%;
width: 60%;
position: absolute;
top: 15%;
left: 50%;
margin: 0 0 0 -30%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
cursor: default;
z-index: 10001;
}
.overlay-content img {
border:1px solid #888;
}
.close-btn {
background-image:url(close.png);
position:absolute;
left:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
@media (max-width: 480px){
.overlay-content {
width: 94%;
margin: 0 2%;
left: 0;
}
}
</style>
</head>
<body>
<h1>Welcome to My Gallery.</h1>
<p>Click or tap for a larger image.</p>
<cms:pages>
<div class="gallery-thumbs">
<a href="<cms:show k_page_link/>" class="show-popup">
<img src="<cms:show artwork_thumb/>" alt="<cms:show k_page_title/>" /><br/>
<span class="title"><cms:show k_page_title/></span>
</a>
</div>
</cms:pages>
<div class="overlay-bg">
</div>
<div class="overlay-content">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
function showPopup() {
$('.show-popup').click(function(event){
event.preventDefault();
var docHeight = $(document).height();
var scrollTop = $(window).scrollTop();
var loaderPos = scrollTop + 200;
var pageurl = $(this).attr('href');
$('.overlay-bg').fadeIn(800).css({'height' : docHeight, 'background-position': 'center ' + loaderPos+'px'});
$('.overlay-content').css({'top': scrollTop+20+'px'});
$('.overlay-bg').click(function(){
closePopup();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup();
}
});
$('.overlay-content').load(pageurl, function() {
$('.overlay-content').find('img').load( function() {
$('.overlay-content').prepend('<a class="close-btn"></a>');
$('.overlay-content').fadeIn(600);
$('.close-btn').click(function(){
closePopup();
});
});
});
});
}
showPopup();
function closePopup(){
$('.overlay-bg, .overlay-content').fadeOut(200, function(){
$('.overlay-content').html('');
$('.show-popup');
});
}
});
</script>
</body>
</html>
</cms:if>
<?php COUCH::invoke(); ?>
