JuxtaposeJS gotchas – charliejhadley

This post is part of my Building juxtaposer series — collating gotchas in the JuxtaposeJS package that will affect how the {htmlwidget} package is constructed.

Image size is defined for the containing <div>

Frustratingly, the size of the Juxtapose web element can only be set in the parent <div>. It cannot be set as an attribute of each image within the JavaScript code.

Here’s the raw HTML and JS demonstrating how to restrict the size of the web element:

<div id="logo-comparison" style="width:350px; height:350px;">
</div>

<script>
    slider = new juxtapose.JXSlider('#logo-comparison',
        [{
                src: "img/r-logo_old.png",
            },
            {
                src: "img/r-logo_new.png"
            }
        ], {
            animate: true,
            startingPosition: "50%"
        });
</script>

In the initial design for the package, the element size was set as follows:

juxtaposer(data,
           juxtapose_size = list(width = "100%",
                                 height = "100%"),
           starting_position = "50%",
           show_labels = TRUE)

Image sizes should be the same

The JuxtaposeJS library is designed to work with images of exactly the same size. When images are different sizes:

Container width: 400px
Left image size: 1344×960
Right image size: 922×2560

The less wide right image is not center justified as you might expect. The {juxtaposer} package keeps the R package as close to the original JavaScript package as possible for feature parity, so image alignment tweaks are not included.