I'm using slick slider with ACF fields (Wordpress). I am trying to get the next and previous post title to the current slide (.slick-current).
I have three active slides with the class .slick-active, the middle one having also the class .slick-current(in addition to .slick-active)
<?php if (have_rows('videofeed','option')): ?>
<div class="slider-popular">
<?php while (have_rows('videofeed2','option')) : the_row(); ?>
<div class="slider-go-wrap">
<h2 class="video-title"> <?php the_sub_field('video_title'); ?> </h2><!-- the video title -->
<div class="video-controls">
<div class="prev-title-popular">
<span class="lightspan controltitles prev-videotitle">PREVIOUS TITLE HERE</span> <!-- previous ACF row sub_field "video_title" here -->
</div>
<div class="next-title-popular">
<span class="lightspan controltitles next-videotitle">NEXT TITLE HERE</span><!-- next ACF row sub_field "video_title" here -->
</div>
</div>
</div>
<?php endwhile;?>
</div>
<?php endif; ?>
Not being a very server side person, how would I integrate the following php loop into my ACF field repeater with the next and previous field data in the current slide? Is there an simpler way to do this than the php loop?
$rows = get_field('videofeed');
if($rows)
{
foreach($rows as $index => $row)
{
// from there, you can get prev / next data using loop index ($rows[$index-1] / $rows[$index+1]
}
}
Any advice from here would be great.
Issue solved with the following jQuery code, works for each slide:
$('.slider-go-wrap').each(function() {
currentSlide = $(this);
nextSlide = currentSlide.next();
prevSlide = currentSlide.prev();
nextSlideData = nextSlide.find('.video-title').html();
prevSlideData = prevSlide.find('.video-title').html();
currentSlide.find('.next-videotitle').html(nextSlideData);
currentSlide.find('.prev-videotitle').html(prevSlideData);
});
Related
I have the normal WP loop for showing blog posts on home.php. Im trying to get a random div to populate after each blog post. So it will be:
BLOG POST -> RANDOM DIV -> BLOG POST -> RANDOM DIV
and so on...I've tried to create "testimonials" post type and randomize them with WP_Query, but it still will only pull one PER PAGE. I need multiple to display, but differently below each post. I am also using ACF, so I created testimonial custom field blocks, but I still cant them to randomize display multiple items.
PHP (within loop):
<a class="row blogRoll"href="<?php the_permalink(); ?>">
<div class="blogImg col-sm-3">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-md-9 blogBlack">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
</div><!-- .entry-content -->
</a>
<div class="testimonial">
<?php the_field('testimonial_content1', 'option');
the_field('testimonial_author1','option'); ?>
</div>
<div class="testimonial">
<?php the_field('testimonial_content2', 'option');
the_field('testimonial_author2', 'option'); ?>
</div>
<div class="testimonial">
<?php the_field('testimonial_content3', 'option');
the_field('testimonial_author3', 'option'); ?>
</div>
</div>
JS:
var elems = $(".testimonial");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}
}
Obviously, the loop is causing me the headache, because it will pull most recent posts and I just need to pull and not DUPLICATE the testimonial divs below a blog post. Any ideas will be appreciated.
Instead of shuffling and outputing the result straight away, you could shuffled an array (pool of testimonials) and then apply the first value to a first .testimonial class for example, and a second value from the shuffled array to the second .testimonial class, ... etc.
That article might be of some help, Randomly iterate through array without pulling duplicate values. You could replace numbers by testimonials... Regards.
I have a theme that displays a menu of products via widgets. We are able to show/hide these categories (sidebars) via the code below. Right now it will show/hide this carousel-item if one of the two product categories have widgets. We would like keep this functionality, but hide the category if it is empty. For example if there are products in category 1, but not in category 2 we want to hide an entire section (see notes in code of where we want this.
<?php if ( is_active_sidebar( 'widget-category-1' ) || is_active_sidebar('widget-category-2') ) { ?>
<div class="carousel-item active animated fadeIn">
<div class="d-block w-100">
//show or hide start here//
<div class="container-fluid px-5">
<div class="row">
<ul class="three-col">
<?php dynamic_sidebar( 'widget-category-1' ); ?>
</ul>
</div>
</div>
//show or hide end here//
//show or hide start here//
<div class="container-fluid">
<div class="row">
<ul class="three-col">
<?php dynamic_sidebar( 'widget-category-2' ); ?>
</ul>
</div>
</div>
//show or hide end here//
</div>
</div>
<?php } ?>`
You can use first-of-type or nth-of-type to reference the element you want to toggle. That or possibly a not() pseudo class should do the trick.
I added a CSS tag to your question. You would need to add the rest of the element that dynamic_sidebar is returning to be sure but typically there is a 'has-items' identifier you can reference.
We ended up wrapping each section in a <div class="phide"></div> and used javascript to hide the this div if no <li></li> is present
<script>
(function($) {
$( document ).ready(function() {
$('.phide:not(:has(li))').hide();
});
})(jQuery);
</script>
I am using Advanced Custom Fields. I want to link the values (eg. thriller, suspense, etc.) of Genre custom field so that when the user clicks on one of the values they will get a filtered list of posts. For eg. when they click Thriller they will get all the posts in the Thriller category.
My code so far for the ACF is as follows:
<!-- Entry Content Start -->
<article <?php post_class('entry clearfix fitvids'); ?>>
<div class="inner-post">
<div class="cover">
<div class="post-image">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
</div>
<div class="custom-fields">
<?php the_meta(); ?>
<div class="ad">
<img src="http://lorempixel.com/160/600" alt="">
</div>
</div>
</div>
<div class="the-content">
<?php the_content(); // This is your main post content output ?>
</div>
</div><!-- /inner-post -->
</article><!-- /entry -->
Is there a solution to this?
You should create a page with custom page template. In this template you should pull posts based on the custom field passed via $_GET parameter. For example: $movies = get_posts(array('meta_key'=>'your_custom_key', 'meta_value'=>$_GET['genre'])); Then you should generate appropriate links to access this page, which should link to our custom page including genre in our $_GET variable. For example the page's slug is movies. Then our links will have the following structure: /movies/?genre=custom_field_value.
I am building a webapp with jquery mobile where I need to get data from external database and show that data as collapsible content.
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed="true">
<?php
// display the results returned
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
printf('<h3><b> %s </h3>
<p> %s <p>',$row["OSO"], $row["AIKA"]);
}
?>
How can I make every H3 to appear as a collapsible content title? Now only the first is shown as a title and the rest are in the content section
You should make a new collapsible item for each entry if you want multiple headers...
<?php
// display the results returned
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed="true">
<h3><?= $row["OSO"] ?></h3>
<p><?= $row["AIKA"] ?><p>
</div>
<?php } ?>
I am trying to make prev - next sliding between content on a page. I have the following markup:
<div class="right">
Previous
Next
</div>
<?php foreach ($chapters as $chapter) : ?>
<div id="chapters-container-<?php echo $chapter->id; ?>" style="display: none">
<div class="left">
<h1 class="hmc"><?php echo $chapter->title; ?></h1>
</div>
<ul class="attachments scroll-pane">
<?php foreach ($chapter->files as $file) : ?>
<!--video zone-->
<?php if ($file->extension == '.mpeg') : ?>
<li class="wide">
<img src="" />
<span class="duration hmc"><?php $file->duration; ?></span>
<h1 class="hmc">The title is a title</h1>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div>
<?php endforeach; ?>
</div>
Basically I generate some content dynamically with PHP. I have wrapped each content generated in a div and I do not display it only with jQuery.
Now I tried doing something like:
$('body').on('click', 'a#next-button', function(){
$('#chapters-container-').next();
});
but ofc it is not working as I want it. How can I make the content change when i toggle between prev and next button based on the markup I am generating.
I think that you don't get what
$('#chapters-container-').next();
does. This, according to the documentation,
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
so you are just selecting the next element after the element with id = chapters-container-
Youy should do something like:
$('body').on('click', 'a#next-button', function(){
var visisbleContainer = $('div[id^=chapters-container-]:visible');
visisbleContainer.next().show();
visisbleContainer.hide();
});
when user clicks on next button get the visible div( chapter ) id attribute.You would receive the chapter id add 1 to this chapter id and generate another string such as chapters-container-2.
Now hide the current div and show the div of the generated string i.e $('#'+ newstring).show()