Ondersteuning » Algemeen WordPress » “Load more” met afbeelding ipv tekst

  • Hoi allen,

    op basis van de plugin “Twenty thirteen load more” ben ik gaan werken om het volgende te bereiken:

    graag wil ik in plaats van de standaard “Page navigation” onderaan de pagina een “Load More” hebben.
    Die “load more” geeft de plugin standaard als tekst weer, maar ik wil er graag een .png bestand voor in de plaats hebben met een plusje erin.

    Ik krijg het helaas enkel zover dat de link naar het bestand getoond word in plaats van het fotootje zelf.

    wie oh wie zou me kunnen helpen met waar ik de fout ben ingegaan ?

    de site is: http://www.hellodolly.be

    het gebruikte loadmore.js javascript:

    /* Contains the "Load More Posts" functionality */
    jQuery( document ).ready( function( $ ) {
    	var next_page = parseInt( _load_more.current_page ) + 1;
    	var max_pages = parseInt( _load_more.max_pages );
    	
    if ( next_page <= max_pages ) {
        $( '.paging-navigation' ).html( '<div class="nav-links"><a class="load_more" href="#">' + _load_more.main_img + '</a><img class="load_more_img" style="display: none;" src="' + _load_more.loading_img + '" alt="Loading..." /></div>' );
    }
    	
    	var mt_ajax_load_posts = function() {
    		//Begin Ajax
    		$.post( _load_more.ajaxurl, { action: 'load_posts', next_page: next_page }, function( response ) {
    			next_page = response.next_page;
    			max_pages = response.max_pages;
    			
    			//Append the HTML
    			var html = $.parseHTML( response.html );
    			html = $( html ).filter( '.type-post' );
    			$( '#content .type-post:last' ).after( html );
    			
    			//If the next page exceeds the number of pages available, get rid of the navigation
    			if ( next_page > max_pages ) {
    				$( '.paging-navigation' ).html( '' );
    			}
    			
    
    			//Fade out loading img and fade in loading text
    			$( '.load_more_img' ).fadeOut( 'slow', function() {
    				$( '.load_more' ).fadeIn( 'slow' );
    			} );
    		}, 'json' );
    	};
    	
    	//Clicking the load more button
    	$( '.paging-navigation' ).on( 'click', 'a.load_more', function( e ) {
    		e.preventDefault();
    		
    		$( '.load_more' ).fadeOut( 'slow', function() {
    			$( '.load_more_img' ).fadeIn( 'slow', function() {
    				mt_ajax_load_posts();
    			} );
    		} );
    		
    		
    	} );
    } );

    het gebruikte index.php bestand:

    <?php
    /*
    Plugin Name: Twenty Thirteen Load More
    Plugin URI: http://wordpress.org/extend/plugins/HelloDolly-load-more/
    Description: Add a "Load More" button to the bottom of your Twenty Thirteen blog homepage on WordPress.
    Author: 
    Version: 1.0.0
    Requires at least: 3.5
    Author URI: http://www..com
    Contributors: 
    */ 
    
    add_action( 'plugins_loaded', '_load_more_textdomain' );
    function _load_more_textdomain() {
    	load_plugin_textdomain( 'HelloDolly-load-more', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
    }
    
    /* Load More */
    add_action( 'wp_enqueue_scripts', '_load_more_scripts' );
    function _load_more_scripts() {
        global $wp_query;
        if ( !is_home() ) return;
    
        //Detect HelloDolly
        $theme = wp_get_theme();
        $template = $theme->get_template();
        if ( 'HelloDolly' != $template ) return;
    
        $max = $wp_query->max_num_pages;
            $paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;
        wp_enqueue_script( '-load-more', plugins_url( '/js/loadmore.js', __FILE__ ), array( 'jquery' ), '20131010', true );
        wp_localize_script( '-load-more', '_load_more', array(
            'current_page' => esc_js( $paged ),
            'max_pages' => esc_js( $max ),
            'ajaxurl' => esc_js( admin_url( 'admin-ajax.php' ) ),
            'main_img' => esc_js( plugins_url( '/images/plus.png', __FILE__ ) ),
            'loading_img' => esc_js( plugins_url( '/images/ajax-loader.gif', __FILE__ ) )
        ) );
    }
    /**
     * Ajax for loading more posts
     * 
     * @author Ronald Huereca <ronald@metronet.no> 
     */
     add_action( 'wp_ajax_load_posts', '_ajax_load_posts' );
     add_action( 'wp_ajax_nopriv_load_posts', '_ajax_load_posts' );
     function _ajax_load_posts() {
        $next_page = absint( $_POST[ 'next_page' ] );
    
        global $wp_query;
        $wp_query = new WP_Query( array(
            'paged' => $next_page,
            'post_status' => 'publish'
        ) );
        ob_start();
        global $post;
        while( $wp_query->have_posts() ) {
            $wp_query->the_post();
            get_template_part( 'content', get_post_format() );
        };
        $html = ob_get_clean();
    
        $return_array = array(
            'next_page' => $next_page + 1,
            'max_pages' => $wp_query->max_num_pages,
            'html' => $html
        );
        //return
        die( json_encode( $return_array ) );
     } //end _ajax_load_posts
    
    ?>
  • Het onderwerp ‘“Load more” met afbeelding ipv tekst’ is gesloten voor nieuwe reacties.