ImageRatio parameter

The basic idea of MiniGallery?-Slideshow is to use ImageRatio parameter of CampGetImage class. Please read Campsite Manual 5.4.7.1. Displaying the URL for more info on that.

Now with 

<img src="{{ uri options="image 2" }}&ImageRatio;=30" />

image will be resized to 30% of original size, while the original 

<img src="{{ uri options="image 2" }}" />

will show image with original width and height.

Zoom

The simpliest way to utilize the functionality is to use Zoom option along with Lightbox JS by Lokesh Dhakar to add nice effect: 

<a href="{{ uri options="image 2" }}&ImageRatio;=30" rel="lightbox" title="my caption">
<img src="{{ uri options="image 2" }}" />
</a>

In this example we show a thumbnail image (30% of original size), and after clicking it we get full size image with Lightbox (overlay) effect.

More often you’ll need to show a number of images attached to the article. The only logical way to mark that images belong to galleries is to give them higher numbers, e.g. equal or greater than 100 (as basically nobody would show 100 or more usual pictures at once). Here’s a sample template script to show the images: 

{{ if $campsite->article->has_image(100) }}
  {{list_article_images}}
    {{if $campsite->image->article_index > 99}}
      <a href="{{uri options="image"}}" title="{{$campsite->image->description}} // {{$campsite->image->photographer}}">
      <img src="{{ uri options="image" }}&ImageRatio;=30" />
      </a>
    {{/if}}
  {{ /list_article_images }}
{{/if}}

Now we need to extend this script to make a real gallery or slideshow. There’s a nice JavaScript implementation out there that perfectly suits all the needs Featured Content Slider by Dynamic Drive.

All we need to do is basically put article images inside “contentdiv” like that: 

{{ if $campsite->article->has_image(100) }}
<link rel="stylesheet" type="text/css" href="contentslider.css" />
<script type="text/javascript" src="contentslider.js"></script>
<div id="slider1" class="sliderwrapper">
  {{list_article_images}}
    {{if $campsite->image->article_index > 99}}
      <div class="contentdiv">
        <a href="{{uri options="image"}}" title="{{$campsite->image->description}} // {{$campsite->image->photographer}}">
        <img src="{{ uri options="image" }}&ImageRatio;=30" />
        </a>
      </div>
    {{/if}}
  {{ /list_article_images }}
</div>
<div id="paginate-slider1" class="pagination"></div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["<", ">"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
{{/if}}

That’s it! You have a tiny gallery of article images. Further we just need to add styles and combine everything together.

TBC