1 Topic by xxdohxx (edited by xxdohxx 2015-07-21 04:46:10)

  • Registered: 2015-07-21
  • Posts: 10

Topic: [Fixed, additional question added] Flickr search by tag

EDIT4: Newest question: anyone see a feasible way to show tags of the current image grabbed from Flickr?  I know the Flickr API can grab tags if you give it a photoID, but I'm not sure how to get to that point and integrate it.  As of now, a simple workaround I am thinking of is simply displaying the flickr photo's description and having all of the tags that are in it in the description as well as tagged.

EDIT3: I found a workaround--don't maximize and only use F11 on the keyboard in the browser for maximizing. This works well enough.

EDIT2: Secondary question:  is it possible to allow a "maximize" but still have a header? Thanks


EDIT: Solved.  I was copying the code but it wasn't working for me.  I had to change the location of my juicebox.js... woops.

Thanks,
John

I'd like to re-create essentially what is seen in the demos here: http://www.juicebox.net/demos/lite/flickr/

However, I would like to keep it limited to a single username and only allow the user to change the tags.  This will eventually be accompanied with some buttons that will input pre-selected tags, but for now, it would be exactly as in the demo.  I have juicebox Pro and I know I can use the gallery builder to get myself started, but how do I go about creating the gallery to change with a form like in the demo?

The ultimate goal is to have our entire Flickr account searchable by tags.  This will allow customers to look at examples of product at a kiosk like station.

Thanks,
John

  • Registered: 2012-04-24
  • Posts: 5,924

Re: [Fixed, additional question added] Flickr search by tag

Just a few quick notes to clarify things that you seems to have solved.

I would like to keep it limited to a single username and only allow the user to change the tags.

Just hardcode the flickrUserName (or flickrUserId) in the gallery's configuration options.

is it possible to allow a "maximize" but still have a header?

No. When expanding a gallery via the Expand Button, only the gallery (and no other elements on the page into which the gallery is embedded) is expanded. I'm glad you are happy with the F11 solution.

anyone see a feasible way to show tags of the current image grabbed from Flickr?

The first challenge is to get the Flickr photoId of the currently-displayed image in the gallery.
The only way I can see to do this is to extract it from the URL (generated dynamically to display the image) using the Juicebox-Pro API and jQuery (and knowledge of how Juicebox constructs the dynamically-generated code and what CSS classes it uses).

The next step would be to use the Flickr API (specifically the flickr.tags.getListPhoto method) to fetch the tags of the image.
Below is an example which displays a comma-separated list of Flickr tags for the currently-displayed image in a container below the gallery. You will need to enter your own Flickr User Name and API Key where noted in the code (replacing {your_flickr_user_name} and {your_flickr_api_key}). You will also need to include jQuery in your web page.
You can modify this to suit your own needs as necessary. I hope this helps.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        body {
            margin: 0px;
        }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript" src="jquery/jquery-1.11.3.min.js"></script>
        <script>
            var jb = new juicebox({
                containerId: "juicebox-container",

                // Enter your own Flickr User Name in the line below
                flickrUserName: "{your_flickr_user_name}",

                galleryHeight: "400",
                galleryWidth: "600",
                useFlickr: "TRUE"
            });
            jb.onImageChange = function(e) {

                // The internal image index used for dynamically-generated classes starts at zero so subtract 1 from public image index
                var index = e.id - 1;

                // Form CSS class for currently-displayed image
                var element = '.jb-dt-main-image-' + index;

                // Get URL of currently-displayed image from src attribute of <img> tag
                var src = $(element).find('img').first().attr('src');

                // Extract Flickr photoId from URL
                var id = src.substring(src.lastIndexOf('/') + 1, src.indexOf('_'));

                // Fetch tags of currently-displayed image using Flickr API flickr.tags.getListPhoto method
                // Enter your own Flickr API Key in the line below
                $.getJSON('https://api.flickr.com/services/rest/?method=flickr.tags.getListPhoto&api_key={your_flickr_api_key}&photo_id=' + id + '&format=json&jsoncallback=?', function(json) {

                    // Initialize tags array
                    var tags = [];

                    // Iterate over all tags
                    $.each(json.photo.tags.tag, function(i, data) {

                        // Add new tag to array
                        tags.push(data.raw);

                    });

                    // Display tags in output container
                    $("#output").html('<p>Tags: ' + (tags.length > 0 ? tags : 'None') + '</p>');

                }).fail(function() {

                    // Fail message
                    $("#output").html('<p>Cannot find tags.</p>');

                });
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
        <div id="output"></div>
    </body>
</html>
  • Registered: 2015-07-21
  • Posts: 10

Re: [Fixed, additional question added] Flickr search by tag

Steven,

First off, I want to say I am impressed with the speed at which you've responded to my inquiries.  I am really appreciative of it.

Second off, glad you clarified the hard-coding in case anyone comes into this thread in the future looking for answers.

The F11 solution does work fairly well for me so far and is producing results as expected.

Last night, I began a solution to get the tags using the Flickr API and some javascript and it looks like we were on the same track.  Your knowledge of the Juicebox construction makes it a lot more efficient than what I was doing, so I thank you for the input and will be adjusting.

Since I seem to have your attention, would you mind giving advice on another question?

My ultimate goal for this project is for it to be used in a "kiosk" like way with a large (perhaps 20-27" wide) touchscreen monitor.  I see under http://juicebox.net/tour/gallery/#input-modes that it automatically switches the input mode based on the device, but I am wondering how I would go about using a larger touchscreen device and forcing the correct input mode?  If I need to clarify at all, please let me know.  Also know that I have not yet located what hardware I will be using (and I am open to your input) on that as well.  Price point is not really an object here.  We want the smoothest operation as possible.

Also, something to note, is that since I allow users to dynamically search tags, we would need an on-screen keyboard or something popup whenever the field is clicked.  It seems like essentially what I want is a very large android or iOS touchscreen.

You've been very helpful, and I am incredibly impressed with the ease it's been so far to get my project going.  Defintiely worth the money I've spent already.

Thanks!
John

  • Registered: 2012-04-24
  • Posts: 5,924

Re: [Fixed, additional question added] Flickr search by tag

I am wondering how I would go about using a larger touchscreen device and forcing the correct input mode?

You can force the Screen Mode (via the screenMode configuration option) but it is not possible to force the Input Mode (although, if a touch-screen device is detected, you should be able to control the gallery with touch gestures).

... we would need an on-screen keyboard or something popup whenever the field is clicked.

This is something that you might need to look into independently of Juicebox. (It is not something that would be directly integrated with the gallery itself.)
Windows 8.1 has a built-in on-screen touch keyboard which can be enabled to appear automatically when an input field is selected in an app (though not in a desktop browser). This should work OK in Chrome when launched as an app.

(Incidentally, I have modified my code above to store the tags in an array which might be more useful if you need to refer to them later.)

  • Registered: 2015-07-21
  • Posts: 10

Re: [Fixed, additional question added] Flickr search by tag

Okay, sounds good Steven.  Thanks again for the responses.  I'm going to look into hardware now that I have the implementation setup how I want it and will try and see if I can't try it out before I purchase.

Thanks,
John

  • Registered: 2012-04-24
  • Posts: 5,924

Re: [Fixed, additional question added] Flickr search by tag

You're welcome!
I hope your project goes well.

7 Reply by xxdohxx (edited by xxdohxx 2015-07-26 00:01:18)

  • Registered: 2015-07-21
  • Posts: 10

Re: [Fixed, additional question added] Flickr search by tag

Steven, my project is going very well in fact.  It's transformed fairly quickly.

I've run into a few things, some of which aren't necessarily Juicebox, but one derives from what we've discussed here.  I have a few questions for you if you don't mind weighing in.

First, just a note. I ran into some issues with getting the pop-up keyboard to work in Chrome even when running it as  Windows 8 app.  I remedied it with this extension (in case others run into this issue) https://chrome.google.com/webstore/deta … ninn?hl=en.  It works well.

Second, you are right that it seems that with the touchscreen it is allowing the touch gestures (swipe transition).  However, I am running into a peculiar issue.  Every now and then it will not let me swipe on a picture.  I can't seem to figure out what causes it either.  I was wondering if you had any advice on how to debug this?

Next, getting the tags of the photos worked great and is working out how I intended.  However, whenever I first load the page, for whatever reason, they are not getting loaded.  I am not sure if 

jb.onImageChange

gets loaded on the first load of the gallery?   If I change the photo and then go back to the first photo, it will load the tags just fine.  To add to this, it seems like when this happens the description from Flickr also does not load--only the title of the photo.

On another un-related to Juicebox note, do you have any experience in generating the auth_token and api_sig for Flickr's api with their oAuth in javascript? I am using their api for flickr.tags.getListUserRaw which works great IF I copy directly from their api explorer but it seems the 

auth_token

and 

api_sig

expire after some time and will need to be re-generated.  I haven't been succesful in figuring this out just yet.  Just curious if you had used it before.

Thanks again for all the advice and help.  If it wasn't for you, I wouldn't be able to get this project off the ground.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: [Fixed, additional question added] Flickr search by tag

Every now and then it will not let me swipe on a picture.

I do not know what might be causing this (the ability to swipe to navigate should obviously be consistent across all images).
Just a thought but maybe the controls on the image overlay (or perhaps even the image overlay itself) is somehow interfering with the swipe gesture.
Try setting showImageOverlay="NEVER" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) to see if this makes a difference. If it helps, then you could maybe disable the autohide for the image overlay by setting inactivityTimeout="0" ('Customize -> Main Image') or allow the user to toggle the overlay on or off using the Info Button by setting showInfoButton="TRUE" ('Customize -> Button Bar').

However, whenever I first load the page, for whatever reason, they are not getting loaded.

onImageChange() is fired for the first image in the gallery but the initial search for the '.jb-dt-main-image-0' class might be happening before the element is present in the Document Object Model (DOM). Introducing a short delay (with setTimeout()) before searching for the '.jb-dt-main-image-0' class should work.
Try the following (which introduces a 100ms delay):

jb.onImageChange = function(e) {

    // Introduce short delay to ensure required class is present in Document Object Model
    window.setTimeout(function() {

        // The internal image index used for dynamically-generated classes starts at zero so subtract 1 from public image index
        var index = e.id - 1;

        // Form CSS class for currently-displayed image
        var element = '.jb-dt-main-image-' + index;

        // Get URL of currently-displayed image from src attribute of <img> tag
        var src = $(element).find('img').first().attr('src');

        // Extract Flickr photoId from URL
        var id = src.substring(src.lastIndexOf('/') + 1, src.indexOf('_'));

        // Fetch tags of currently-displayed image using Flickr API flickr.tags.getListPhoto method
        // Enter your own Flickr API Key in the line below
        $.getJSON('https://api.flickr.com/services/rest/?method=flickr.tags.getListPhoto&api_key={your_flickr_api_key}&photo_id=' + id + '&format=json&jsoncallback=?', function(json) {

            // Initialize tags array
            var tags = [];

            // Iterate over all tags
            $.each(json.photo.tags.tag, function(i, data) {

                // Add new tag to array
                tags.push(data.raw);

            });

            // Display tags array in output container
            $("#output").html('<p>Tags: ' + (tags.length > 0 ? tags : 'None') + '</p>');

        }).fail(function() {

            // Fail message
            $("#output").html('<p>Cannot find tags.</p>');

        });
    }, 100);
};

On another un-related to Juicebox note, do you have any experience in generating the auth_token and api_sig for Flickr's api with their oAuth in javascript?

No, sorry. However, I found the following quote on this Flickr help page: https://www.flickr.com/services/api/auth.spec.html

Authentication tokens can be set to expire by the user when they authenticate against the application. This is an advanced feature, hidden by default. Options are 1 hour and never. This may be set for different applications by policy in the future.

I hope this points you in the right direction.
These pages might also help:
User Authentication - https://www.flickr.com/services/api/auth.oauth.html
JavaScript Libraries for OAuth - http://oauth.net/code/ (scroll down to JavaScript section)

  • Registered: 2015-07-21
  • Posts: 10

Re: [Fixed, additional question added] Flickr search by tag

Steven,  I'll try hiding the image overlay and see if that helps the issue and will report back.  I'll also give the short delay a try and see if I can repeat the problem.  That particular problem seems to only happen when I first open the page.  If I just refresh, it works as intended, so you may be on to something.

Thanks for the links for the oAuth.  I have a friend who has some experience with it, as it turns out, so I will see if he can get me on the right track.  The links incidentally were already purple for me, but I think I'm just missing something in my attempt at it.

Thanks again for all the help!

  • Registered: 2015-07-21
  • Posts: 10

Re: [Fixed, additional question added] Flickr search by tag

Steven, just wanted to update you.  It turns out that the image overlay was the culprit (or at least I think so) because after using that option, I no longer have the issue with the swiping.

Also, for those that may see this, I ended up using http://oauth.io to help simplify the process of the flickr authenticated calls.

I haven't yet implemented the delay, but I think you are right and the solution should work.

Many thanks again,
John

  • Registered: 2012-04-24
  • Posts: 5,924

Re: [Fixed, additional question added] Flickr search by tag

I'm glad you've got the swiping working.
I've tested the delay myself and it seems to work fine. If you find that you are still having problems with it, try changing the delay time. 100ms seems to work OK for my own test scenario but it might be safer to set it to something like 200ms.

  • Registered: 2015-07-21
  • Posts: 10

Re: [Fixed, additional question added] Flickr search by tag

Steven,

It seems that setting the delay at 200ms gets the trick done.  Works like a charm.

My last and final battle which, may or may not be possible, is to allow for zooming in on the image with a pinch gesture.  From the forums, it seems like Juicebox does not support this.  Do you know of any workarounds?

Thanks,
John

  • Registered: 2015-07-21
  • Posts: 10

Re: [Fixed, additional question added] Flickr search by tag

xxdohxx wrote:

Steven,

It seems that setting the delay at 200ms gets the trick done.  Works like a charm.

My last and final battle which, may or may not be possible, is to allow for zooming in on the image with a pinch gesture.  From the forums, it seems like Juicebox does not support this.  Do you know of any workarounds?

Thanks,
John

Just replying to myself here to show others how I was able to solve this.  We are viewing the site on Google Chrome on a Inspiron 24 3000 Series All-in-One touchscreen computer.  It turns out that I can zoom in naturally with pinch gesture on Google Chrome on this computer, but the Juicebox was blocking it.  A simple solution was to add the following code to the body of my html page:

<div id="zoomDiv" style="position:absolute; top:50%; left: 50%; margin:-200px 0 0 -200px; width:400px; height:400px; background:transparent; z-index:90000;"></div>

This puts an invisible box in the middle of the screen (where the gallery center is) which allows pinch to zoom in that section only.  This should be intuitive for our users and does not interfere with the swiping function of the gallery.

I hope this may be helpful to someone in the future.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: [Fixed, additional question added] Flickr search by tag

Thank you for sharing your solution.

The following notes might not be relevant to your own scenario but they might be of interest to anyone searching through the forum for 'pinch-zoom' and landing here.

It should be possible to pinch-zoom an image within a Juicebox gallery but it can sometimes be quite difficult to do so. You would need to be very precise with your gesture as Juicebox uses its own gestures and the initial movement of a pinch-zoom action could be misinterpreted as the start of a swipe gesture to navigate within the gallery.

Also, you would need to ensure that the viewport of the web page has not been locked (which, for example, it would be by default for an expanded gallery on an iOS device).
For more information on expanded gallery behavior on iOS devices, please see here.

  • Registered: 2015-07-21
  • Posts: 10

Re: [Fixed, additional question added] Flickr search by tag

Steven,

Thanks for sharing.  Just a quick follow-up question.  Like we discussed, every now and then it would not load the tags.  This is clearly because the image has not been fully loaded into the DOM and the tags fails.  I am able to solve this by setting a delay on loading the tags, but unfortunately this causes clunky-ness on the page even on the images that don't need the extra loading.

Is it not possible to determine if the image is fully loaded yet?

Thanks,
John

  • Registered: 2012-04-24
  • Posts: 5,924

Re: [Fixed, additional question added] Flickr search by tag

Unfortunately, Juicebox-Pro was not designed with the intention that users could access and use internal classes so what you are doing is not officially supported. It just happens to be the only way I could think of for you to achieve your goal.
It looks like the onImageChange() function (which signifies that a new image has been selected) does not wait for the container with class .jb-dt-main-image-0 to be present in the DOM before being fired and so the only solution I was able to come up with was a short delay. As the delay seems to be necessary only for the very first image in the gallery, you could perhaps change the code so that the delay is used only once, when the gallery is loaded.

// Initialize counter
var counter = 0;

jb.onImageChange = function(e) {

// Set delay only on first image change
var delay = counter === 0 ? 200 : 0;

    // Introduce short delay to ensure required class is present in Document Object Model
    window.setTimeout(function() {

        // The internal image index used for dynamically-generated classes starts at zero so subtract 1 from public image index
        var index = e.id - 1;

        // Form CSS class for currently-displayed image
        var element = '.jb-dt-main-image-' + index;

        // Get URL of currently-displayed image from src attribute of <img> tag
        var src = $(element).find('img').first().attr('src');

        // Extract Flickr photoId from URL
        var id = src.substring(src.lastIndexOf('/') + 1, src.indexOf('_'));

        // Fetch tags of currently-displayed image using Flickr API flickr.tags.getListPhoto method
        // Enter your own Flickr API Key in the line below
        $.getJSON('https://api.flickr.com/services/rest/?method=flickr.tags.getListPhoto&api_key={your_flickr_api_key}&photo_id=' + id + '&format=json&jsoncallback=?', function(json) {

            // Initialize tags array
            var tags = [];

            // Iterate over all tags
            $.each(json.photo.tags.tag, function(i, data) {

                // Add new tag to array
                tags.push(data.raw);

            });

            // Display tags array in output container
            $("#output").html('<p>Tags: ' + (tags.length > 0 ? tags : 'None') + '</p>');

        }).fail(function() {

            // Fail message
            $("#output").html('<p>Cannot find tags.</p>');

        });
    }, delay);

    // Increment counter
    counter++;

};

Edit:
On further investigation, it looks like the Juicebox-Pro API method getImageInfo() returns the thumbURL successfully (but not the imageURL) so you should be able to extract the Flickr photoId from the thumbURL as follows. This avoids the need for any delay at all.

jb.onImageChange = function(e) {

    // Get image info for current image
    var info = jb.getImageInfo(e.id);

    // Get thumbURL for current image
    var src = info.thumbURL;

    // Extract Flickr photoId from thumbURL
    var id = src.substring(src.lastIndexOf('/') + 1, src.indexOf('_'));

    // Fetch tags of currently-displayed image using Flickr API flickr.tags.getListPhoto method
    // Enter your own Flickr API Key in the line below
    $.getJSON('https://api.flickr.com/services/rest/?method=flickr.tags.getListPhoto&api_key={your_flickr_api_key}&photo_id=' + id + '&format=json&jsoncallback=?', function(json) {

        // Initialize tags array
        var tags = [];

        // Iterate over all tags
        $.each(json.photo.tags.tag, function(i, data) {

            // Add new tag to array
            tags.push(data.raw);

        });

        // Display tags array in output container
        $("#output").html('<p>Tags: ' + (tags.length > 0 ? tags : 'None') + '</p>');

    }).fail(function() {

        // Fail message
        $("#output").html('<p>Cannot find tags.</p>');

    });
};

I have logged a bug report with the developers regarding the inability to fetch the imageURL from the getImageInfo() method when using Flickr as a source of images.

  • Registered: 2015-07-21
  • Posts: 10

Re: [Fixed, additional question added] Flickr search by tag

Steven wrote:

Edit:
On further investigation, it looks like the Juicebox-Pro API method getImageInfo() returns the thumbURL successfully (but not the imageURL) so you should be able to extract the Flickr photoId from the thumbURL as follows. This avoids the need for any delay at all.

jb.onImageChange = function(e) {

    // Get image info for current image
    var info = jb.getImageInfo(e.id);

    // Get thumbURL for current image
    var src = info.thumbURL;

    // Extract Flickr photoId from thumbURL
    var id = src.substring(src.lastIndexOf('/') + 1, src.indexOf('_'));

    // Fetch tags of currently-displayed image using Flickr API flickr.tags.getListPhoto method
    // Enter your own Flickr API Key in the line below
    $.getJSON('https://api.flickr.com/services/rest/?method=flickr.tags.getListPhoto&api_key={your_flickr_api_key}&photo_id=' + id + '&format=json&jsoncallback=?', function(json) {

        // Initialize tags array
        var tags = [];

        // Iterate over all tags
        $.each(json.photo.tags.tag, function(i, data) {

            // Add new tag to array
            tags.push(data.raw);

        });

        // Display tags array in output container
        $("#output").html('<p>Tags: ' + (tags.length > 0 ? tags : 'None') + '</p>');

    }).fail(function() {

        // Fail message
        $("#output").html('<p>Cannot find tags.</p>');

    });
};

I have logged a bug report with the developers regarding the inability to fetch the imageURL from the getImageInfo() method when using Flickr as a source of images.

Steven,

This works beautifully and is ultimately the best solution for me.  I am glad you were able to help me find it.

Just so you know, you alone have been worth double or triple the price of JuiceBox :)

Thanks,
John

  • Registered: 2012-04-24
  • Posts: 5,924

Re: [Fixed, additional question added] Flickr search by tag

You're welcome!
I'm glad I was able to help.