Multiple fullscreen overlays on click WordPress
- SOLVED
Hi!
I'm currently using an edited version of this tutorial for a site - http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects
I have clickable fields (which are images) which then open up on click to the overlay to echo a number of ACF fields.
Everything is set up on the back end as an ACF repeater.
Everything works as required except the content of the fields isn't picking up for each individual ACF repeater for the overlay. Instead the overlay is always using the content from the first repeater box and doesn't pick up the content from each separate repeater box (i.e. the title and text as per html below). I can see why it's doing this and is expected behaviour but messing around with the script i haven't been able to resolve.
Please can you assist?
Thank you!
<strong>My current HTML ::</strong>
<?php if( have_rows('portfolio') ): ?>
<div id="portfolio">
<?php while( have_rows('portfolio') ): the_row();
$img = get_sub_field('image');
$title = get_sub_field('title');
$text = get_sub_field('description');
$field = get_field_object('category');
?>
<div class="trigger-overlay" type="button">
<div class="port">
<img src="<?php echo $img['url']; ?>" alt="<?php echo $img['alt'] ?>" />
</div>
</div>
<div class="overlay overlay-scale">
<button type="button" class="overlay-close">Close</button>
<nav>
<h1><?php echo $title; ?></h1>
<p class="p-text"><?php echo $text; ?></p>
</nav>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
EDITED SCRIPT ::
(function() {
var triggerBttn = document.getElementsByClassName( 'trigger-overlay' ),
overlay = document.querySelector( 'div.overlay' ),
closeBttn = overlay.querySelector( 'button.overlay-close' ),
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
support = { transitions : Modernizr.csstransitions };
function toggleOverlay() {
if( classie.has( overlay, 'open' ) ) {
classie.remove( overlay, 'open' );
classie.add( overlay, 'close' );
var onEndTransitionFn = function( ev ) {
if( support.transitions ) {
if( ev.propertyName !== 'visibility' ) return;
this.removeEventListener( transEndEventName, onEndTransitionFn );
}
classie.remove( overlay, 'close' );
};
if( support.transitions ) {
overlay.addEventListener( transEndEventName, onEndTransitionFn );
}
else {
onEndTransitionFn();
}
}
else if( !classie.has( overlay, 'close' ) ) {
classie.add( overlay, 'open' );
}
}
for (x=0;x<triggerBttn.length;x++) {
triggerBttn[x].addEventListener( 'click', toggleOverlay );
}
closeBttn.addEventListener( 'click', toggleOverlay );
})();
Answers (2)
Reigel Gallarde answers:
I'm just guessing this should work.. (it's hard when I can't see a working site/page)
try adding, overlay = jQuery(this).next('overlay')[0]; in function toggleOverlay...
should be like this...
function toggleOverlay() {
overlay = jQuery(this).next('.overlay')[0];
// ... rest of the codes here...
elledee007 comments:
Works perfectly except the 'close' function no longer works. There a quick fix for that? Was just what I was looking for - Thank you so much!
Reigel Gallarde comments:
hmmm... this is also another guess....
let's change overlay = jQuery(this).next('.overlay')[0];
to
if (jQuery(this).is('.trigger-overlay')) {
overlay = jQuery(this).next('.overlay')[0];
} else {
overlay = jQuery(this).closest('.overlay')[0];
}
it might be better if you can let us see a page... :)
elledee007 comments:
I know - so sorry, I just can't provide access to the info at this stage with client. That didn't work unfortunately...hasn't changed any behaviour just doesn't close still
Reigel Gallarde comments:
how about this, copy the output html of <div id="portfolio"> ... </div>
you can paste it here... http://pastebin.com/
elledee007 comments:
http://pastebin.com/hjA15F24
Reigel Gallarde comments:
can we able to change the mark up?
<?php while( have_rows('portfolio') ): the_row();
$img = get_sub_field('image');
$title = get_sub_field('title');
$text = get_sub_field('description');
$field = get_field_object('category');
?>
<div class="overlay-holder"> <?php // I added this line ?>
<div class="trigger-overlay" type="button">
<div class="port">
<img src="<?php echo $img['url']; ?>" alt="<?php echo $img['alt'] ?>" />
</div>
</div>
<div class="overlay overlay-scale">
<button type="button" class="overlay-close">Close</button>
<nav>
<h1><?php echo $title; ?></h1>
<p class="p-text"><?php echo $text; ?></p>
</nav>
</div>
</div> <?php // I added this line ?>
<?php endwhile; ?>
if we are allowed to do this, we can change your javascript code to something like this:
(function () {
var overlay_holder = document.getElementsByClassName('overlay-holder');
function generate_overlay(el) {
var triggerBttn = el.querySelector('.trigger-overlay'),
overlay = el.querySelector('div.overlay'),
closeBttn = overlay.querySelector('button.overlay-close'),
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
support = {
transitions: Modernizr.csstransitions
};
function toggleOverlay() {
if (classie.has(overlay, 'open')) {
classie.remove(overlay, 'open');
classie.add(overlay, 'close');
var onEndTransitionFn = function (ev) {
if (support.transitions) {
if (ev.propertyName !== 'visibility') return;
this.removeEventListener(transEndEventName, onEndTransitionFn);
}
classie.remove(overlay, 'close');
};
if (support.transitions) {
overlay.addEventListener(transEndEventName, onEndTransitionFn);
} else {
onEndTransitionFn();
}
} else if (!classie.has(overlay, 'close')) {
classie.add(overlay, 'open');
}
}
triggerBttn.addEventListener('click', toggleOverlay);
closeBttn.addEventListener('click', toggleOverlay);
}
for (x = 0; x < overlay_holder.length; x++) {
generate_overlay(overlay_holder[x]);
}
})();
elledee007 comments:
Perfect! Done! Brilliant - gracias!
Reigel Gallarde comments:
Great! You can award the price now... :)
