Jquery Help With Manipulating Nodes

[sonesay 7]

http://forums.xisto.com/no_longer_exists/ - mine

I've been trying to make a new type of gallery. The one I have requested help for previously is nice but I would still like to refine it a little bit so I set out to try and build one from scratch using TrueFusions idea. I dont mind using the JQuery library to help me build it but the problem is I have pratically no experience with it. I looked up API http://api.jquery.com/remove/ but it seems to remove all child nodes.

I have written my own shiftLeft() and shiftRIght() functions and it seems to work with no errors but it doesent seem to respond like when one clicks quickly. Is it trying to register double clicks or something? On TrueFusions original code using JQuery it doesn't seem to have this problem. i.e double clicks will cycle through images twice where is mine is ignored.

http://forums.xisto.com/no_longer_exists/ - truefusions code

I would like help in figuring out how to write my version of shiftLeft() and shiftRIght() in JQuery. I think with JQuery I would not have that miss click effect when I click twice. JQuery seems to be a very nice and light library.

function shiftLeft(){	var pf_thumb_items = document.getElementById('portfolio_gallery_image_container');	var temp_pf_thumb_item = pf_thumb_items.removeChild(pf_thumb_items.firstChild);	pf_thumb_items.appendChild(temp_pf_thumb_item);	}function shiftRight(){	var pf_thumb_items = document.getElementById('portfolio_gallery_image_container');	var temp_pf_thumb_item = pf_thumb_items.removeChild(pf_thumb_items.lastChild);	pf_thumb_items.insertBefore(temp_pf_thumb_item, pf_thumb_items.firstChild);}

Update: Actually I just realized TrueFusion's method was just changing the visibility of div's/nodes. My current way is actually removing and adding them to the other end. That is probably why the no response on every second click.
Edited February 1, 2009 by sonesay (see edit history)

[truefusion 3]

Update: Actually I just realized TrueFusion's method was just changing the visibility of div's/nodes. My current way is actually removing and adding them to the other end. That is probably why the no response on every second click.

Yeah, you don't need to create a temporary variable to mess around with the DOM. insertBefore() and insertAfter() does all the moving in the background, so you don't have to remove and append elements. I tested it out with my script and it works on the first click.
I've also been doing some extra modifications to my script to distribute and resize things more evenly for when there are multiple elements with different sizes. So far i got the parent's and buttons' height to resize based on the tallest child. Some bugs are still present and need to be fixed, though.

[sonesay 7]

Thanks a lot for pointing that out.

I got it working nicely with

function shiftLeft(){	jQuery("div#portfolio_gallery_image_container img:first-child").insertAfter(jQuery("div#portfolio_gallery_image_container img:last-child"));}function shiftRight(){	jQuery("div#portfolio_gallery_image_container img:last-child").insertBefore(jQuery("div#portfolio_gallery_image_container img:first-child"));}

If it can be shorten any further let me know thanks