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

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

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

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

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

6

(5 replies, posted in Juicebox-Pro Support)

What Google has in the webmaster tools documentation, and what google is really doing, are different things :)

Read here:
http://googlewebmastercentral.blogspot. … etter.html

Ok, i will post it in future requests.

Thanks for your answers.

7

(5 replies, posted in Juicebox-Pro Support)

Hi Steven,

Your answer is clarify the things, but is not a solution.
If the gallery-creator and the website-creator is the same person, your right, then you can use the index.html variant.

But if the gallery-creator and the website-creator are different persons, then you have to use the javascript variant to be sure that all the gallery settings are correct. You couldn't trust the gallery-creator (Photographer / Lightroom Plugin) that he is doing all the settings right. A photographer has photo knowhow. No SEO and website creation knowhow.


Additionally, the above described bug (alt="Path") instead of (alt="Picture-Title"), has asolutely nothing to do with SEO. This is a generally bug you have.
Writing a path to an alt of an img is wrong. If you couldn't fill in the title/description of the picture there, better let the alt="" empty.
Better have no results at google than having ugly results like that:

Libellen - miss-iso.ch
miss-iso.ch/index.php?page=libellen
galleries/libellen/thumbs/Libelle_Morgentau-3855.jpg. galleries/libellen/thumbs/Libelle_Morgentau_von_vorne-3888.jpg. galleries/libellen/thumbs/IMG_0433.


Thanks for creating a version 1.4.4 where no path is used in alt of <img>.

8

(5 replies, posted in Juicebox-Pro Support)

Hi Steven,

I have exactly the same problem too. I have the pro version and im using the javascript implementation method like described here:
http://www.juicebox.net/support/embedding/

To this javascript i added the option --> addSEOContent: "true"  like described here:
http://www.juicebox.net/support/config_options/


example part of my config.xml:

<juiceboxgallery
    shareFacebook="true"
    firstImageIndex="0"
    galleryTitle="Limikolen">
            
<image imageURL="images/IMG_1551.jpg" thumbURL="thumbs/IMG_1551.jpg" linkURL="" linkTarget="_blank">
            <title><![CDATA[Flussuferläufer]]></title>
            <caption><![CDATA[]]></caption>
            </image>

....

You can see, the title is "Flussuferläufer"


When im analysing what juicebox do (javascript implementation and index.html version):


<div class="jb-dt-main-image" style="position:absolute;top:0px;left:265px;height:678px;width:1016px;padding:0;overflow:hidden;border:none;box-shadow: 0px 0px 10px rgba(0, 0, 0, .4);">
             <img alt="galleries/limikolen/images/IMG_1551.jpg" src="galleries/limikolen/images/IMG_1551.jpg" style="height: 678.4px; width: auto; -moz-user-select: none;">
</div>

You see, the alt="" is the same as src="" .  Juicebox isn't using the <title> tag out of the config.xml.

How can i fix that?

9

(3 replies, posted in Juicebox-Pro Support)

Hi Steven,

Thanks for your anser. I already set showOpenImage = False.
The Problem is exactly what you describe, viewing the source code and then open the picture per direct url. Its so simple to do it with the developer tools which are included in each browser.


I will post it if i find a solution for that.

Thanks anyway,
Best regards,

Toni

10

(3 replies, posted in Juicebox-Pro Support)

Hi all,

Can someone help me please to protect my gallery from image copying?

I tried to do that with a htaccess file with the following content:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost [NC]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost.*$ [NC]
RewriteRule \.(gif|jpg)$ - [F]


But this works not. The gallery itself is affected too from this rule and do not work any more.

How can i protect my pictures without affecting the gallery itself?


Thanks for your help,
Best regards,

Toni