Newscoop 4 Cookbook

Image galleries with jQuery

This example is using a specific gallery solution working with jQuery. Once you understand the logic behind the code, you can use any gallery you want. Just download the package and add Newscoop template code where needed. This chapter will show you how it's done.

Our gallery example will display a number of images attached to an article in your publication. Again, you can modify the logic easily and, for example, call in one image from a list of articles instead.

Start with attaching a number of Images to an Article, which you want to show to the world. In this case we think of the Article as a container for your images. All you need to do is list_article_images and decide, how you want them to show up (Lightbox, Slimbox, whatever) - and that's it!

An important thing before you start is to decide what size (in pixels) your images and thumbnails will have. You will need these numbers set to make all images and thumbnails appear unified.

It's up to you to decide which tool you will use to make your images shine. In this example we will use Fancybox (http://fancybox.net/) and the jQuery plugin. But you are not limited in any way, and can choose any gallery you like - Newscoop will just provide images for your favourite plugin.

Simple Article Image Gallery

This type of image gallery could be used to show additional images, which are part of an Article, but do not fit in the main text.

Here's a real life example (http://ganc-chas.by/by/page/history/323) of how it's done (you can copy & paste it to your page, and edit it later):

{{list_article_images columns="4"}} {{if $gimme->current_list->count > 1}}   {{if $gimme->current_list->at_beginning}}     <div class="image-gallery-title">Article Images</div>     <div class="image-gallery-container">   {{/if}}   {{if $gimme->image->article_index > 2}}     <a href="{{uri options="image"}}" rel="gallery" class="gallery_thumbnail" title="{{$gimme->image->description|escape}}">       <img src="{{uri options="image"}}&ImageRatio=20" alt="{{$gimme->image->description|escape}}" width="100" height="100" />     </a>   {{/if}}   {{if $gimme->current_list->at_end}}     </div>   {{/if}} {{/if}} {{/list_article_images}}  <script type="text/javascript"> $(document).ready(function(){  $("a.gallery_thumbnail").fancybox({   type: 'image',   titlePosition: 'inside',   transitionIn: 'none',   transitionOut: 'none',   centerOnScroll: 'true' }); $("a.gallery_thumbnail").live("mouseenter",function(){$(this).animate({opacity:1},200);}); $("a.gallery_thumbnail").live("mouseleave",function(){$(this).animate({opacity:0.8},200);});  }); </script> 

Let's now take a look at parts of code:

{{list_article_images columns="4"}} {{if $gimme->current_list->count > 1}}   {{if $gimme->current_list->at_beginning}}     <div class="image-gallery-title">Article Images</div>     <div class="image-gallery-container">   {{/if}} 

We want to have article images placed in 4 columns. First, we check if the Article has images attached. Then we provide a header for the gallery and container <div> element.

{{if $gimme->image->article_index > 2}}   <a href="{{uri options="image"}}" rel="gallery" class="gallery_thumbnail" title="{{$gimme->image->description|escape}}">     <img src="{{uri options="image"}}&ImageRatio=20" alt="{{$gimme->image->description|escape}}" width="100" height="100" />   </a> {{/if}} 

In this example we will list only images with numbers 3 and higher - this is done to separate gallery images from the main article images. You can decide to have images for the gallery numbered 100 and above - it's up to you.

We need to provide Fancybox with a link to an original image (full size), and also a thumbnail image (&ImageRatio) to show to the user. We also supply class & rel names for Fancybox to define a group of image objects that should be used for the gallery. Other Image properties could also be included, like description in the above example. Finally, we close the list:

  {{if $gimme->current_list->at_end}}     </div>   {{/if}} {{/if}} {{/list_article_images}} 

That's pretty much it for Newscoop. Now let's go down to the jQuery part:

<script type="text/javascript"> $(document).ready(function(){  $("a.gallery_thumbnail").fancybox({   type: 'image',   titlePosition: 'inside',   transitionIn: 'none',   transitionOut: 'none',   centerOnScroll: 'true' }); $("a.gallery_thumbnail").live("mouseenter",function(){$(this).animate({opacity:1},200);}); $("a.gallery_thumbnail").live("mouseleave",function(){$(this).animate({opacity:0.8},200);});  }); </script> 

This example assumes that you already read the Fancybox HowTo (http://fancybox.net/howto) and included all necessary jquery and fancybox libraries. The rest is pretty simple - you just need to fire up the plugin, using jquery selector (a.gallery_thumbnail) and provide it with the different options you want to have.

Here we also added a few lines of code to make our thumbnails look even fancier. So the final result should look like this:

And when you click on an image, you have a bigger one with a description and arrows to navigate through the others:

Advanced Image Galleries

You can also make an advanced presentation of Images, using a few more lines of code and plugins. The approach should be the same:

  • Provide a list of links to full-size images (<a href="{{ uri options="image" }}"...)
  • Provide a list of thumbnail images (<img src="{{ uri options="image" }}&ImageWidth=100" width="100" ... />)

For example, you can combine thumbnails + average size images + full-size images: