Juxtapose question

Backlight 4 & 5 Support
#1

Hi all,

how to embed a Pangolin juxtapose image into a responsive grid framework?

Thanks in advance,
Best regards,
Oliver

#2

There’s no way I know of in Backlight to do that.

Maybe by publishing the Juxtapose album separately (hiding it from the album set) and then using the JSON API feature to insert it?

Maybe @Matthew or @Daniel will know how to do that.

#3

I think @Matthew mentioned that he plans to add Juxtapose to Kookaburra. That should do the trick.

If you’d like to give it a try, have a look at the function essay_script() {....} example in the phplugins-kookaburra-sample.php. It shows you how to design a new renderer. This can be used for Juxtapose as well. I did design a slideshow function for Kookaburra a while ago using my own renderer. So this can be done.

I know that this is not Pangolin. AFAIK, there is no similar infrastructure available in Pangolin. You could have a div with your own class with some custom data attributes:

<div class="my-juxtapose" data-photo1="file1.jpg" data-photo2="file2,jpg"></div>

Add some javascript code that puts the Juxtapose code to the div.

#4

Based on this concept, chatGPT offers following example code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Juxtapose Example</title>
    <link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
</head>
<body>
    <div class="my-juxtapose" data-photo1="file1.jpg" data-photo2="file2.jpg"></div>

    <script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
    <script>
        // Initialize Juxtapose on the div with class 'my-juxtapose'
        document.addEventListener("DOMContentLoaded", function() {
            var container = document.querySelector('.my-juxtapose');
            var photo1 = container.getAttribute('data-photo1');
            var photo2 = container.getAttribute('data-photo2');

            new juxtapose.JXSlider(container, [
                {
                    src: photo1,
                    label: "Before"
                },
                {
                    src: photo2,
                    label: "After"
                }
            ], {
                animate: true,
                showLabels: true,
                showCredits: false,
                startingPosition: "50%",
                makeResponsive: true
            });
        });
    </script>
</body>
</html>

I didn’t try the code. So no idea if it works, but it looks reasonable! Note, this works only for one slider per page. Don’t know how responsive it is!

#5

Thank you for your help!!!
I will play arround with this but I guess it might be better to wait for Matts upcoming Kookaburra compliant Juxtapose version :wink: :pray: :raising_hand_man: :partying_face: :roll_eyes:

best regards,
Oliver

1 Like
#6

Hi Matt,

when can we expect the implementation of Juxtapose in Kookaburra?

Best regards,
Oliver

#7

We are currently buttoning up Backlight 6 for a near future release. Juxtapose is going to be the first thing I work on for the 6.1 update after launch.

2 Likes
#8

Thank you Matt