gpEasy Space Gallery Plugin

Update: I removed the demo from this site because of a slight conflict with IE. For some odd reason when the plugin is installed and I view my site with IE, IE minimizes and puts me back to my default browser. This doesn't happen if IE is your default browser or the only browser open. However, since I do a lot of testing between the different browsers it became very frustrating to have IE minimize every time I click anything on this site, thus testing IE was a pain.

For a live demo just follow the jQuery Spacegallery Plugin link below. I'm not sure why the plugin causes this slight issue with IE. I believe it has something to do with how gpEasy combines the JavaScript. Nonetheless, for all real world purposes this really isn't a problem.

This plugin utilizes the jQuery SPACEGALLERY Plugin to great a gpEasy CMS gadget that helps you implement this cool gallery easily. I thought this was a very cool and easy to use gallery so I made this plugin for gpEasy. It's very easy to use. Just add id="myGallery" class="spacegallery" to any element.

Example from the above demo:

<div class="spacegallery" id="myGallery">
	<img alt="" src="/data/_uploaded/image/gpeasy/misc/brain1.png" />
	<img alt="" src="/data/_uploaded/image/website/buddha_Original.jpg" />
	<img alt="" src="/data/_uploaded/image/website/chrome_darkjpg.jpg" />
	<img alt="" src="/data/_uploaded/image/website/firefox_eats_ie.jpg" />

That's all there is to this gallery plugin. It's uber simple to apply. Of course you can add more styling to it if you like. I've kept everything very close to the original jQuery plugin. One thing I did change in the style sheet that is significant is the overflow: .spacegallery {position:relative; /*overflow:hidden;*/}. As you can see I commented out the overflow:hidden; style, and you can see the results in the demo above. Larger images will overflow but I think that looks good; however, you will also note that the largest image hangs over the text of the element below it. This is because I did not set a height on the div for this demo. Of course you can always apply those styles right inline to the element that holds the images if you want the overflow hidden and images not hanging over the next element, easy enough.


Update: gpEasy 2.x introduces a few new things. If you find you have problems with this plugin. Try adding the gadget as a new section just before the section you have your images in. This should not be a problem when gpEasy 2.2 is released and you upgrade to the new version of this plugin.




Add gadget to new section

Some users are having problems utelizing these gallery plugins. It's important that you make sure you don't add the gadget for these plugins to a layout. Instead add them to the page that has the gallery. You do this by creating a new section, selecting file inclusion as the type then save. Then edit that newly created section for the file inclusion and add the gadget. See the following images for examples of how this page is setup.


gpEasy B2sq Theme by CS @True Acupuncture