Calling previous and next from anchors in html
  • Hi guys,
    This is awesome!! Thank you! Merci! My question has to do with calling the functions from html.
    I've called attempted to use [a onclick="prettyGalleryPrevious()"][img ... ][/a]
    and [a onclick="prettyGalleryNext()"][img...][/a] (where [] brackets replace <>)but it doesn't seem to work. If I use the navigation provided it works great!

    How do I call the functions to scroll the images from an anchor?

  • Hmmm

    I'd have to dust off the code because it's been a while since I played with it.

    I don't think the gallery navigations are publicly exposed.

    One thing you could do is
    $('.pg_next a').trigger('click');
    $('.pg_previous a').trigger('click');

    This will call all the click events on the button.

  • Thanks Stephane, I'll give that a try!
  • scaron,

    Can you please elaborate. I want to have an image trigger the next and previous. How would I code these?


  • The forum rendered my html instead of displaying the code. I basically want to know what goes into the href="#" of an anchor tag to trigger the previous/next functionality.
  • I got the solution for creating your own previous/next navigation using images and html links instead of the standard arrows and paging.

    1. For the next button, put the following as your href in the link: href="javascript: $('.pg_next a').trigger('click');"
    2. For the previous button, use href="javascript: $('.pg_previous a').trigger('click');"

    If you want to hide the default arrows and paging, open prettyGallery.css and add visibility:hidden; to each of the following classes:
    1) .pg_paging .pg_previous {
    2) .pg_paging .pg_next {
    Stop here if you want to remove just the arrows but keep the page numbers, or continue to remove the paging as well.
    3) .pg_paging .pg_next:hover {
    4) .pg_paging li {
  • Just noticed that the next/previous link only works in chrome, not IE or firefox. I'm sure it's a simple syntax but I'm not a javascript expert. Anyone have ideas?
  • OK. Hopefully the final answer... hope this helps others looking for a similar solution.

    Your link tag should have # as the href and the js in an onclick event like this:
    href="#" onclick="$('.pg_next a').trigger('click');"
    href="#" onclick="$('.pg_previous a').trigger('click');"

  • am using IE 8, and want to hide paging with Next Previous links as am successfully using next prev images.
    I tried to used Visibility:hidden in the above mentioned posts but invain.
    Any idea to remove such links.
  • Hi, I tried doing the above what you had suggested. The problem is I am having the prettyGallery in a datalist and now when click on the next image, even the gallery in the other rows of the datalist moves. How to write in such a way that each click is dedicated to each gallery. Please help.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter