Tuesday, August 24, 2010

How to jQExtensions

UPDATE: jqextensions and the jQTouch photo gallery have been discontinued.

Recently I have received a few questions on how to perform certain tasks using jQExtensions and I thought it would be a good idea to highlight a few of them here in hopes that it will help more people out.


For the purpose of these examples #myphoto will reference a jQTouch Photo Gallery created by the following call

jQT.generateGallery("myphoto", [/*images*/], {/*options*/});

and #myscroll will reference a div with a vertical-scroll class like:

<div id="myscroll" class="vertical-scroll">

Hopefully that makes sense, let me know if it doesn't.

jQTouch Photo Gallery

Changing options after the gallery has been created

It's pretty simple really:

var options = $("#myphoto").data("jqt-photo-options");
options.slideDelay = 10000;

The options object will now be a reference to the options in use by the script, so any changes that you might make to this object take affect immediately in the execution of the gallery handlers.

jQT Scrolling

How to reset the scrolled element

$("#myscroll > div").trigger("reset");
That's it! Now the scrolled div will be returned to the initial position.

Add dynamic page with scrolling

If your application requires you to create "pages" dynamically in jQTouch, and you would like to still use the scroll extension on that dynamic page, just notify the extension that you have inserted a page like so:
$("body").trigger("pageInserted", {page: $("#my-new-page")});

More Questions

I will make every attempt to keep updating this list, if you have questions like this, feel free to leave a comment, and I will try to help if I can, thanks, hope you find it useful.