Add Feature List Javascript

  • Resolved Ann-Sophie

    (@ann-sophie)


    13 years, 10 months ago

    I would like to add this to my page https://jqueryglobe.com/labs/feature_list/

    The code can be found here https://jqueryglobe.com/article/feature-list

    This is the website https://www.mj-roofs.be/wordpress/diensten

    I would like to have a list of the pages under “Diensten” and a corresponding image to show in the slideshow/FeatureList. I can get a full list, but can’t include the array, without giving my syntax errors. Please bear with me, as I don’t know any PHP.

    The HTML code for the slideshow:

    <div id="feature_list">
	<ul id="tabs">
		<li>
		<a href="javascript:;">
			<h3>Services</h3>
			<span>Lorem ipsum dolor sit amet consect</span>
		</a>
		</li>
	</ul>
	<ul id="output">
		<li>
			<img src="images/featurelist01.jpg" />
			<a href="#">Meer informatie &raquo;</a>
		</li>
	</ul>

</div>

    #tabs h3 = title of the page
    the image in #output: Featured image of each page

    Can anyone please help me out with the code? This would be a great help! Thanks in advance!

Viewing 15 replies - 1 through 15 (of 17 total)
  • Moderator keesiemeijer

    (@keesiemeijer)

    I can get a full list, but can’t include the array, without giving my syntax errors.

    What array do you want to include?

    Thread Starter Ann-Sophie

    (@ann-sophie)

    I thought I’d include this one to get my exact number of pages:

    <?php $args = array(
	'depth'        => 0,
	'show_date'    => '',
	'date_format'  => get_option('date_format'),
	'child_of'     => 0,
	'exclude'      => '',
	'include'      => '',
	'title_li'     => __('Pages'),
	'echo'         => 1,
	'authors'      => '',
	'sort_column'  => 'menu_order, post_title',
	'link_before'  => '',
	'link_after'   => '',
	'walker' => '' ); ?>

    Or how would you advise me to do it?

    Moderator keesiemeijer

    (@keesiemeijer)

    try it with get_pages()

    something like this (not tested): example

    Thread Starter Ann-Sophie

    (@ann-sophie)

    Thanks it seems to work but I only want certain pages (the ones underneath “Diensten”)

    I think those are the only pages that will have a “Featured image” so IF they have a featured image, then they can be displayed in this slideshow.

    Or I would like to exclude the following pages ID: 19,21,45

    Thanks a lot for the code! As I am no PHP wizard….

    Thread Starter Ann-Sophie

    (@ann-sophie)

    Also the javascript doesn’t work, as there is no animation…
    I’m not very familiar using Javascript and I’m very new to WordPress, so any help there?

    Moderator keesiemeijer

    (@keesiemeijer)

    Use this:

    <?php
$pages = get_pages('exclude=19,21,45');
?>

    and put this in your header.php between the <head></head> tags:

    <script language="javascript">
		$(document).ready(function() {

			$.featureList(
				$("#tabs li a"),
				$("#output li"), {
					start_item	:	1
				}
			);

			/*

			// Alternative

			$('#tabs li a').featureList({
				output			:	'#output li',
				start_item		:	1
			});

			*/

		});
	</script>

    Thread Starter Ann-Sophie

    (@ann-sophie)

    Hi keesiemeijer,

    the exclude function doesn’t work. None of the pages is showing now.
    The button “Meer informatie” should link to the corresponding page. What function should I use to get the link to that page?

    And about the script: I added this rule to my head-section:
    <script type="text/javascript" src="js/FeatureList.js"></script>
    The javascript file is placed in a folder called js. That should work I guess?

    Moderator keesiemeijer

    (@keesiemeijer)

    Have you done it like so: example

    it is better to enqueue a script by putting this in your theme’s functions.php:

    function my_feature_js(){
if ( !is_admin() ) { // instruction to only load if it is not the admin area
   // register your script location, dependencies and version
   wp_register_script('my_featured_pages',
       get_bloginfo('template_directory') . '/js/jquery.featureList-1.0.0.js',array('jquery'));
   // enqueue the script
   wp_enqueue_script('my_featured_pages');
}
}

add_action('init', 'my_feature_js');

    Put the file jquery.featureList-1.0.0.js inside a folder called “js” inside your theme.

    Thread Starter Ann-Sophie

    (@ann-sophie)

    Yes I copied the code from your example link. It stopped working when I added the exclude=19,21,45

    What is the php code to get the link to the page?

    Moderator keesiemeijer

    (@keesiemeijer)

    That’s strange, on my testserver it is working.
    I’ve got it working with this in header.php after the wp_head(); tag:

    <script language="javascript">
		jQuery(document).ready(function() {

			jQuery.featureList(
				jQuery("#tabs li a"),
				jQuery("#output li"), {
					start_item	:	1
				}
			);

			/*

			// Alternative

			jQuery('#tabs li a').featureList({
				output			:	'#output li',
				start_item		:	1
			});

			*/

		});
	</script>

    Moderator keesiemeijer

    (@keesiemeijer)

    For the link change this:
    <a href="#">Meer informatie ?</a>
    to this:

    <a href="<?php echo get_permalink($page->ID); ?>" title="<?php echo esc_attr(strip_tags(get_the_title($page->ID))) ?>">Meer informatie ?</a>

    Thread Starter Ann-Sophie

    (@ann-sophie)

    Hi keesiemeijer,

    yes it’s working indeed, but when I try to exclude these pages, then the whole slideshow disappears ?? and I don’t understand why.

    Thanks for everything already!!!

    Moderator keesiemeijer

    (@keesiemeijer)

    Replace:

    $pages = get_pages('exclude=19,21,45');

    with:

    $pages = get_posts('exclude=19,21,45&post_type=page');

    and after each foreach put this: setup_postdata($page);

    like so:

    <?php foreach($pages as $page) : setup_postdata($page) ?>

    Thread Starter Ann-Sophie

    (@ann-sophie)

    <?php
	$pages = get_posts('exclude=19,21,45&post_type=page');
	?>

    <div id="feature_list">

        <ul id="tabs">

		<?php foreach($pages as $page) : setup_postdata($page); ?>

        	<li>
            	<a href="javascript:;">
            	<h3><?php echo $page->post_title; ?></h3>
                </a>
            </li>

			<?php endforeach; ?>

        </ul>

        <ul id="output">

            <?php foreach($pages as $page) : setup_postdata($page); ?>

                <li>
                	<?php
                    if ( has_post_thumbnail($page->ID) ) { // check if the post has a Post Thumbnail assigned to it.
          			echo get_the_post_thumbnail( $page->ID, 'large');
        			}
        			?>
                    <a href="<?php echo get_permalink($page->ID); ?>" title="<?php echo esc_attr(strip_tags(get_the_title($page->ID))) ?>">Meer informatie ?</a>
				</li>

            <?php endforeach; ?>

		</ul>

    </div><!-- end feature_list -->

    Hope I did this correctly… Links/tabs and images disappear as well.

    Moderator keesiemeijer

    (@keesiemeijer)

    Ok found it. You cannot use the veriable $page. So I changed it to $mypage.

    example

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Add Feature List Javascript’ is closed to new replies.