Dynamically creating / clearing gallery

May 3, 2012 at 8:05 AM

Hi,

I am populating the gallery using images returned from an ajax call to a database. The first time I view the result everything is fine. However when I recreate the gallery using another set of images or even the same ones, it sets the main images to width and height of 0px and the thumbs container becomes only wide enough for one thumb with the others wrapping underneath. I think it is not re-initialising with the new images when recreated. Have you any advice?

 

	$("#galleryWrapper").empty();

		x = '<div id="gallery" class="ad-gallery"><div class="ad-image-wrapper"></div><div class="ad-controls"></div><div class="ad-nav"><div class="ad-thumbs">';
		x += '<ul class="ad-thumb-list">';

		for (i=0; i < oProperties[recNo].images.length; i++)
			{ 
			imageBig = "../databaseimages/propertyImages/" + oProperties[recNo].images[i].image;
			imageThumb = "../databaseimages/propertyImages/thumbs/" + oProperties[recNo].images[i].image;
			imageDesc = oProperties[recNo].images[i].description;
				
			x += '<li>' + 
			     '    <a href="' + imageBig + '" ><img src="' + imageThumb + '" class="image' + i + '" height="60" title="' + imageDesc + '" ></a>' +
			     '</li>';
			}
			
		x += '</ul></div></div></div></div>';

		
		$("#galleryWrapper").append(x);
		var galleries = $('.ad-gallery').adGallery({
			display_next_and_prev: false
		});

 

 

Coordinator
May 4, 2012 at 3:35 PM

AD Gallery was unfortunately not built with this in mind, so I'm not surprised that it doesn't work but it's on my todo list.

May 4, 2012 at 6:19 PM

Thanks for your reply. After much head scratching I have managed to make it work this way. My images are always of a fixed size, so I just "fixed" your code until it worked the way I needed. The main problem was the sizes of the images being reported as zero height and width, so I just forced the issue. The gallery works great for me, but if you manage to find the time to ever achieve it, I'd be first on the list to use it. I don't know if you are interested in seeing it or even if the rules allow for putting the link on here? Thank you anyway, I learnt a lot in the process of stepping through you plugin.

Coordinator
May 6, 2012 at 9:39 AM

I've looked into it a bit, and I'm not really sure what is causing this problem. Since you're constructing and appending the HTML elements before you initiate AD Gallery, it shouldn't make any difference whether you're creating the HTML dynamically or not.

Where in the code did you get the size reported as zero? Was it the same across all browsers?

Coordinator
May 6, 2012 at 12:00 PM

I've just commited a change which adds two new methods, addImage() and removeImage(). This enables you to add and remove images to a gallery after it has been initiated. Would this solve the problems you were having? I haven't made a release of it yet, but you can download it from the Source Code tab.

May 8, 2012 at 2:29 PM

Hi,

I have a test system http://www.newbury-properties.co.uk/feb2012/ which is around for another 2 weeks. This uses my butchered version of your code and works for my needs.

http://www.newbury-properties.co.uk/feb2012/index_original.html is identical, but uses your original ad-gallery code.

If you click on London, then the "search" button, you get a list of properties (all pretend data and photos). Clicking on "More info" brings up your ad-gallery. (Ground Floor Apartment, 316 Clifton Drive North, London, , FY8 2PB is a good one - it has more than 1 photo, just test data). With your original ad-gallery code the thumbs all appeared under each other and no big images appeared at all. This was the zero size issue. 

The population of the search results is all viewable at the moment as it is all ajax retrieval, should you wish to see what I have done.

Your 2 new methods should be just about perfect. Being able to use removeImage("all") would be truly perfect!

If my way of doing this is not the best, I'm happy to receive criticism as I am still a recent JQuery convert!

Cheers,

Simon

 

 

Coordinator
May 8, 2012 at 2:42 PM

Hi,
Adding a removeAllImages() method should be easy, I'll be sure to implement it in the next release.

May 8, 2012 at 4:09 PM

Thanks for your feedback, this whole process has been a good learning experience. There are so many ways to do things in jquery, choosing the right way can be as hard as the problem itself!

Coordinator
May 9, 2012 at 8:12 AM

Glad to hear that! jQuery, and Javascript in itself, sure is a beast to tame, but once you get the hang of it, it can be really beautiful.

Coordinator
May 10, 2012 at 5:50 PM

I've released 1.2.7 now, which contains removeAllImages().

May 31, 2012 at 3:01 PM

Sorry for the late reply. Thanks for doing this. Great plugin and thanks for listening!