Bootstrap Carousel - Different intervals for differnet slides

Problem:

Bootstrap Carousel is an easy and convenient option for implementing a slider on your website. But is there a way to advance the slides with different time intervals. For example, slide 1 will advance after 10 seconds, the second slide after 5 seconds and slide 3 to advance after 3 seconds. I came across a scirpting suggestion using the the carousel method with the 'pause' parameter. i.e. Pausing the slide advancing for amount of time computed as the slide timer as reduced by a the interval. But for some reasons this solution wasn't working for me. But I could have it working with a different approach, which is explained below, so that this will be useful for others as well.

Solution:

Instead of using the pause attribute, I tried using a script to advance the slides. i.e. advance the slides manually by calling carousel method the 'next' attribute. This can be accomplished in combination with the setTimeOut function. For e-g, something like this should help in having this working.

    var t;
    var start = $('#myCarousel').find('.active').attr('data-interval');

    t = setTimeout(function () { $('#myCarousel').carousel('next') }, start);

The block above will ensure that the first slide advances after the interval set for the first slide. Subsequent slide advances can be hanlded using the slid event as below.

    $('#myCarousel').on('slid.bs.carousel', function () {
     
        clearTimeout(t);
        var duration = $('#myCarousel').find('.active').attr('data-interval');

        t = setTimeout("$('#myCarousel').carousel('next');", duration);
    })


Hope this helps. Please to note that to have this working, use the data-interval attribute and set the desired interval in milli-seconds for each slide. e-g.

    <div class="item" data-interval="4000">


I have found this working fine with a single Carousel in the same page and have not tested this with multiple Carousels in the same page.

TIFF image support in HTML5

Question:

I am working on a requirement to display multi-page tiff image in a web application. We have been exploring the new canvas feature of html5 but find that handling multiple pages in the tiff image using canvas a bit of challenge. Please share some ideas in resolving this which would be a great help. You may direct me to javascript or such other resources that might help addressing this. Thanks in advance.

By: Nilima Jain

Answer: 

Though most browsers support the canvas feature of HTML5, the tiff format is not supported by all browsers, though IE supports it. So, first ensure you have an agreement on the supported browsers for which you are building this feature, or else you would need a plugin / control for handling tiff images. If you are taking the plugin or activex or applet route, then you have the liberty to make use of some of the client libraries and expose methods to interact with javascript calls from the browser and you are done.

Just in case you are fine with the browser support and are looking for using canvas for handling tiff, then try exploring the tiff.js library. Google also has a code library called tiffus. But I have not personally explored these libaries and you may spend some time trying out these whether these are of any help.

The other approach could be to try out the following approach:

Have a server side component with service APIs to be able to split the pages in the tiff image into multiple jpg images of the same resolution. This service API when queried without any specific page number would load the tiff image and have the pages parsed as individual images and would return the binary of the first page as jpg format. Similarly, the API, when queried with a specific page, it would ensure returning the specific page. The challenge with this approach would be that there would be more hits between the client and server. This can however be optimized by handling this process in-memory and thus minimizing the disk i/o on the server. This approach is likely to work with all browsers and the canvas feature can be leveraged as well.

However, if you have a specific browser to work with, for instance Internet Explorer, the best and easy approach would be to build an ActiveX control and wrapping the tiff image handling within it. In this case, the native windows imaging components might just suffice and no need for a third party library to handle the multi-page tiff image. This ActiveX component should expose necessary APIs, which can be invoked by javascript in response to various events at the client side.

There are quite a few third party commercial libraries to meet this need too.

Image Drag, Drop and Zoom using HTML5 Canvas

Question:

How can I perform drag and drop of images and the zoom in and out of images using HTML5 Canvas element?

By Iyappan Ranganathan

Response:

There are many free Javascript libraries out there to accomplish many drag and drop and other image manipulation features. The one that I have used and satisfied with is KineticJS library. KineticJS exposes events and methods to manage multiple layers, shapes, images, grouping which in combination would help achieve your needs. Specifically the dragstart and dragend events will be the ones you would be interested to implement the drag and drop feature. For zoom in and out you should be using the setScale method.

Check out these links demonstrating the needed features:

HTML5 Canvas KineticJS Scale Animation Tutorial

HTML5 Canvas Drag and Drop an Image

As I said, there are many Javascript libraries and you may pick the one that best suits your needs.

Zoom and Pan Background Image

Question:

We are working on a project that needs quite a bit of complex image handling in a web browser. For simple image viewing as a gallery there are quite many Javascript libraries out there. Our unique requirement is to load template images with standard body part markings and then allow medical practitioners to mark their observations against the specific body parts. With the introduction of canvas element, HTML5 has made this a little bit easier. As the use cases need us to have multiple layers of images and markers with ability to zoom and pan, we were exploring options to have the ability to zoom and pan a background image so that we would be able to overlay additional layers containing markers and labels on top of it. Can you suggest how to get this done?

Question by: Sangeetha Sundram.

Answer:

Kinetic Javascript library is a good candidate for accomplishing lots of image handling abilities that you have described here. It supports adding a wide ranging shapes and even SVG paths into layers and then on to a stage container. In terms of HTML, these are canvas elements.

Since your specific question is about the ability to zoom and pan the background image, I suggest the following approach using jQuery library:

Use the Mouse Move in conjunction with the Mouse Down and Mouse Up events to do the image panning. This can be accomplished by manipulating the background-position-x and background-position-y css properties based on the current mouse co-ordinates as the mouse move happens. Use the Mouse Down event to initiate the pan action and then Mouse Up event to stop the pan. It would be appropriate to use the Mouse Up on the document as against the specific element as moving outside the element's boundary should mean to end the panning.

For Zoom in and Out, the background-size is the css property that you should be manipulating and you may derive a suitable algorithm to set a higher (for Zoom In) or lower (for Zoom Out) percentage to this attribute and you will have the background image zoomed in or out accordingly. Depending on your needs, you may want to use the background-position property as well to have the image zoomed in at the point of click and thus keeping the point of click in the visible frame.

Check out the Javascript code in action for simple image pan here on jsfiddle. I have extended it a bit to make the pan to happen on mouse click and move (drag) and also for Zoom In and you can check this out here at jsfiddle. You may further improve this code to suit your needs and do share it here so that it will be useful for all the developers.

Hope this is of help to you.