AJAX hash HREF using Wordpress_问答_开发者_运维开发者技术经验分享

So I have the AJAX on my website working, a live example can be found here: www.mathewhood.com.

What I was curious about though was how to change my url when clicked from http://mathewhood.com/#http://mathewhood.com/sitefiles/2011/08/hello-w

to something more like http://www.mathewhood.com/sitefiles/#hello-w or something along that nature. Preferably without the /sitefiles/ as that is mainly a security thing.

I will post my code below, if anyone has experience with href defining and knows how wordpress works with it your help would be greatly appreciated!!!!

ajax.js

$(document).ready(function() {  

    // Check for hash value in URL  
    var href = $('.recentPost a').each(function(){
    var hash = window.location.hash.substr(1);  

        var href = $(this).attr('href');  
        if(hash==href.substr(0,href.length-5)){  
            var toLoad = hash+'.html #content';  
            $('#content').load(toLoad)  
        }  
    });  

    $('#.recentPost a').click(function(){  

    var toLoad = $(this).attr('href')+' #cont开发者_Python百科ent';  
    $('#content').hide('fast',loadContent);  
    $('#theContainer').remove();  
    $('#theContainer').append('<span id="load">LOADING...</span>');  
    $('#theContainer').fadeIn('normal');  
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  
    function loadContent() {  
        $('#content').load(toLoad,'',showNewContent())  
    }  
    function showNewContent() {  
        $('#content').show('normal',hideLoader());  
    }  
    function hideLoader() {  
        $('#theContainer').fadeOut('normal');  
    }  
    return false;  

    });  
});

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php bloginfo( 'name' ); ?> | <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/ajax.js"></script>
<script>
$(document).ready(function() {
    //move the image in pixel
    var move = 8;
    //zoom percentage, 1.2 =120%
    var zoom = 1;
    //On mouse over those thumbnail
    $('.recentPost').hover(function() {
        //Set the width and height according to the zoom percentage
        width = $('.recentPost').width() * zoom;
        height = $('.recentPost').height() * zoom;
        //Move and zoom the image
        $(this).find('img').stop(false,true).animate({'width':width, 'height':height<?php /*?>, 'top':move, 'left':move<?php */?>}, {duration:200});
        //Display the caption
        $(this).find('div.caption').stop(false,true).fadeIn(200);
    },
    function() {
        //Reset the image
        $(this).find('img').stop(false,true).animate({'width':$('.recentPost').width(), 'height':$('.recentPost').height()<?php /*?>, 'top':'8', 'left':'8'<?php */?>}, {duration:100});    
        //Hide the caption
        $(this).find('div.caption').stop(false,true).fadeOut(200);
    });
});
</script>
<script>
$('.thumbs').click(function(e){
    e.preventDefault();
    var contents = $(this).closest('.recentPost').find('.caption').html();

    var $container = $('#theContainer').html(contents);
    $container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:150}, {duration: 1000, easing: 'easeInOutCirc'});
    $container.click(function(){
        $container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
        $container.fadeOut('slow');
        $container.html('');
    });
});
</script>

<?php wp_head();?>
</head>

<body>

<div id="wrapper">
    <div id="container">
        <div id="headerWrap">
            <a href="http://www.mathewhood.com"><div id="logo"></div></a>
            <div id="nav"></div>
        </div>

page_home.php

<?php
/*
Template Name: Home
*/
?>
<?php get_header();?>
    <div id="contentWrap">

     <div id="content"></div>

        <div id="newBanner"></div>
        <?php query_posts('category_name=portfolio&showposts=12'); ?>

                <?php while (have_posts()) : the_post(); ?>
                   <div class="recentPost">
                    <a href="<?php the_permalink();?>">
                        <?php the_post_thumbnail('204, 144', array('class' => 'thumbs')); ?>
                    </a>
                    <a href="<?php the_permalink();?>">
                        <div class="caption">
                            <div class="captionTitle"><?php the_title(); ?></div>
                            <p><?php the_content();?></p>
                        </div>
                    </a>
                </div>
                <?php endwhile; ?>
                <div class="cleared"></div>

    </div>
<?php get_footer();?>

single_portfolio.php

<?php
/*
Template Name: Single Portfolio
*/
?>
<?php get_header();?>
<div id="contentWrap">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div id="content">
        <h1><?php the_title(); ?></h1>
        <?php the_content(); ?>
        </div>
        <?php endwhile; ?> 
    <?php endif; ?>    
</div>
<?php get_footer();?>

Is this the code you need?

window.location.url = "http://mathewhood.com/sitefiles/2011/08";
window.location.hash = "hello-w";

.. or am I missing something.

It's not exactly clear what you are trying to do. Why are you posting so much of your code?

AJAX hash HREF using Wordpress

精彩评论

关注公众号

热门标签

图文推荐

AJAX hash HREF using Wordpress

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：