Tuesday 15 January 2013

Wordpress with Advanced Custom Fields showing post content in Modal -



Wordpress with Advanced Custom Fields showing post content in Modal -

i have little issue coding wordpress website advance custom fields , modal.

how can incorporate modal advanced custom fields? modal shows generic name , company.

when move modal loop shows content every post.

pastebin link here

thanks paddy

it looks have sorted out using info attributes.

<div class="content row"> <ul class="slides"> <?php query_posts( 'showposts=-1&orderby=asc&category_name=speakers' ); ?> <?php while ( have_posts() ) : the_post(); ?> <?php if( have_rows('speakers') ): ?> <?php while( have_rows('speakers') ): the_row(); ?> <?php $image = get_sub_field('photo'); ?> <?php $company = get_sub_field('company'); ?> <?php $bio = get_sub_field('bio'); ?> <li class="slide col25 js-open-modal"> <a href="#modal1" class="easy-modal-open js-modal-open" data-post-id="<?= get_the_id(); ?>" data-image-url="<?php echo $image['url']; ?>" data-image-alt="<?php echo $image['alt'] ?>" data-title="<?php echo the_title(); ?>" data-company="<?php echo $company; ?>" data-bio="this bio text"> <img class="logo" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" /> <h4 class="overlay"><?php echo the_title(); ?><br /><?php echo $company; ?></h4></a> </li> <?php endwhile; ?> <?php endif; ?> <?php endwhile; ?> <?php wp_reset_query(); ?> </ul> </div> <div class="easy-modal js-modal" id="modal1"> <div class="easy-modal-inner"> <img class="logo js-logo" src="" alt="" /> <h4><span class="js-title"></span><span class="js-company"></span></h4> <p class="js-bio"></p> <button class="easy-modal-close" title="close">&times;</button> </div> </div>

// , using in js

var modal = $('.js-modal'), modaltrigger = $('.js-modal-open'); modaltrigger.on('click', function(e){ e.preventdefault(); var t = $(this), url = t.data('image-url'), alt = t.data('image-alt'), title = t.data('title'), company = t.data('company'), bio = t.data('bio'); updatemodal(modal, url, alt, title, company, bio); // open modal here unless plugin using opens self? }); function updatemodal(elm, url, alt, title, company, bio) { elm.find('img').attr('src', url); elm.find('img').attr('alt', alt); elm.find('.js-title').text(title); elm.find('.js-company').text(company); elm.find('.js-bio').text(bio); }

wordpress modal-dialog advanced-custom-fields

No comments:

Post a Comment