The Issus Battle Gallery

Webf+ImageZone=Your gallery slider

This site is the home of Webf so I try to use them whenever is possible. ImageZone is built upon Webf. One of the features of ImageZone gallery sharing. To share a gallery, you should use the “Share Options” menu item in the Gallery Menu. Then you select the “Share” tab and finally press the button “Generate”. ImageZone will create a json object containing your gallery.

How to use shared gallery

The generated gallery is a sort of

<script type="text/json">....</script>

If you add the code into your page, ImageZone will recognize it (it search for script type text/json) and will open the gallery automatically. This is the standard behaviour, but you can also use the shared code to generate your own slider gallery. I will show how you could do that with Webf.

WebfBug

Webf is a way to create isolated and reusable html components. WebfBug, creates Webf from the web. So you have to install it. Once you have installed it, you can navigate the web and search for a good slider. I will try with the BBC one, just because I already use it into ImageZone. So open Firebug and find the containing html node webf-iimagezone_1

Dinamize the webf

WebfBug by default create a copy of the original html subtree, however we need a dinamic webf so we can use our own data. To do this, use the “Attribute Panel” in webfBug. Go to the first line “add new” and open the menu (on the right); click on “more” and select “Common attributes to variable” webf-iimagezone_3 This action, tell to WebfBug to generate code and convert some attributes to variable. Generally I use

$title,width,height,id,style,class,$src,$href,#text,-

which means: title, src, href and text node should be variables, while width, height id, style and class should be just copied; all other attrbiutes should be ignored. This settings is just for the current node, to extends it on every subnodes just go to “jsattrs” attribute, and using the right menu select “Assign to all descendant”. Now all subtree nodes are dynamic. webf-iimagezone_4 we can now try to see how the generated code will be. So select the “Template” panel and using the “Run” button choose one template engine generator. Depends on what you select you should have a code like:

