... the only way that works is the first part your solution 3
I cannot explain why dynamically adding a link to one container on your page works fine whereas using the same technique to add exactly the same HTML link code to a different container on the same page fails.
1- the backButton / backButtonText be invisible on computers, and be visible on the iphone & tablet.
2- the link#2 be visible on computers and be invisible on tablet and iPhone.
You can use the Juicebox-Pro API method getScreenMode() to determine the Screen Mode being used (SMALL vs LARGE) and then run custom JavaScript code accordingly. This example removes the Back Button from the DOM in Large Screen Mode and adds a custom link which is overlaid on top of the gallery where the Back Button would normally be.
In Small Screen Mode, no custom JavaScript code is run and the gallery's own Back Button will display as normal.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<style type="text/css">
body {
margin: 0px;
position: relative;
}
#custom {
position: absolute;
top: 20px;
left: 20px;
z-index: 9999;
}
#custom a {
color: #ffffff;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '600px',
backgroundColor: '#222222',
galleryTitleHAlign: 'CENTER',
backButtonPosition: 'OVERLAY',
backButtonUrl: '../../testouille/clickautotest/clickautotest-2.html',
backButtonUseIcon: 'TRUE',
showSmallBackButton: 'TRUE'
});
jb.onInitComplete = function() {
var mode = jb.getScreenMode();
if (mode == 'LARGE') {
$('.jb-go-back').remove();
$('body').append('<div id="custom"><a href="../../testouille/clickautotest/clickautotest-2.html">return jori</a></div>');
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>If this does not work, then to do just what you have suggested in your points #1 and #2 above (no more, no less), then try the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '600px',
backgroundColor: '#222222',
galleryTitleHAlign: 'CENTER',
backButtonPosition: 'OVERLAY',
backButtonUrl: '../../testouille/clickautotest/clickautotest-2.html',
backButtonUseIcon: 'TRUE',
showSmallBackButton: 'TRUE'
});
jb.onInitComplete = function() {
var mode = jb.getScreenMode();
if (mode == 'LARGE') {
$('.jb-go-back').remove();
$('body').prepend('<a href="../../testouille/clickautotest/clickautotest-2.html">return jori</a>');
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>I hope this helps.