Sunday, 31 January 2016

Combining Justified Gallery and Swipebox in XPages for an amazing Image Gallery

This week is IBM Connect 2016 week. For everyone who is attending, lots of success and have a great time!


In this blog post I will give a basic setup on combining Justified Gallery and Swipebox in XPages to create an amazing Image Gallery. This question was recently asked by a client of us who worked a lot with various sizes of images and wanted to use these images in a great looking gallery in an XPages application.
Justified Gallery is a JQuery plugin that allows you to create an high quality justified gallery of images. Fill all the spaces!
A common problem, for people who create applications, is to create an elegant image gallery that manages the various sizes of images. Flickr and Google+ manage this situation in an excellent way, the purpose of this plugin is to give you the power of these solutions, with a new fast algorithm.
Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. For more information about Swipebox see my blog post 'jQuery in XPages: Using Swipebox A touchable jQuery Lightbox in XPages'. To use Swipebox with the Justified Gallery a listener for the jg.complete callback is needed, $('#swipeboxgallery a').swipebox();.

Setup in XPages
To use the Justified Gallery and Swipebox in XPages the Justified Gallery and Swipebox files must be downloaded and added to the WebContent Folder in the Package Explorer.
You can download the Justified Gallery files from GitHub : Justified Gallery
You can download the Swipebox files from GitHub : Swipebox
Next the JavaScript files and Stylesheets must be included on the XPage or Custom Control. In this example I add the files directly to the XPage.

<link rel="stylesheet" href="justified/css/justifiedGallery.css" />
<script src="justified/js/jquery.justifiedGallery.js"></script>
<script type="text/javascript" src="swipebox/js/jquery.swipebox.js"></script>
<link rel="stylesheet" href="swipebox/css/swipebox.css" type="text/css" />

To initialize the plugin you can use a simple script. In the example below I use some options.

$('#mygallery').justifiedGallery({
    lastRow : 'nojustify',
    rowHeight : 120,
    rel : 'gallery',
    margins : 3
}).on('jg.complete', function () {
    $('#mygallery a').swipebox({
    useSVG : false // false to force the use of png for buttons
});
});

Final Result
The final result is an amazing responsive image gallery using various sizes of images.

Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<link rel="stylesheet" href="justified/css/justifiedGallery.css" />
<script src="justified/js/jquery.justifiedGallery.js"></script>
<script type="text/javascript" src="swipebox/js/jquery.swipebox.js"></script>
<link rel="stylesheet" href="swipebox/css/swipebox.css" type="text/css" />
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div id="mygallery">
<a href="images/Photo1.jpg"><img alt="Nature 1" src="images/Photo1.jpg" /></a>
<a href="images/Photo2.jpg"><img alt="Nature 2" src="images/Photo2.jpg" /></a>
<a href="images/Photo3.jpg"><img alt="Nature 3" src="images/Photo3.jpg" /></a>
<a href="images/Photo4.jpg"><img alt="Nature 4" src="images/Photo6.jpg" /></a>
<a href="images/Photo5.jpg"><img alt="Nature 5" src="images/Photo7.jpg" /></a>
<!-- other images... -->
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script>
$('#mygallery').justifiedGallery({
lastRow : 'nojustify',
rowHeight : 120,
rel : 'gallery',
margins : 3
}).on('jg.complete', function () {
$('#mygallery a').swipebox({
useSVG : false // false to force the use of png for buttons
});
});
</script>
</xp:view>

More information about the Justified Gallery : Justified Gallery - Elegant, Fast, Endless

Monday, 18 January 2016

Upcoming XPages Webinars - Building Responsive Applications - Optimus XPages - Getting Started with the OpenNTF Domino API


A new year, new upcoming webinars! And it will be another great year! For the coming period the following webinars are scheduled.
For more information: T.L.C.C. XPages Webinar Series with Team Studio

Building Responsive Applications Using XPages
Brian Gleeson, IBM / Martin Donnelly, IBM
Date: February 16th - 10:30 A.M. to 12:00 P.M. Eastern U.S. time
Let Connect come to you! In this webinar Brian Gleeson from the IBM Development Team will present his Connect 2016 session.
Bootstrap was integrated into the XPages Extension Library in 2014 and has continued to rapidly evolve ever since. This responsive design capability empowers you to build the slickest Domino web applications ever - where the user experience dynamically adapts for the desktop, tablet or smaller mobile devices. Brian will show you how to quickly and easily transform your old applications into something that will impress your end users (and your boss)!

Optimus XPages: An Explosion of Techniques and Best Practices
IBM Champion John Jardin
Date: March 15th - 10:30 A.M. to 12:00 P.M. Eastern U.S. time
Starting a new XPages project but not sure it’s going to be done right the first time? Do you have an existing application that doesn’t seem to have that “X” Factor? In this webinar John will demonstrate how XPages developers can apply proven techniques and best practices to take their applications to a game changing level.

You will learn:
  • Rapidly develop responsive applications
  • Improve user experience and response times with background and multi threaded operations
  • Keep your XPages lightweight with code injection
  • Create scheduled tasks the XPages way
  • and much more...

Getting Started with the OpenNTF Domino API
IBM Champion Jesse Gallagher / IBM Champion Paul Withers
Date: April 12th - 10:30 A.M. to 12:00 P.M. Eastern U.S. time
Do you use Java in your XPages applications? Want to have a better way to access Domino data? Over the last year more and more developers have started using OpenNTF Domino Java API. In this webinar, Paul and Jesse, part of the team of developers working on this open source software project, will explain why you should be using the Domino API. Get a jumpstart into getting started with the Domino API and improve your XPages development experience!

For a complete listing of all T.L.C.C and Team Studio webinars of 2015, including slides and, if present, demo databases: Recordings of previous webinars



Saturday, 16 January 2016

Webinar Expanding XPages with Bootstrap for Ultimate Usability

My Webinar 'Expanding XPages with Bootstrap for Ultimate Usability' 'is scheduled on 25th May 2016, at 13:00 UK time, 14:00 European time. It will be a maximum one-hour presentation, approximately 45 minutes plus 10 minutes for questions, conducted through Connections Cloud meetings.
The webinar is part of the of technical enablement program for IBM Business Partners, #NewWayToLearn. I am very excited and already busy with the preparations for this webinar. During the coming period I will give more information about the webinar and the specific content of the webinar. I will also share some short videos, including demo databases regarding Bootstrap in XPages during the next period.

For more information about this program: Calling all IBM Champions.

Lastly to all fellow IBM Champions, if you have a subject you would like to present on, please contact Alan Hamilton (alan.hamilton@uk.ibm.com) for further information.

Friday, 8 January 2016

Calling all IBM Champions #NewWayToLearn

Today I came across this post on LinkedIn, Calling all IBM Champions by Alan Hamilton. A great idea and opportunity for all IBM Champions for presenting a topic in which they are an expert.


They are looking for a presentation of about one hour where IBM Champions can showcase an approach, technique, problem-solving solution, or other topic that relates to our collaboration or digital experience solutions. The IBM Champions will be doing the presenting via a webinar and will, of course, have full credit for the content.

So to all of you very much appreciated fellow IBM Champions, if you have a subject you would like to present on, please contact Alan Hamilton (alan.hamilton@uk.ibm.com) for further information. I already did :)

More information: Calling all IBM Champions