Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 124
Registered: ‎11-05-2011
My Device: Z10, Bold 9900
My Carrier: Smartone

Is there a good Javascript image gallery framework for PlayBook?

Hi,

 

I am looking for using a javascript library to show images as a photo gallery. Is there a good framework for PlayBook?

 

I've looked at Galleria, http://galleria.io/, and tested it on PlayBook's browser. It's not always responsive to a swipe.

 

Is there any other tested alternative?

 

Thanks.

 

Tony

BlackBerry Development Advisor
Posts: 670
Registered: ‎10-01-2009
My Device: All
My Carrier: N/A

Re: Is there a good Javascript image gallery framework for PlayBook?

Hi Tony,

 

There are a lot of libraries out there for photo galleries, the majority of them seem to be jQuery based. 

 

Flux Slider is a pretty cool one, http://www.joelambert.co.uk/flux/

Developer
Posts: 124
Registered: ‎11-05-2011
My Device: Z10, Bold 9900
My Carrier: Smartone

Re: Is there a good Javascript image gallery framework for PlayBook?

Thanks, chadtatro. This one's effects do look good and work smoothly on a PlayBook.

 

I am also looking for a framework which provides controls for moving between photos, generating thumnails...etc. On the other hand, maybe it's not too difficult to code them ourselves directly. But it's always good to try out more existing stuffs.

 

Thank you.

Developer
Posts: 137
Registered: ‎12-22-2010
My Device: Curve 8520
My Carrier: Software Developer

Re: Is there a good Javascript image gallery framework for PlayBook?

I started a search for this for a while without any good results. Most plugins for JQuery resize on client side on-the-fly and this drives me in hard performance issues. My conclusion was to resize the images with a canvas object and save the thumbnail in local storage (base64). I am just to the beginning because it's not the focused issue in my app, but I can provide you my sample application (for Playbook).

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        function createThumbnail() {
            var img = document.getElementById("MyImage");
            var canvas = document.getElementById("MyCanvas");

            canvas.width = img.width * 0.25;
            canvas.height = img.height * 0.25;
            
            var ctx = canvas.getContext("2d");
            
            ctx.scale(0.25, 0.25);
            ctx.drawImage(img, 0, 0);

            var base64Field = document.getElementById("MyBase64Thumbnail");
            base64Field.value = canvas.toDataURL("image/jpeg");
        }

        function showDataUrl() {
            var newImage = document.getElementById("MyNewImage");
            var base64Field = document.getElementById("MyBase64Thumbnail");

            newImage.src=base64Field.value;
        }


    </script>
</head>
<body>
    <img id="MyImage" alt="Koala" src="Koala.jpg" /><br />
    <input type="button" value="Thumbnail" onclick="createThumbnail();" /><br />
    <canvas id="MyCanvas">
    </canvas><br />
    <input type="text" id="MyBase64Thumbnail" /><br />  
    <input type="button" value="Show Data URL" onclick="showDataUrl();" /><br />
    <input id="MyNewImage" type="image" />
</body>
</html>

 JSGallery.jpg

Developer
Posts: 124
Registered: ‎11-05-2011
My Device: Z10, Bold 9900
My Carrier: Smartone

Re: Is there a good Javascript image gallery framework for PlayBook?

Thanks, Levion. That's a good demo to show how to generate a thumbnail and save it as well.

 

I am also looking for sample implementations which you can swipe to move the next slide. It's rather easy to capture the touch events but making the image slides while your finger move with inertia is not trivial.

Developer
Posts: 137
Registered: ‎12-22-2010
My Device: Curve 8520
My Carrier: Software Developer

Re: Is there a good Javascript image gallery framework for PlayBook?

My base framework is JQuery Mobile so I would search for an embedded solution. There is a library called photoswipe. To combine it you could show in overview the minimized thumbnails from local storage and the original version after clicking.