Chnge php (w ajax) load image to link to post

  • I’m modifying a Portfolio theme called Contrast.Currently thumbnails link to a full image (BG_image). How would I change the following code so that it linked instead to the post associated with that image (i.e. in which the image is posted)?

    Many thanks!

    <?php if (have_posts()) { ?>
    <script type=”text/javascript”>
    $(document).ready(function() {
    $(‘.nav.portfolio .navMask ul.navContent, .menu, .footer’).hover(function() {
    $(‘.nav.portfolio .navMask ul.navContent’).animate({right: ‘0px’}, {queue:false, duration: 500});
    $(‘.menu, .footer’).animate({opacity: ‘1’}, {queue:false, duration: 500});
    },
    function(){
    $(‘.nav.portfolio .navMask ul.navContent’).animate({right: ‘-200px’}, {queue:false, duration: 300});
    $(‘.menu, .footer’).animate({opacity: ‘0.1’}, {queue:false, duration: 300});
    });

    $(‘.nav.portfolio .navMask ul.navContent li p.image a’).click(function() {
    $(‘.loading’).show();
    $.ajax({
    type: ‘GET’,
    url: ‘<?php bloginfo(‘template_url’); ?>/load_background.php’,
    data: ‘BG_image=’ + $(this).attr(‘rel’),
    success: function(html) {
    $(‘#background’).html(html);

    $(‘#background img’).load(function() {
    $(this).css({
    top: ($(window).height() – $(this).height()) / 2,
    display: ‘block’
    });

    $(‘.loading’).hide();
    });
    }
    });
    });

    $(‘.nav.portfolio .navMask ul.navContent li p.image a:eq(0)’).click();
    });
    </script>
    <?php } ?>

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi,

    this is more a jQuery-Question. But this might be easily handled.

    The load is here:

    $.ajax({
    type: 'GET',
    url: '<?php bloginfo('template_url'); ?>/load_background.php',
...

    You have to change the url to get the right thing loaded.
    For the current post you can for example load get_template_part( ‘loop’, ‘index’ );.
    You need to change load_background.php. You can load get_template_part(); here.

    drublic

    Thread Starter Magnificat

    (@magnificat)

    Thanks for the response drublic,

    I’m not very familiar with ajax (or js for that matter) and I want to make sure I get the syntax right.

    I need the specific post in which the action is called, not the current post in the loop. Also, I need load_background.php for other functions on the site, so I can’t change it completely. It currently reads:

    <img src=”<?php echo $_GET[‘BG_image’]; ?>” alt=”” />

    Should I create a new file, for example load_post something like:

    <?php echo $_GET[‘the_permalink’]; ?>

    and then change the excerpted text to:
    $.ajax({
    type: ‘GET’,
    url: ‘<?php bloginfo(‘template_url’); ?>/load_post.php’,
    …

    Thank you so much for your help!!!!

    Thread Starter Magnificat

    (@magnificat)

    Well, I tried my suggestion and it didn’t work. Thank you for your reply.

    Hi,

    I’m not sure, what you exactly mean.

    You can load content with jQuery! So you load the picture.
    Now you want to load the current post instead, right?

    I would load this with jQuery’s-load-function. You need a new PHP-sheet like you figured out. In the new sheet you have to call the content. For example the post.
    Hand over the ID of the post with the POST-variables and read out the post.
    I’m not soooo familiar with the PHP-functions for WordPress. So I can’t help you more for the moment. Just try some stuff.

    Hans

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Chnge php (w ajax) load image to link to post’ is closed to new replies.