• Registered: 2013-05-31
  • Posts: 4

Topic: Load more images on demand

Hi guys,
I'm trying to load more images to the gallery as the user navigate through the images.
For a series of reason I don't want to load 50 images, but I want to load then on demand if the user navigate through it.

The config.xml is provided by one of our web servers that supports pagination.
I'm listening to the onImageChange and I can request the next 5 images and pre-prepend it to the gallery, but I don't see APIs that I can use to reload it with more content or add more.

I can try to re-create the entire gallery, but I'm trying a smoother approach to add more images, instead of recreating.

Has anybody done something along those lines?
BTW: we have JuiceBox pro.

Thanks in advance,
./Helio

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

Re: Load more images on demand

There is no method to dynamically add images to a gallery after it has initially been loaded.
Each time you add more images to your gallery, you would need to reload the gallery (using the standard JavaScript embedding code). On reloading the gallery, you could use the firstImageIndex configuration option to restart your gallery at an appropriate image.

  • Registered: 2013-05-31
  • Posts: 4

Re: Load more images on demand

Steven,
Thanks for the quick reply.
I was able to reload the image and set firstImageIndex to get new images, but the spinner while loading it didn't make the cut.
Somehow we initially had the understanding that for Flickr photos the library supports the pagination, that goes through flickrExtraParams. And since that was possible we could mimic our back-end to support what the library needs, but again it is like you said: I need to reload the library.
Perhaps that would be a great addition!!!!

Another thing I'm struggling is this: for LSM I don't want Splash page and I don't want to see thumbnail page: I want to go directly to the 'Detail Page', but I haven't been able to find a configuration that would send the user directly to it.

The rationale behind this is that the thumbnail page, although it neat, it is not appealing to engagement while the 'Details page' screams at you: INTERACT WITH ME!

Yesterday I think I saw in the JuiceboxBuilder another config param that seems to give me that, but I haven't tried it yet...

Do you know if it is possible to go directly to the detail page in LSM, instead of starting with the Thumbnails page?


Thanks in advance!
./Helio

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

Re: Load more images on demand

Do you know if it is possible to go directly to the detail page in LSM, instead of starting with the Thumbnails page?

The thumbnail page is displayed in Small Screen Mode only (and not in Large Screen Mode).
You can initially hide the thumbnail page in Small Screen Mode by setting showSmallThumbsOnLoad="FALSE".
You can also prevent users from accessing the thumbnail page by setting showSmallThumbsButton="FALSE".

You can force a particular screen mode to be used on all devices and in all browsers via the screenMode configuration option.

Also, you can disable the Splash Page by setting showSplashPage="NEVER".

Hopefully, with a combination of the above options, you will be able to have your gallery function as required.

For reference, a full list of configuration options can be found here.
For more information about screen modes, please see here.

  • Registered: 2013-05-31
  • Posts: 4

Re: Load more images on demand

Awesome Steven!
Thanks a lot!

I came across Splash screen a while back and I was already with showSplashPage="NEVER".

The stuff I'm working is primarily for SSM, so LSM will be a plus.
But now since I removed the thumbs completely on SSM I'm thinking of doing the same on LSM.
I looked over the config and for LSM I'm now using:
            showThumbsButton: "false",
            useThumbDots: "true",

So, here goes my 2 questions:
1. Is there a showThumbs config to hide it entirely on LSM?
2. Is there a method like getImageInfo(index) to get the thumbnail object (and returning its attributes, which probably is jus the imageURL)?

Thanks a bunch for your quick reply!

./Helio

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

Re: Load more images on demand

1. Is there a showThumbs config to hide it entirely on LSM?

To initially hide the thumbnails in Large Screen Mode, set showThumbsOnLoad="FALSE".
To hide the 'Toggle Thumbnails' button (to prevent users from toggling the thumbnails on and off) set showThumbsButton="FALSE".

2. Is there a method like getImageInfo(index) to get the thumbnail object (and returning its attributes, which probably is jus the imageURL)?

If you want to get the thumbURL of the image currently being displayed, you can use the Juicebox-Pro API methods getimageIndex() and getImageInfo() in conjuction with the onImageChange() event. You could then use JavaScript to determine more information about the thumbnail image, such as its dimensions.
For example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    jb = new juicebox({
        containerId : 'juicebox-container'
    });
    jb.onImageChange = function(e) {
        var index = jb.getImageIndex();
        var info = jb.getImageInfo(index);
        var thumb = info.thumbURL;
        
        var img = new Image();
        img.src = thumb;
        var w = img.width;
        var h = img.height;
        alert("Current thumbnail dimensions: " + w + "px x " + h + "px");
    }
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
  • Registered: 2013-05-31
  • Posts: 4

Re: Load more images on demand

Thanks Steven!
Your answers definitively helped me!

./Helio