[Plugin: NextGEN Gallery] Image Browser Customisation – Page Reload

(@craftpassion)

I am a code novice and I am trying to do my customisation by myself, just to save some money :p
I am trying to customise the way how NGG imagebrowser works. It will reload the page, whenever I click the NEXT or BACK button,.
But when the page reload, it will go to my header instead of stick to the NGG photos in my post.
This is the post where I have the NGG image browser.
Following is part of the new code on my imagebrowser.php:

<div class="pic"><a href="<?php echo $image->next_image_link ?></a><?php echo $image->href_link ?></div>
	<div class="ngg-imagebrowser-nav">
		<div class="back">
			<a href="<?php echo $image->previous_image_link ?>">◄ <?php _e('Back', 'nggallery') ?></a>
		</div>
		<div class="next">
			<a href="<?php echo $image->next_image_link ?>"><?php _e('Next', 'nggallery') ?> ►</a>
		</div>
		<div class="counter"><strong><?php echo $image->alttext ?></strong> <br /><?php _e('Picture', 'nggallery') ?>  <?php echo $image->number ?> <?php _e('of', 'nggallery')?> <?php echo $image->total ?> <br /> Click <strong>"Next" </strong>for more pictures</div>
		<div class="ngg-imagebrowser-desc"><p><?php echo $image->description ?></p></div>
	</div>

Can anyone help to keep my screen fix in the position of the image browser section?

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

Thread Starter craftpassion
(@craftpassion)

14 years, 7 months ago

Sorry, the correct link to the “post” should be http://www.craftpassion.com/2009/08/crochet-pattern-simple-hairband.html

Can anyone help???? PLEASE!!!!

yobeat
(@yobeat)

14 years, 7 months ago

I am having this same problem. I just upgraded to the latest nextgen in order to take advantage of the image browser, but would like only the images to reload, not the entire page. here is the post with a gallery:

http://www.yobeat.com/2009/09/viewed-and-reviewed-neverland/

thank you in advance!
celebpond
(@celebpond)

14 years, 7 months ago
you can keep the image in focus if you add a span tag in the imagebrowser.php and update the link for the prev/next buttons-
I added a span id of “picgallery” then added “#picgallery” on the end of the previous and next links.

Example: http://celebpond.com/?p=1579
```
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($image)) : ?>

<div class="ngg-imagebrowser" id="<?php echo $image->anchor ?>">
	<span id="picgallery"/>
	<div class="ngg-imagebrowser-nav">
		<div class="back">
			<a class="ngg-browser-prev" id="ngg-prev-<?php echo $image->previous_pid ?>" href="<?php echo $image->previous_image_link ?><?php echo $pid?>#picgallery">◄ <?php _e('Back', 'nggallery') ?></a>
		</div>
		<div class="next">
			<a class="ngg-browser-next" id="ngg-next-<?php echo $image->next_pid ?>" href="<?php echo $image->next_image_link ?>#picgallery"><?php _e('Next', 'nggallery') ?> ►</a>
		</div>
		<div class="counter"><?php _e('Picture', 'nggallery') ?> <?php echo $image->number ?> <?php _e('of', 'nggallery')?> <?php echo $image->total ?></div>
		<div class="ngg-imagebrowser-desc"><p><?php echo $image->description ?></p></div>
	</div>
<p><?php echo $image->alttext ?></p>
	<div class="pic"><?php echo $image->href_link ?></div>

</div>	

<?php endif; ?>
```
celebpond
(@celebpond)

14 years, 7 months ago

ps.. i’m a novice too so if anyone knows of a better way of doing this please let us know.

Thread Starter craftpassion
(@craftpassion)

14 years, 7 months ago

Hi celebpond,
You are awesome, I got it done!!!!
Thank you so much!!!!

rasmusjc
(@rasmusjc)

14 years, 7 months ago

I was seeking an answer on the same question as you craftpassion.

And it works out great celebpond.

So thanks for the answer (help)

aradams
(@aradams)

14 years, 6 months ago

Thanks celebpond for your solution. I found that instead of adding the empty span you can just assign the ID to to the div class pic to add the anchor:

<div class="pic" id="picgallery"><?php echo $image->href_link ?></div>

To use, just make a new file called imagebrowser-custom.php with your custom code, and in the page/post where you want to use the custom template put this:

[imagebrowser id=[x] template=custom]

asexiness
(@asexiness)

13 years, 11 months ago

I must be a bigger newbie than the others on here but I’ve tried doing this as instructed by @celebpond and I kept getting an error in line 33.

I could not try out @aradams suggestion because my knowledge does not reach that far.

What I need is for my page to refresh after people hit “next” on the pictures but for it to focus on the gallery upon refresh. Not for it to have people scroll down for each picture.

My blog is very picture heavy and people are having to scroll down each time and I know its a turn off.

THANK YOU!!