Automatically add
name="gallery" rel="gallery_gallery"
to all images on a page or site in gpEasy.

Update: gpEasy 2.x introduces gallery sections that can be added to any page. By adding a gallery section to a page Colorbox is enabled for any images that are linked on that page. Therefore, this tutorial is not necessary. If you don't want the gallery section visible just delete all images in it. It will still enable Colorbox.


This tutorial will show you how to us JavaScript to automatically append the <a href="/" name="gallery" rel="gallery_gallery"> to all images on a given page or site so they will be displayed by Colorbox in gpEasy.


By default in gpEasy Colorbox is only turned on for gallery pages. Therefore, you will need to add the following code to your theme to turn Colorbox on for all pages. Add this code before the get header code: <?php gpOutput::GetHead(); ?>

The code to turn Colorbox on for all pages:

<?php common::AddColorBox(); ?>

How to: open the theme's template.php file you wish to enable Colorbox for in your favorite or default text editor. Copy the above code and paste it in the theme just before the GetHead output function shown above.

The JavaScript code

The following code is JavaScript. It will automatically add the href, name, and rel elements to all images within the div it is placed. Here's the code:

<script type="text/javascript">
	var yourdiv = $("div.GPAREA");
	var images = yourdiv .find("img:not(a > img)");

	images.each(function i() {
	var $this = $(this);
	$this.wrap('<a name="gallery" rel="gallery_gallery" href="' + $this.attr("src") + '"/>');

How do you use it?

There are a couple ways to implement the JavaScript. You can implement it on a per page basis or add it to a theme. If you add it to a theme then it will be active on every page that theme is active on. The caution here is, if you put it in a theme know that pages with a large number of images on them will load slowly; therefore, I recommend implementing it only on the pages you desire.

Also notice the 'GPAREA' in the JavaScript code above. This is the div class that the code will work with, thus the code needs to come after that div is created by the GetContent output function: <?php $page->GetContent() ?>.

Remember you need to wrap any JavaScript with the opening and closing tags: <script type="text/javascript"></script>
Or save the code in a separate JS file and link to it. Example: <script src="/themes/common/File_Name.js" type="text/javascript"></script>
If you put it in a separate file make sure you remove the opening and closing tags: <script type="text/javascript"></script> 

Activating on a per page basis

  1. Copy the above JavaScript code and paste it into a text editor--this is a safety measure as the code here isn't pure text code and we want to make sure it is converted back to pure text.
  2. Copy the code from the text editor
  3. In gpEasy navigate to the page you want to put the script in
  4. Edit the page
  5. Click 'source' to see the source code view
  6. Paste the code at the very bottom of the page. It needs to come after all the images otherwise it won't work correctly.
  7. Make sure you wrap the JavaScript with opening & closing tags: <script type="text/javascript"></script>
  8. Now save the page.

You should now be able to click on any image in that page and it should open in Colorbox.

Activating on a per theme basis

  1. Open your theme's template.php file in a text editor
  2. Copy the above JavaScript code
  3. Paste the JavaScript code just after <?php $page->GetContent() ?>
    1. Just like the above example the code must come after the content is called. Make sure a </div> doesn't come between the JavaScript code and the GetContent. We want this code within the div that wraps your content so it will act only on the images in the page and not those in the sidebar or elsewhere.
  4. Make sure you wrap the JavaScript with opening & closing tags: <script type="text/javascript"></script>
  5. Save the template.php file
  6. Navigate to a page you have images on that uses the theme you just modified.
  7. Click an image

The image should open in Colorbox.


Did you do the prerequisite?

The code may not be pure code, sometimes a " or ' can be faulty. Especially if you skipped pasting it into a text editor first. Just replace them if necessary.

Otherwise about the only problem that may go wrong is placing the code outside of the GPAREA content div.

Please note that this script will not work on images that are already linked as that would be problematic. It acts only on a non-linked image. You will, of course, need to set a smaller size for the image in the page and Colorbox will open the full sized image.

You cannot use a thumbnail image. Colorbox displays the full size of the image that is embedded, thus a thumbnail will not display any larger; therefore, you must embed the full sized image and set the height and width attributes to the size you want displayed on the page and Colorbox will open the full size image and resize it based on the user's screen size. 

name Vs. rel

As of gpEasy 1.7 beta the attribute name="gallery" will open an image in Colorbox, assuming Colorbox is turned on for that page and it's linked properly (see more in the gallery tutorials), and rel="gallery_gallery" isn't needed. That is used to tie all images on a page into a "gallery" of sorts. It allows you to scroll multiple images in Colorbox, whereas name="gallery" by itself will open only the single image and you will not be able to move to the next image within Colorbox. There will be tutorials on Colorbox and gallery setting in the near future. 

Other Options

You can save the code in a .js file and call it into a page or theme with the link JavaScript: <script src="/folder/File_Name.js" type="text/javascript"></script>. If you do, make sure you remove the opening <script. . . and closing</script> from the *.js file.

gpEasy B2sq Theme by CS @True Acupuncture