I'm building a new homepage WordPress template. The template uses Flexslider to display Vimeo videos, a simple title and description.
I've followed the FlexSlider documentation to the letter, but the slides are all coming up blank.
Here's what I'm seeing via the Chrome Inspector:
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
For some reason the JQuery isn't kicking in. I've tried removing the inline styles from the <li> tags. I've also tried knocking out the lightbox script that I have running. Nothing seems to be working.
Can you see what's causing this? I've uploaded a demo here: http://bit.ly/1Sgpu99
UPDATE
Here's the relevant source from the template:
<?php // Begin main loop
while ( have_posts() ) : the_post(); ?>
<?php // Begin carousel repeater
if( have_rows('slides') ): ?>
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<?php while( have_rows('slides') ): the_row();
// vars
$background_image = get_sub_field('background_image');
$video = get_sub_field('video');
$title = get_sub_field('title');
$description = get_sub_field('description');
$background_image = get_sub_field('background_image');
?>
<li class="slide" style="background: url(<?php echo $background_image; ?>) no-repeat center; background-size: cover;">
<div class="container">
<div class="half">
<div class="video"><?php echo $video; ?></div>
</div>
<div class="half last">
<header class="entry-header">
<h1 class="entry-title"><?php echo $title; ?></h1>
</header>
<?php echo $description; ?>
</div>
</div><!-- .container -->
</li>
<?php endwhile; ?>
</ul>
</div><!-- .flexslider -->
</div><!-- .flex-container -->
<?php // End repeater
endif; ?>
<?php // End main loop
endwhile; ?>
For some reason flexslider has not been initialized in your page.
If you put this code in Chrome or Firefox console
jQuery(".flexslider")
.flexslider({
animation: "slide",
useCSS: false,
animationLoop: false,
smoothHeight: true,
before: function(slider){
$f(player).api('pause');
}
});
and hit enter, the slider is showing ( whit completely broken css, but this is another question :) )
I can't tell from provided code why slider is not initialized, but you must debug your .js code, not .php. Put some console.log() in .js file where slider is initialized, to be sure that file is loaded, use wp_enqueue_script() to load your .jsfiles with proper dependence to be sure that files are loaded in proper order and so on.
Related
Trying to create an Owl Carousel (in Wordpress) that loops through user testimonials. The testimonials are added via custom post types in the wordpress dashboard. There is already content there for me to use and test.
The Owl Carousel has been registered in my custom script.js file and loop seems to working correctly. My issue that the loop seems to be pulling in the custom post types correctly and the owl carousel is being triggered in the browser.
However when I view the carousel in the browser none of the content appears. Viewing the source code shows the content but doesn't seem to display in the browser. Am i missing something completely obvious? Please help!
screen shot snippet when inspecting from browser
$("#footer-testimonials").owlCarousel({
center: true,
singleItem:true,
loop:true,
margin:10,
autoplay: true,
nav:true
});
<div id="footer-testimonials" class="owl-carousel owl-theme">
<?php while ( $testimonials->have_posts() ) : $testimonials->the_post(); ?>
<?php
$content = get_the_content();
if (strlen($content) > 200) {
$summary = substr($content, 0, strrpos(substr($content, 0, 200), ' ')). '...';;
} else{
$summary = $content;
}
?>
<?php $link = get_permalink($testimonials->post->ID);?>
<div class="item">
<li class="" style="list-style-type: none;">
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<div class="testimonial-text">
<span itemprop="reviewBody"><?php echo $summary; ?> </span>
</div>
<div class="slide-content">
<a itemprop="url" href="<?php echo $link ?>"><h3 class="testimonial-name text-center"><span itemprop="name"><?php the_title(); ?></span></h3></a>
</div>
</div>
</li>
</div>
<?php endwhile; ?>
</div>
I use Advanced Custom Field plugin to add Content2 and content3 in wordpress page editor. I have no problem no make it appear in a template, but now I would like to make it appear in another page content.
I use a plugin called Allow Php Execute so I can write Php in wordpress editor.
With a wp_query I call the pages with category "art", and I want to make appear the title, the thumbnail and the content3 of those pages. It works well with title and thumbnail, but I can't display the content3 custom field content.
Here is my code, written in the default wordpress content editor :
<?php
$the_query = new WP_Query( 'category_name=arts-plastiques','orderby=modified'); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content-page2Col">
<div class="col_gauche">
<div class="col_gauche_content"><?php the_post_thumbnail($size = 'full-size'); ?> </div>
</div>
<div class="col_droite">
<div class="col_droite_content">
<h2><div class="titrePage"><?php the_title(); ?></div></h2>
<div><?php
$post = $the_query->post->ID;
echo get_post_meta($post, 'colonne_3', true);
wp_reset_query();
?></div>
<div class="more">En savoir plus</div>
</div>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<?php endwhile;?>
Can anyone help me ?
Thank you a lot !
Hugo
Setting up a simple WordPress blog, that only contains a single page wich is the blog archive. But i have run in to a problem, i want to have a toggle the excerpt and content show more/show less functionality, så that visitors easy can go trough the posts on the same page without page reloads or beeing sent to the single post page. I know this has been asked here before but none of those examples works for me. Just want a simple show/hide functionality to show the excerpt automatic and when users click show more, the whole post slides open to show complete content, and when they click show less, the post goes back to excerpt. I tried most that is here on stack but nothingworks so now i rolled back to my original files to start over. So this script does nothing right now as you se in the loop-custom file. But this is what i have tried.
Here is my js:
$(function () {
$('.mainContent').hide();
$('a.read').click(function () {
$(this).parent('.excerpt').slideUp('fast');
$(this).closest('.post').find('.mainContent').slideDown('fast');
// $('.mainContent').show();
return false;
});
$('a.read-less').click(function () {
$(this).parent('.mainContent').slideUp('fast');
$(this).closest('.post').find('.excerpt').slideDown('fast');
return false;
});
});
Here is my index file:
<div id="content">
<div id="inner-content" class="row">
<main id="main" class="large-8 medium-8 columns" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- To see additional archive styles, visit the /parts directory -->
<?php get_template_part( 'parts/loop', 'custom' ); ?>
<?php endwhile; ?>
<?php joints_page_navi(); ?>
<?php else : ?>
<?php get_template_part( 'parts/content', 'missing' ); ?>
<?php endif; ?>
</main> <!-- end #main -->
<?php get_sidebar(); ?>
</div> <!-- end #inner-content -->
</div> <!-- end #content -->
And here is my loop-custom file:
<article class="post" id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article">
<header class="article-header">
<?php get_template_part( 'parts/content', 'byline' ); ?>
<h2><?php the_title(); ?></h2>
</header> <!-- end article header -->
<section class="entry-content" itemprop="articleBody">
<?php the_post_thumbnail('full'); ?>
<?php the_excerpt('<button class="tiny">' . __( 'Show more...', 'jointswp' ) . '</button>'); ?>
</section> <!-- end article section -->
EDIT: Answer updated after testing in fiddle.
<div class="post-wrap">
<h2>The Title</h2>
<div class="post">
<div class="excerpt">
Excerpt goes here
</div>
<div class="whole-post">
Slidey read more content goes here
</div>
Read More
</div>
</div>
.whole-post {
display: none;
}
.post {
position: relative;
padding-bottom: 50px;
}
a.read {
position: absolute;
bottom: 10px;
right: 10px;
}
$('a.read').click(function () {
$(this).siblings('.excerpt').slideToggle(500);
$(this).siblings('.whole-post').slideToggle(500);
});
Further comment asking about changing "read more" button text on click - requires additional line of jQuery, like so:
$('a.read').click(function () {
$(this).siblings('.whole-post').is(':visible') ? $(this).html('Read More') : $(this).html('Read Less');
$(this).siblings('.excerpt').slideToggle(500);
$(this).siblings('.whole-post').slideToggle(500);
});
jsfiddle here.
Note: The ternary query ? truthy : falsey ; syntax is short for if (query) { truthy } else { falsey } ;
You can try to use this plugin: https://wordpress.org/plugins/wp-showhide
I'm working on modifying an existing wordpress portfolio page. All that is left to do is to make it so when the user clicks anywhere in the article list the link will open. Currently it is just when the title or image is clicked.
I can see that I could make a clickable with the following setup:
<a href="http://example.com">
<div>
anything
</div>
</a>
However Wordpress moves the tags when the page loads like so:
<a href="http://example.com">
</a>
<div>
anything
</div>
So I started to work on using css with the following setup:
HTML
<div class= "box">
</div>
CSS
div.box {
position: relative;
}
div.box:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}
The hover works, it triggers over all of the content and a cursor does appear.
However thats as much as I can do so far. Any attempt to interact with the .box is shot down. Nothing will trigger with javascript using the following :
$(".box").click(function() {
alert("I am an alert box!");
});
I cannot seem to interact with the div.
The page is as follows:
<div class= "box">
<article id="post-<?php the_ID(); ?>" class="portfolio-article clearfix">
<?php if( get_post_meta($post->ID, "portfolio_image", true) ): ?>
<img src="<?php the_field('portfolio_image'); ?>" class="portfolio-image">
<!--get PDF if not empty-->
<?php else: ?>
<img src="http://domain.com/wp-content/uploads/2014/02/placeholder.png" class="portfolio-image">
<?php endif; ?>
<div class="portfolio-content">
<header>
<?php if( get_post_meta($post->ID, "portfolio_link", true) ): ?>
<h1 class="portfolio-title">
<a target="_blank" href="<?php the_field('portfolio_link'); ?>">
<?php the_field('portfolio_title'); ?> <span class="sosa-icon">p</span>
</a>
</h1>
<!--get PDF if not empty-->
<?php else: ?>
<h1 class="portfolio-title"><?php the_field('portfolio_title'); ?></h1>
<?php endif; ?>
</header>
<p class="portfolio-meta">
<?php the_field('portfolio_publication_and_date'); ?>
<?php if( get_post_meta($post->ID, "portfolio_pdf_upload", true) ): ?>
<span class="sosa-icon">H</span> Open Pdf<!--get PDF if not empty-->
<?php endif; ?>
</p><!-- END ortfolio-meta -->
</div><!--portfolio-content-->
</article>
</div>
NewToJS was in the right area when saying it could be a problem with the access to the jQuery library. In this case I had linked jQuery correctly, it was tested and working.
jQuery in Wordpress needs to be enqueued by adding the following into functions.php
wp_enqueue_script("jquery");
My fault was because I didn't change the '$' to 'jQuery' as this is necessary when working with Wordpress.
Here is the incorrect usage :
$(".box").click(function() {
alert("I am an alert box!");
});
Here is the correct usage :
jQuery(".box").click(function() {
alert("I am an alert box!");
});
If you look at my URL below, and on a connection that may not be really speedy. You'd notice the slider at the top, loads each individual slide in a vertical list (Taking about 1000px space) before snapping into the way it's supposed to render - which is like a standard slider; displaying and sliding one slide at a time.
Does anyone have any suggestions as to how to allow my slider to load correctly?
Live site at >> http://tinyurl.com/cz6sawg
--- Thanks for any pointers, I'm thinking I need to find a script that allows the slides to be hidden until the slider / page is fully loaded before presenting them.
Relevant jQuery:
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000);
});
</script>
Relevant Mark-Up:
<!-- Top of Page Slider FRAGILE -->
<div style="min-height: 280px;">
<div id="photo-rotator" style="">
<?php $slide_id=1; ?>
<?php
$featuredPosts = new WP_Query();
$featuredPosts->query("showposts=3");
while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
?>
<div id="slide-<?php echo $slide_id; $slide_id++;?>">
<a href="<?php the_permalink() ?>" class="post-image">
<?php the_post_thumbnail( 'rotator-post-image' ); ?>
<span class="title" style="font-style:italic; color:#999;"><?php the_title(); ?></span>
</a>
</div>
<?php endwhile; ?><!--/close loop-->
<ul id="slide-nav">
<?php $nav_id=1; ?>
<?php while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<li>
<a href="#slide-<?php echo $nav_id; ?>">
<span class="thumbnail" style="display:none;">
</span>
<p style="color:#F93; font-family:Georgia, 'Times New Roman', Times, serif; font-size: 18px;"><? the_title(); $nav_id++;?></p>
<div style="">
<!--<?php the_excerpt(); ?>-->
<?php if($text= get_post_meta($post->ID, "slidetext", true)) { ?>
<div class="">
<p style="font-weight: normal; color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 14px;"><?php echo $text; ?></p>
</div>
<?php } //else { print"<div>"; } ?>
</div>
</a>
</li>
<?php endwhile; ?><!--/close loop-->
</ul>
</div>
</div>
<!-- End Top page Slider FRAGILE -->
Your code is a bit messy, and the question does not help, but in relation to the part of your question where it reads:
ou'd notice the slider at the top, loads each individual slide in a vertical list (Taking about 1000px space) before snapping into the way it's supposed to render
You can wrap the entire slider content with a div and give overflow:hidden; to prevent the height of +/-1000px on the page load:
CSS
#photo-rotatorWrapper {
width: 960px;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
HTML
<div id="photo-rotatorWrapper">
<div id="photo-rotator">
...
</div>
</div>
Note:
You may need to set other CSS declarations for that wrapper in order to stay positioned correctly within your current HTML structure.