• Registered: 21 Dec 2010
  • Posts: 295

Topic: Image gallery

Hi guys, we have built an image gallery that you can use with SimpleCMS.

You will need to have a basic understanding of HTML, CSS and JavaScript to set this up on your site.

Take a look at a working demo:
http://www.simplecms.com/examples/gallery/

The gallery uses jQuery lightBox plugin but you can use another if you wish.

SimpleCMS requires your HTML to be formatted exactly as in the example. You'll need a containing div with the edit-gallery class name which contains links to the large images and img tags to display the thumbnail images, e.g.

<div id="gallery" class="edit-gallery clearfix">
    <a href="img0_large.jpg" rel="lightbox"><img src="img0_thumb.jpg" alt="" /></a>
    <a href="img1_large.jpg" rel="lightbox"><img src="img1_thumb.jpg" alt="" /></a>
    <a href="img2_large.jpg" rel="lightbox"><img src="img2_thumb.jpg" alt="" /></a>
</div>

SimpleCMS will display the following button on each image:
http://www.simplecms.com/forumimages/gallery_buttons.jpg

Clicking on the image icon will allow you to edit the current image (as normal).
If you click on the + icon it will duplicate the image so you can add new images to your gallery.
If you click on the - icon it will remove the image from your gallery.

When you edit an image in your gallery and upload an image to the system it will create two copies of the image.

One copy will be the thumbnail which you can crop (as normal). The other copy will not be cropped but it will be re-sized to match the width of the existing larger image.

--

Short URL http://smplc.ms/gallery

  • Registered: 18 Jan 2011
  • Posts: 22

Re: Image gallery

Brilliant - Gonna' test this bad boy out on the weekend :)

  • Registered: 18 Jan 2011
  • Posts: 22

Re: Image gallery

This is great - really good work guys.

Was just wondering:

"The other copy will not be cropped but it will be re-sized to match the width of the existing larger image."

Has this got to apply? What if the you want the newly uploaded image to be a different size to the previous image? What if the existing image was a landscape photo and the new image your uploading is portrait?

  • Registered: 21 Dec 2010
  • Posts: 295

Re: Image gallery

Hi Richy, that has to apply. In a normal example, gallery images will be pretty much the same size so it made sense to automatically create the large version based on an existing gallery image.

If the image you replace was landscape and you upload a portrait then the width will be changed to match the landscape width and vice-versa.

This version of the gallery is only simple. We thought we would try it out and get some feedback before offering more advanced features like being able to edit the large image instead of the system creating the large image automatically.

We always like to hear your suggestions so feel free to post them.

  • Registered: 18 Jan 2011
  • Posts: 22

Re: Image gallery

Hey Simon, I completely get with your coming from.

Really pleased with the results and feedback I'm getting from clients.

If your taking suggestions: Perhaps a box in which you can enter a caption or description for the picture. You know the description that appears at the bottom of a lightbox. This would be a really nice feature. At the moment I'm having to go into the code and add a caption to each image on behalf of my clients.

Is this a possibility?

  • Registered: 21 Dec 2010
  • Posts: 295

Re: Image gallery

That's a good idea. We'll get this implemented within the next week.

  • Registered: 21 Dec 2010
  • Posts: 295

Re: Image gallery

Actually, I've just made the changes and put them live for you. How's that for some quick work!

You'll now see an input box when editing gallery images. This adds a title attribute to the link which is automagically picked up by lightbox.

Let us know what you think.

  • Registered: 18 Jan 2011
  • Posts: 22

Re: Image gallery

Excellent Simon,

You never seize to amaze me.

  • Registered: 18 Jan 2011
  • Posts: 22

Re: Image gallery

For whatever reason the image gallery's seem to be working fine in Chrome and Firefox but not in Internet Explorer. Instead of the Lightbox JavaScript box working it's simply opening the image in a new window.

Here are examples of the links:

http://www.bcakestudio.co.uk/wedding-cakes.html

and

http://www.fromtipstotoes.co.uk/photo-gallery.html

Any reason why this is happening?

  • Registered: 26 Jan 2011
  • Posts: 1

Re: Image gallery

This is awesome. I am currently working on two clients whom both need image galleries so this is a big plus. Simple CMS isn't so simple.

  • Registered: 21 Dec 2010
  • Posts: 295

Re: Image gallery

Hi Richy, I'm not sure what the IE error is. I see you're using a different version of Lightbox to the example. I noticed that when I click on an image lightbox starts to open and then the image loads in the page. Very strange. Also when I click in an empty area on the page the screen fades out like Lightbox is loading. I think there might be something wrong with your copy of Lightbox.

