1 Topic by Toooni (edited by Toooni 2015-04-17 14:25:50)

  • Registered: 2015-01-09
  • Posts: 10

Topic: Disable function when clicking on a thumb [SOLVED]

I want to disable the clickability of the thumbnails in screenmode small.

I found a workaround to do this, but no real solution. Maybe you can help me?
My workaround is a CSS property for the div-tag where the thumbnails are in (pointer-events: none).


Code:

<script src="galleries/libellen/jbcore/juicebox.js"></script>

<script type="text/javascript">
    new juicebox({
        baseUrl: 'galleries/libellen/',
        backgroundColor:'222222',
        containerid:'homepictures',
        galleryHeight:'100px',
        galleryWidth:'90%',
        screenmode: 'SMALL',
        showSplashPage: 'NEVER',
        showExpandButton: false,
        showOpenButton: false,
        useFullscreenExpand: false,
        imageClickMode: 'none',
        galleryTitle: ''
    });
    </script>


    
<div id="homepictures">
</div>

CSS:

div#homepictures{
margin-left: auto;
margin-right: auto;
pointer-events: none;
}

Example:
http://miss-iso.ch


Unfortunately this pointer-events: none is not a official CSS 3 definition. So CSS validator says that this is an error.
I hate errors (neither if they work in all browsers like pointer-events do) and therefore that is no solution for me :)



Can anybody help me to disable the clicks on thumbs with javascript?
Can you please let me know how this links on thumbs works? I doesn't see any hrefs or onclicks on this elements? Can you please let me know for which html element the links are defined for (classname or id?).

I want to do something like that:

<script type="text/javascript">
    document.getElementsByClassName('jb-idx-thb-container').onmousedown = new function ("return false");
</script>

...but i don't know on which elements i have to disable the onmousedown. Can you help me please?


Thanks and best regards,
Toni

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

Re: Disable function when clicking on a thumb [SOLVED]

