1 (edited by jflynn 2015-12-28 01:09:14)

Topic: Thumbnails only for carousel?

Can I make a slider that looks like the one for the boat styles on http://henriquesyachts.com/ and shown in the attached screen shot?

That page is a disaster to don't get too dizzy by looking at the four or five motion objects on the page :)

Thanks

http://tinyurl.com/nkpucwn

Hmmm, can't seem to get my google photo to show up.

Here is my staging site http://henriquesfr9xks59mh.devcloud.acquia-sites.com/
The gallery on the top main is fine.  Down below, I want a thumbnail only slider like on the henriques.com site shown above.

Re: Thumbnails only for carousel?

Can I make a slider that looks like the one for the boat styles on http://henriquesyachts.com/ and shown in the attached screen shot?

Unfortunately, not (at least not easily).
If you disabled the thumbnails and used only the main images, then only one main image would be displayed at any one time (although you could overlay the captions on top of the images and associate a unique link to each image).
If you hid the main images (it is not possible to disable them via configuration options), then although you could size the thumbnails as you like and display several in a row, it would not be possible to overlay the captions on top of the thumbnails (you would need to make the text part of the images themselves) and it would also not be possible to link thumbnails to different web pages. (When a thumbnail is clicked, the corresponding main image is displayed in the gallery.)

You could try something like the following (using the Juicebox-Pro API and knowledge of the internal classes of Juicebox) to open an image's linkURL when the corresponding thumbnail is clicked.
However, Juicebox was not designed to do this and a couple of small delays are necessary to get this to work.
You would also need to hide the main images via CSS.

<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
    var jb = new juicebox({
        containerId: "juicebox-container"
    });
    jb.onInitComplete = function() {
        window.setTimeout(function() {
            $('.jb-idx-thumb').click(function() {
                window.setTimeout(function() {
                    var index = jb.getImageIndex();
                    var info = jb.getImageInfo(index);
                    var url = info.linkURL;
                    window.open(url);
                }, 500);
            });
        }, 500);
    };
</script>

I hope this points you in the right direction but please note that Juicebox was not designed to do this so getting it working exactly as you want it to might be quite tricky.

Re: Thumbnails only for carousel?

I see how the Jssor carousel does this now.  They use the concept of a multi-column main image area and use a skip interval to match the number of columns.

http://www.jssor.com/demos/carousel-slider.slider

Just something to keep in mind for the future feature list.

Re: Thumbnails only for carousel?

Just something to keep in mind for the future feature list.

Please post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
Thank you.