Creating Picture Galleries with Clipped Images Using CSS Pointer Occasions and SVG

Posted by

Creating Picture Galleries with Clipped Images Using CSS Pointer Occasions and SVG

From on May 13, 2013

The current web is constantly changing, and this report is over two years of age.

If you click on on the TV in the picture below, you may observe that it includes a picture gallery created employing the jQuery Cycle Plugin. You may ask, “I have used this great plugin before, so what is the big deal?” Although this looks deceptively straightforward, the big deal about the fact that the gallery is currently sitting right into a DOM object and mouse events have been passed through it. The picture of Mr. Disney which you see this is a JPEG with the tv display trimmed out. Under that clipped area is the picture gallery. Once you click, blot, or perform some other actions with your mouse, these occasions will be passing through the picture and are captured by the picture gallery.

[iajsfiddle user =”remotesynth” fiddle=”xtDHe” height=”450px” width=”100%” show=”js,resources,html,css,result” skin=”default” series=”result”]

There are a few methods to do this together with the CSS pointer-event house and any variety of different graphic formats that supports clipping (e.g. SVG, canvas, PNGs with alpha-transparency). Every one of these technologies has the advantages and deal-breaking disadvantages of it. After quite a lot of research, I developed a method that is cross-browser (yes, it functions in IE7), was optimized for rapid animations in most browsers (not always easy, as we will see later in this article) and works well in cellular.

What Does the pointer-event Real Estate Do?

In HTML files, placing a DOM item’s pointer-event property to none will lead to virtually any mouse occasion to pass that object to the DOM object positioned underneath. This goes for both JavaScript occasions (e.g. click, mouseover, etc.) as well as CSS-related pseudo-class occasions (e.g. :hover, :active, etc.) The other value the pointer-event property could have in the HTML planet is visible, which allows the node to catch mouse events again.

Originally, the property that was pointer-event was intended to be utilized for SVG, allowing more fine-grained constraint of mouse events. More information about this may be seen around the Mozilla Developer Network’s site on SVG pointer-events.

Method #1: SVG

The first method is to use SVG to clip the picture. Programmers can embed the SVG directly


   
    id="disney-embed" patternUnits="userSpaceOnUse" 
       width="495" height="417">
          
    
  

fill="url(#disney-exude)" stroke="none"
      d="M 495.00,0.00
         C 495.00,0.00 495.00,417.00 495.00,417.00
           495.00,417.00 0.00,417.00 0.00,417.00
           0.00,417.00 0.00,0.00 0.00,0.00
           0.00,0.00 495.00,0.00 495.00,0.00 Z
         M 81.18,219.39
         C 75.28,224.66 73.26,233.55 71.61,241.00
           68.81,256.26 68.66,271.70 71.61,287.00
           72.76,294.37 74.47,301.98 79.68,307.70
           85.29,313.85 91.52,314.81 99.00,316.73
           99.00,316.73 126.00,321.96 126.00,321.96
           126.00,321.96 134.00,321.96 134.00,321.96
           134.00,321.96 144.00,323.00 144.00,323.00
           156.04,323.14 168.13,322.58 180.00,320.39
           187.27,319.04 193.58,317.17 198.20,310.91
           202.27,305.40 200.54,300.30 201.28,294.00
           201.28,294.00 202.00,244.00 202.00,244.00
           201.98,234.15 201.61,228.06 192.91,221.85
           187.58,218.04 176.56,216.51 170.00,215.41
           153.07,212.57 126.99,210.70 110.00,212.28
           101.11,213.56 88.05,213.25 81.18,219.39 Z" />

Note the two areas that are different. The picture we're concealing with is comprised in a label. The clipping path is included in the label. Note that the identifies this via its id in the fill feature.

How do we develop with the path? You may use an SVG instrument like Inkscape (which, incidentally, is accessible) or use another vector tool like Adobe Illustrator to perform the job. But for those of you like me that want something cheap and simple, take a peek at my post about how how to make SVG paths easily using The GIMP.

One may also save the SVG block as an .svg file and point to it using an label, like in the example below.


Your browser Doesn't support SVG

Here's a example so you can see the result:

[iajsfiddle user ="remotesynth" fiddle="rRg5e" height="450px" width="100%" show="js,resources,html,css,result" skin="default" series="result"]

The good thing about using SVG is the it works as expected -- pointer-event was initially developed to become an SVG just property. As a result, it moves the clicks through to the gallery beneath in most browsers except at IE8 and below (and in IE9-10 if you embed your SVG with the label like the illustration above). You're able to make it degrade gracefully by putting alternative markup at the label at which I currently have "Your browser doesn't support SVG" but doesn't help you in the event you are interested in getting the end result to look like the example at the start of the report.

Utilizing the embedded SVG is even worse, as there is not any alternative markup for IE7 and 8 to reveal. Older IE will even show a broken image as, as Lea Verou said in her blog article about standards based text-masking, IE corrects the label as a HTML tag, and    since there is not any src real estate, we get a broken picture.

There is one final issue with using SVG with this use-case: functionality. The animations beneath the transparent portion of an SVG element will slow down. If you compare the cartoon in the SVG example compared to other people in Firefox, then you will see a the SVG version drops a few frames. That can be authentic and under, which was the current production model at the time of this writing of this report.

Method #2: PNG

Programmers may use their preferred graphics editor save the result as a PNG and to clip the areas they want transparent . Here's a example so you can find out how this works:

[iajsfiddle user ="remotesynth" fiddle="4qRpb" height="450px" width="100%" show="js,resources,html,css,result" skin="default" series="result"]

From the example, I use CSS to place the pointer-event home of the image to none. Click the gallery using Chrome, Safari and Firefox and this may work as expected. Regrettably, Opera and IE (including 10) do not support the pointer-event property for HTML nodes, therefore this is worse that the SVG solution. Furthermore, PNG files are generally larger than JPGs for photographs, therefore this solution will not be optimal for really large images.

Method #3: polyClip.js

As I have said on previous blog posts, I've used polyClip.js to take a JPEG picture and clip components out and set the result interior of an HTML5 Swingcanvas> section. Does this offer you a better download speed compared to the PNG solution, but it has the added side-effect of letting mouse events through the transparent portion of the resultant picture in most versions of IE. That is because:

  • At IE 7-8, polyClip.js employs the excanvas polyfill to convert HTML5 Canvas API calls to VML. The sections of the
  • At IE9+, polyClip.js will render the clipped picture as an SVG. As long as the CSS land is set to none for all [] selectors, mouse events will proceed through.

Here's the way to perform the polyClip.js procedure:

  1. From the page you wish to include the picture in, insert the following

    The polyClip.js library requires jQuery in order to run. Even the excanvas library is included in conditional comments because it is only needed in IE8 and lower -- it is utilized to convert basic HTML5 canvas api requires to VML (more on this later). The concluding library, canvg.js, is utilized by polyClip.js to clip an SVG path in a picture.

    Note the data-polyclip-clippreference="svg" and data-polyclip-forcepointerevents="true" characteristics in polyClip.js's