publiclab / Leaflet.DistortableImage

A Leaflet extension to distort or "rubber sheet" images
https://publiclab.github.io/Leaflet.DistortableImage/examples/
BSD 2-Clause "Simplified" License
272 stars 285 forks source link

Fetch and display all the collection's images in the sidebar #1013

Closed PeculiarE closed 2 years ago

PeculiarE commented 2 years ago

On inputting a valid Internet Archive URL, the images saved in that collection should be displayed on the sidebar.

jywarren commented 2 years ago

Let's be aware that we'll need jQuery in there -- with <script src='https://code.jquery.com/jquery-3.6.1.min.js'></script>

and Leaflet used to use the same shortcut - $ so if both libraries try to, there could be an issue. Try inserting that code below the leaflet code so hopefully it overwrites Leaflet's use of $, and we don't have any trouble. But watch out if it says it $.get is not defined!

Quoting from https://github.com/publiclab/Leaflet.DistortableImage/issues/998 --

Code to fetch a gallery (CORS is now enabled for IA images) using jQuery $.get() function:

$.get('https://archive.org/metadata/texas-barnraising/',function(response) { console.log(response) })
{readyState: 1, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}

=> VM8221:1 {created: 1657632500, d1: 'ia600904.us.archive.org', d2: 'ia800904.us.archive.org', dir: '/27/items/texas-barnraising', files: Array(25), …}

// Then we add "https://archive.org/download/" + collection_name + "/" + filename like this:

i = new Image; i.src = "https://archive.org/download/texas-barnraising/IMG_0764.JPG";

=> 'https://archive.org/download/texas-barnraising/IMG_0764.JPG'
// That will redirect/resolve to something like: https://ia801507.us.archive.org/34/items/texas-barnraising/IMG_0764.JPG

i.width

=> 2592

See a full example returned response for the above query here: https://gist.github.com/jywarren/12d0d2b8483339e9c2c7b1ad635f6d79

PeculiarE commented 2 years ago

Hmmm...I used pure JS with axios instead. And yes, there's no clash of any sort. Is this okay, or must we use jQuery?

jywarren commented 2 years ago

It looks super, thank you!!

On Mon, Sep 19, 2022, 11:47 PM Peculiar Erhisohwode < @.***> wrote:

Hmmm...I used pure JS with axios instead. And yes, there's no clash of any sort. Is this okay, or must we use jQuery?

— Reply to this email directly, view it on GitHub https://github.com/publiclab/Leaflet.DistortableImage/issues/1013#issuecomment-1251800386, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAF6JZXOVAHJONCPVNWB7TV7EXVZANCNFSM57GJ7BFA . You are receiving this because you commented.Message ID: @.***>

PeculiarE commented 2 years ago

Alright! Thanks, Jeff 😄