Zero2sixtee - I'm please you like it. SimpleCMS aims to offer more complex features but in a simple way that's easy for anyone to use.

  • Mitch
  • New member
  • Offline
  • Registered: 09 Feb 2011
  • Posts: 9

Re: Image gallery

What if, for example, I have a lightbox image gallery where the thumbnail is a completely different image from what pop-ups up when clicked on? Is there a way via the CMS that end users can define different images as the thumbnail, when what appears when popped up? (I'm sure this sounds srtange, as it defeats the purpose of "thumbnails", but I actually have multiple client sites where this is done).

Mitch

  • Registered: 21 Dec 2010
  • Posts: 295

Re: Image gallery

Hi Mitch, the system doesn't support editing of both images yet. We do have this planned for the future. I can think of a few situations where this would be helpful.

  • Mitch
  • New member
  • Offline
  • Registered: 09 Feb 2011
  • Posts: 9

Re: Image gallery

Thanks, Simon. I look forward to seeing this capability in SimpleCMS the future.

The overall capability to edit these lightbox galleries via the CMS is really brillant. Clients love it.

Mitch

  • Registered: 30 Aug 2011
  • Posts: 9

Re: Image gallery

I have some errors while using your gallery:

- When I duplicate an existing image and try to change this image it sometimes says: Can't change broken image. Somehow it seems that while copying the big image an error occurs. When I wait everything works fine.
- When I upload a new image, after uploading the dialog closes for 5 sec. When I click in this time it doesn't open again, and the upload doesn't work properly.

Simon

  • Registered: 21 Dec 2010
  • Posts: 295

Re: Image gallery

Hi Simon, we'll take a look. May I ask which browser and version you are using?

  • Registered: 18 Jan 2011
  • Posts: 22

Re: Image gallery

Hey guys is there currently a problem with the gallery.

Allot of my users are complaining saying that when they add a new image to a gallery. Their thumbnail changes but the larger image that opens remains the same as the image that was initially duplicated.

This can be found on a few of my cubicaquarium gallery, my bcakestudio gallery, my swpbasketball gallery just to name a few incase you wanna go and check it out.

  • Registered: 21 Dec 2010
  • Posts: 295

Re: Image gallery

Hi Richy, we've just investigated and fixed this problem for you. Please let us know if you have any further issues.

  • Registered: 21 Jun 2011
  • Posts: 11

Re: Image gallery

Hi - this features is working great for me. Awesome add!

  • Louie
  • New member
  • Offline
  • Registered: 04 Nov 2011
  • Posts: 7

Re: Image gallery

Hi Simon, can you please explain exactly how to implement this lightbox feature. I am not sure exactly where to place the div and code? Do I place the code from your system or my own html editor and where exactly is it placed? Also do I need a sepereate div for every photo? I apologise for my ignorance by the way but if it means asking a stupid question in order to figure this out I can handle the embarracement..lol.

cheers
Louie

  • Registered: 21 Dec 2010
  • Posts: 295

Re: Image gallery

Hi Louie, there's a working demo here:
http://www.simplecms.com/examples/gallery/

I think the easiest solution is to view the source of that page and copy the DIV with ID="gallery"

You will also need to download the JavaScript, CSS and Images which can be found here:
http://leandrovieira.com/projects/jquery/lightbox/

Sorry it's not much help, if you get stuck with that send us an email with the URL to the page and we'll get it sorted for you.

  • Registered: 01 Nov 2011
  • Posts: 6

Re: Image gallery

Hi, is there a way to disable the addition of additional pictures to a lightbox area?

  • Registered: 21 Dec 2010
  • Posts: 295

Re: Image gallery

We've just updated the system so you can edit the image without the options of adding/removing images. This allows you to edit a single image that uses lightbox and prevents your clients from adding/removing images.

To use this feature, simply add "single-gallery" class to the DIV, e.g.

<div id="gallery" class="edit-gallery single-gallery clearfix">
    <a href="large-image.jpg" rel="lightbox" title="Optional Title">
        <img src="thumb-image.jpg" alt="Alt Text" width="200" height="150" />
    </a>
</div>
  • Registered: 17 Feb 2012
  • Posts: 6

Re: Image gallery

My css is getting lost when I upload a new picture to the gallery. Example: rounded corners become square, etc.

Last edited by Wendy2 (11 Jul 2012 13:20:32)

  • Registered: 21 Dec 2010
  • Posts: 295

Re: Image gallery

Hi Wendy, can you please post / email us the URL of the page this is happening on so we can see your HTML / CSS before making changes in the CMS. This will allow us to compare before/after HTML.