Way to force page to not completely reload?

This is probably a stupid or odd question but I was wondering if there was a way to force just the gallery section to reload instead of whole page when scrolling through pictures. The theme I am using has a fairly large picture in the header and when ever I hit next in the gallery the page jumps to the top when reloading. With higher resolution screens it still shows a partial picture and access to the next back buttons but if someone has their screen set to lower resolution they have the scroll down to get to the picture and next/back buttons again. I was wondering if there was a way to either keep the whole page from reloading or if there was a way to cause the page to reset to the photo area and not the top?

Comments

  • It would be possible to use javascript to load new images. Several themes do this. Take a look at, for instance, Garland and its "image gallery" personality.

    This is "expert" level implementation, though.

    Your other option is to use the dreaded iFrames and force refresh of the frame. Still will require javascript, though.
  • bic Member, Translator
    I think I've just found the simplest solution for this.

    Add an empty anchor before the image, or where you want the page jumps on load when linked from prev and next buttons.

    ``

    Then add this javascript to your image.php file:

    `

    $(document).ready(function(){
    var anchor1 = $('#next a').attr('href');
    var anchor2 = $('#prev a').attr('href');
    anchor1 = anchor1+'#myAnchor';
    anchor2 = anchor2+'#myAnchor';
    $('#next a').attr('href',anchor1);
    $('#prev a').attr('href',anchor2);
    });

    `
  • acrylian Administrator, Developer
    As sbillard said, it is absolutely possible to setup a theme using JavaScript/jQuery+Ajax. However there are several things to think of:
    - Preloading
    - Linkability of each image (not unimportant
    - Possible rebinding other JS functionality to each image (colorbox, rating etc) that would not work the elements addressed are loaded via Ajax.

    All is possible. For example you could use the Cycle jQuery plugin that powers our slideshow to set this up. There are of course other jQuery tools that can do this.

    @bic: That might work indeed.
  • bic Member, Translator
    Yes, it works! I've just tested it this morning.
    Maybe I'll implement it on my site too, probably under a conditional statement like this:
    `if (screen.height < 800){...}`
Sign In or Register to comment.