var data = {
   "title": "Go to Top News story",
   "href": "http://www.bbc.co.uk/news/world-asia-22037844",
   "text": "Top News story",
   "href_0": "http://www.bbc.co.uk/news/world-asia-22037844",
   ...
   "text_43": " //// ') .p(''); return t; } var v=TAG(data); v.append(document.body);

The data variable (in this case javascript is the language I choose) contains the model for our gallery. So just change this data to make your own changes.

Generate Lists

WebfBug allow you also to generate lists. For example in this case, the list of images. To do that, go back to the “Attributes” panel, and choose the node node which contains the image list. We need two lists, the dot list and the image list. As usual click on the right menu and select “Make this a list”.

webf-iimagezone_6

WebfBug add a new attributes like:

item,list,0

which say Generate this node as a list, in the model call data “list”, use “item” as the iteration variable and use the first node as the template for all elements.

Then we can try to regenerate the code.

now you will have:

var data = {
   "title": "Go to Top News story",
   "href": "http://www.bbc.co.uk/news/world-asia-22037844",
   "text": "Top News story",
   "list": [{
         "href": "http://www.bbc.co.uk/news/world-asia-22037844",
         "text": "S Korea warships \'to track missiles\'",
         ...
         "title": "S Korea warships 'to track missiles'",
         "src": "http://ichef.bbci.co.uk/wwhomepage-3.5/ic/news/432-259/66760000/jpg/_66760964_66760920.jpg"}],
   "text_0": "Left",
   "src": "http://ichef.bbci.co.uk/wwhomepage-3.5/ic/custom-promo/432-259/promo_1mwn2_020113.jpg",
   "text_1": "Right",
   "src_0": "http://ichef.bbci.co.uk/wwhomepage-3.5/ic/news/432-259/66760000/jpg/_66760458_163800181.jpg",
   "list_0": [{
         "text": "1"}],
   ...
   };

So we are ready to generate our real code.

Generate the webf

Go to WebfBug and select the “Webf” tab. Click on customize ad select the following filters

webf-iimagezone_7

once you do that, choose “Close” from the “new filter” line. Then click on the “run” button to Generate the Webf.
After a while you will have the new Webf code. If you use a javascript template (with no external library requirement), you can just try to run the code. Open a new browser tab and start Firebug, go to the console and paste the webf code. Copy the stylesheets and run the code, than add manually the stylesheets on the html. You should obtain.

webf-iimagezone_8

Use it into HTML

You can add the webf into your code in this way. Just copy the webf into your html page and surround the javascript code with the script tag

    <div id="MyGallery"></div>
    <style ...>
    </style>
    <script type="text/javascript">
        var data = {
          "title": "Go to Top News story",
            ...
        };

        var v=TAG(data);
        v.append(document.querySelector("#MyGallery"));

this is the simplest way, otherwise you can save each stylesheet into a file and use the link tag.

Manage The Gallery

We have now a template for our gallery, but it is still a static gallery. You have to write your code, but it is quite simple, mine is:

 function setup(gid){
    $(document).ready(function(){
        var v=TAG(data);
        var id='#'+gid;
        var root = $(id);
        v.append(root[0]);
        var current=0;
        $('#promo2_carousel_items',root).css('width',data.list.length*824);
        function goto(current){
            var item=data.list[current];
            var prev=data.list[current>0? current-1: data.list.length-1];
            var next=data.list[current+1<data.list.length? current+1: 0];
            $(".nav_left",root).css('display',current>0? 'block': 'none');
            $(".nav_right",root).css('display',current+1<data.list.length? 'block': 'none');
            $('#promo2_carousel_items',root).animate({
                left: -current*824 },500,function(){
                    var item = $('dl[ix='+current+']',root);
                    $('a',item).attr('href',item.page).html(item.title);
                    $('.desc',item).html(item.comment);
                    $('.nav_right img',root).attr('src',next.src);
                    $('.nav_left img',root).attr('src',prev.src);
                    $('.carousel_itemList_li',root).removeClass("active");
                    $('.carousel_itemList_li[ix='+current+']',root).addClass("active");
            });
        }
        goto(current);
        $(".nav_right",root).click(function(){
            if (current+1<data.list.length){
                current++;
                goto(current);
            } else {
            }
        });
        $(".nav_left",root).click(function(){
            if (current>0){
                current--;
                goto(current);
            } else {
            }
        });
        $(".nav_right",root).css('cursor','pointer').mouseenter(function(){
            $(this).addClass('hover').css('width','123px');
        });
        $(".nav_right",root).mouseleave(function(){
            $(this).removeClass('hover').css('width','47px');
        });
        $(".nav_left",root).css('cursor','pointer').mouseenter(function(){
            $(this).addClass('hover').css('width','123px');
        });
        $(".nav_left",root).mouseleave(function(){
            $(this).removeClass('hover').css('width','47px');
        });
    });     
}
setup("MyGallery");

ImageZone intergation

The final step is to allow this gallery to use ImageZone shared gallery. First of all you have to change variables name in the gallery template.

you have the following fields. For the gallery:

  • “id”: is the unique id,
  • “current”: the current selected image,
  • “title”: the gallery title,
  • “tags”: list of tags,
  • “list”: is the list of images.

for each image:

  • “ix”: index in the gallery,
  • “src”: original image url,
  • “title”: image title,
  • “page”: original image,
  • “tags”: list of tags,
  • “width”: image width,
  • “height”: image height,
  • “link”: image link,
  • “comment”: image comment text.

then you have to load the gallery, you can do that simply adding this code in the setup function.

var script=document.querySelector("SCRIPT[type='text/json'][id="+gid+"]");
if (script){
    var gallery=JSON.parse(script.innerHTML);
    data.title=gallery.title;
    data.text=gallery.title;
    data.list=gallery.list;
}

the final code should looks like:

    <div id="GalleryId"></div>
    <style>...</style>
    <script type="text/json" id="GalleryId">...</script>
    <script type="text/javascript">
        function setup(gid){
            // datamodel definistion
            var data = {};
            // imagezone loader
            var script=document.querySelector("SCRIPT[type='text/json'][id="+gid+"]");
            ...
            // gallery template definition
            t.p("...")...
            // gallery management code
            $(document).ready(function(){...});
        }
       setup("GalleryId");
    </script>

Now you can make your ImageZone gallery, and share it on the web.

This is the final slider

The issus battle gallery code

Have fun.