The click handlers are generated dynamically by the 'juicebox.js' JavaScript file.
Try something like the following:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: 'juicebox-container'
    });
    $(document).ready(function() {
        jb.onInitComplete = function() {
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
        };
        jb.onThumbPageChange = function() {
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
        };
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Hopefully this will point you in the right direction.

Please note that my suggestion above uses jQuery. Juicebox comes with its own bundled version of jQuery (within the 'juicebox.js' file) so basic jQuery functionality is available as soon as the 'juicebox.js' file is loaded in the page (and without the need to explicitly include a separate jQuery JavaScript file).
However, if your web page uses any jQuery code at all, I would recommend including a separate jQuery JavaScript file (just in case we remove any jQuery functionality from the 'juicebox.js' file in the future).

3 Reply by Toooni (edited by Toooni 2015-04-10 13:19:25)

  • Registered: 2015-01-09
  • Posts: 10

Re: Disable function when clicking on a thumb [SOLVED]

Hi Steven,

Thanks for your reply.
Unfortunately this works not. The thumbs are still clickable.

I tryed this classes too, but this also works not:

jb-thm-thumb-image
jb-glry-id-0_thumb_0
jb-idx-thb-list
jb-idx-thb-container
jb-idx-show-area
jb-idx-thumbnail-container


Also i tryed this way:

    
$(document).ready(function() {
        jb.onInitComplete = function() {
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
            alert("Hello! I am an alert box!!");
        };
        jb.onThumbPageChange = function() {
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
            alert("Hello! I am an alert box 2!!");
        };
    });

I doesn't see the altert box. Looks like onInitCommplete and onThumbPageChange is never reached in SMALL mode?


If i try that:

    $(document).ready(function() {

            $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
            alert("Hello! I am an alert box!!");

    });

Then i see the alert, but Thumbs are still clickable.


Example with your javascript example in it:

http://miss-iso.ch/index.php?page=home

Line 170 with View-Source in Firefox.



Thanks for some more tipps,
Best regards,

Toni

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

Re: Disable function when clicking on a thumb [SOLVED]

You need to give your 'juicebox' object a variable name (such as 'jb' in my example above) so that it can be referenced by the API methods.
In your own web page's embedding code, change:

new juicebox({

... to:

var jb = new juicebox({

The second code example in your post above probably fails because you are trying to remove the click handlers at a time when the .jb-idx-thumb and .jb-idx-thb-frame classes do not yet exist on the page. The code needs to be put inside the onInitComplete() function (to ensure that the .jb-idx-thumb and .jb-idx-thb-frame classes are present before off('click') is applied to them).

  • Registered: 2015-01-09
  • Posts: 10

Re: Disable function when clicking on a thumb [SOLVED]

Uups :D   Many thanks for your help. Now its working when browser window is not resized after page is loaded.

If i resize the browser window after the page is loaded, the thumbs are clickable again.

I tryed to solve it this way:


<script type="text/javascript">
    var jb = new juicebox({
        baseUrl: 'galleries/home/',
        backgroundColor:'222222',
        containerid:'homepictures',
        galleryHeight:'100px',
        galleryWidth:'90%',
        screenmode: 'SMALL',
        showSplashPage: 'NEVER',
        showExpandButton: false,
        showOpenButton: false,
        useFullscreenExpand: false,
        imageClickMode: 'none',
        galleryTitle: ''
    });
    $(document).ready(function() {
        jb.onInitComplete = function() {
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
        };
        jb.onThumbPageChange = function() {
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
        };
    });

    $(window).on('resize', function(){
        $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
    });
</script>

Where ive done the error this time? :D
If i put an alert after the on resize, this works. So it seems like i have to replace $('.jb-idx-thumb, .jb-idx-thb-frame').off('click'); with some other code for the resize function.


Thanks,
Toni

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

Re: Disable function when clicking on a thumb [SOLVED]

When the browser window is resized, the thumbnails are redrawn (thumbnails may be added or removed from the current thumbnail page depending on the new size of the browser window) so you might need to wait a short while after the browser window is resized before removing the click handlers.
Introducing a short delay (such as 200ms) before running off('click') using window.setTimeout() should hopefully be a suitable workaround.

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
    containerId: 'juicebox-container'
});
$(document).ready(function() {
    jb.onInitComplete = function() {
        $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
    };
    jb.onThumbPageChange = function() {
        $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
    };
    $(window).resize(function() {
        window.setTimeout(function() {
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
        }, 200);
    });
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
  • Registered: 2015-01-09
  • Posts: 10

Re: Disable function when clicking on a thumb [SOLVED]

Hi Steven,

Many thanks for your help. This solved the problem at resizing the window.

Now only one problem is left. For touch devices, the thumbs are still clickable. Do you have any ideas how to deactivate it for touch too?


I tryed this:


    $(document).ready(function() {
        jb.onInitComplete = function() {
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('tap');
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('touchstart');
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('touchend');    
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('touchmove');    
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('touchcancel');
            $('.jb-idx-thumb, .jb-idx-thb-frame').unbind('touchstart');
            $('.jb-idx-thumb, .jb-idx-thb-frame').unbind('touchend');    
            $('.jb-idx-thumb, .jb-idx-thb-frame').unbind('touchmove');    
            $('.jb-idx-thumb, .jb-idx-thb-frame').unbind('touchcancel');            
        };
        jb.onThumbPageChange = function() {
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('tap');
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('touchstart');
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('touchend');    
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('touchmove');    
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('touchcancel');
            $('.jb-idx-thumb, .jb-idx-thb-frame').unbind('touchstart');
            $('.jb-idx-thumb, .jb-idx-thb-frame').unbind('touchend');    
            $('.jb-idx-thumb, .jb-idx-thb-frame').unbind('touchmove');    
            $('.jb-idx-thumb, .jb-idx-thb-frame').unbind('touchcancel');                
        };
    });
    $(window).resize(function() {
        window.setTimeout(function() {
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('tap');
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('touchstart');
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('touchend');    
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('touchmove');    
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('touchcancel');
            $('.jb-idx-thumb, .jb-idx-thb-frame').unbind('touchstart');
            $('.jb-idx-thumb, .jb-idx-thb-frame').unbind('touchend');    
            $('.jb-idx-thumb, .jb-idx-thb-frame').unbind('touchmove');    
            $('.jb-idx-thumb, .jb-idx-thb-frame').unbind('touchcancel');                
        }, 200);
    });

But this changes nothing for the mobile version. The thumbs are still touchable.
I doesn't find any more information about jquery and mobile. Can you please help me with that?

Thanks and best regards,
Toni

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

Re: Disable function when clicking on a thumb [SOLVED]

The only way I've been able to disable thumbnail clicking in Touch Mode is to include jQuery v1.11.2 in the web page and use the following code:

$('.jb-idx-thumb, .jb-idx-thb-frame').on('click touchstart', function(event) {
    event.stopImmediatePropagation();
});

It might not be a perfectly clean solution (you are, after all, trying to disable core Juicebox functionality and do something that Juicebox was not designed to do) but my own testing suggests that it should work fine. (It does not remove click or touch handlers but adds a new one which prevents all others from being executed.)

Please see this web page for details on how you can load jQuery into a web page: http://www.w3schools.com/jquery/jquery_get_started.asp

  • Registered: 2015-01-09
  • Posts: 10

Re: Disable function when clicking on a thumb [SOLVED]

Hi Steven,


Many thanks, your solution is working :)
I know that i try to disable core juicebox functions. I really appreciate that you nevertheless help me with that :)


If someone other wants to do the same, thats the javascript code for it:

    $(document).ready(function() {
        jb.onInitComplete = function() {
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
            $('.jb-idx-thumb, .jb-idx-thb-frame').on('click touchstart', function(event) {
                event.stopImmediatePropagation();
            });
        };
        jb.onThumbPageChange = function() {
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
            $('.jb-idx-thumb, .jb-idx-thb-frame').on('click touchstart', function(event) {
                event.stopImmediatePropagation();
            });
        };
    });
    $(window).resize(function() {
        window.setTimeout(function() {
            $('.jb-idx-thumb, .jb-idx-thb-frame').off('click');
            $('.jb-idx-thumb, .jb-idx-thb-frame').on('click touchstart', function(event) {
                event.stopImmediatePropagation();
            });
        }, 200);
    });


Thanks for your help. Have a nice weekend.


Best regards,
Toni

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

Re: Disable function when clicking on a thumb [SOLVED]

Thanks for your help.

You're welcome!

Have a nice weekend.

You, too!