You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → html text on a slide
Hi,
New to Juicebox - very good app and am using it in Dreamweaver with success - at least on my local server.
I'd like to put text onto the first "image" slide - but don't want it as a jpg. Is it possible to code in html text into a slide so that Google bots can pick up key words?
Cheers,
Seb
It sounds like you are looking to include SEO content in your gallery for web crawlers to pick up and index.
If so, select the 'Add SEO Content' checkbox in JuiceboxBuilder-Pro's 'Customize -> Sharing' section and use the embedding code provided on the 'Publish' tab (which contains the SEO content within the 'juicebox-container' div).
Please see here for further details.
Hi Steven,
Thanks for your advice - looks like I've got some studying to do!
Cheers,
Seb
Had a look at the SEO content part of JuiceBox Pro - it wasn't what I had in mind though.
Here's the page I'm working on: http://www.artwebstest.co.uk/joshjohn/pagham.asp
I want some text to show in the first slide of the gallery. I've done this by putting a blank image in for slide 1 and overlaying with caption text. There are some problems with this though:
1. When the browser is reduced in size, the caption disappears i.e. it doesn't re-size. Is it possible to edit the CSS media rules anywhere to compensate for this?
2. I've put a .jpg with bitmap text in the second slide - which does work on re-size but isn't as crisp as html text.
Also noticed that the swipe feature (to change images) does not work on IE11, Win8. Is this a known issue?
Cheers,
Seb
I see now what you are trying to do.
Unfortunately, it is not possible to treat the first image in a gallery any differently from all the other images.
You could perhaps add text as a caption and set captionPosition="OVERLAY_IMAGE" and use a large value for maxCaptionHeight to try to ensure that the text is displayed in its entirety. The caption area will resize as necessary (although the text within the caption area will remain at a constant font size).
Otherwise, you could perhaps use the Juicebox-Pro API and some custom CSS and JavaScript code to replace the first image with some custom text. For example:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container'
});
jb.onImageChange = function() {
if (jb.getImageIndex() === 1) {
setTimeout(function() {
$('.jb-dt-main-image').html('<p>Text to be displayed in place of the first image.</p>');
}, 250);
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->A short timeout is required for this to work correctly which means that the first image in the gallery will be displayed briefly before being replaced with the custom text but as long as the first image in the gallery is a blank image, this should hopefully not matter too much.
I hope you are able to use one of the suggestions above.
Also noticed that the swipe feature (to change images) does not work on IE11, Win8. Is this a known issue?
Yes. We are currently investigating Windows 8 touchscreen issues and hope to have a resolution for the next version of Juicebox.
Hi,
Thanks for the heads up on this. Unfortunately, I'm not a javascript programmer, so although I sort of understand the code you've written, I've no idea how to apply it to the page - or to link it to a js file. (I have tried to understand the API feature, but any advice would be appreciated, although I know it's not support you officially offer.) I'm OK at CSS coding though!!
Cheers
Seb
I'll try to break it down for you by commenting the code.
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
// Need to give 'juicebox' object a variable name (e.g. 'jb') so that you can refer to it later.
var jb = new juicebox({
containerId: 'juicebox-container'
});
// onImageChange function is fired each time a different image is selected.
jb.onImageChange = function() {
// If the selected image is the first one...
if (jb.getImageIndex() === 1) {
// Standard JavaScript timeout is required to work correctly. Need to wait a short while before image can be replaced.
setTimeout(function() {
// The next line uses jQuery (bundled within the 'juicebox.js' file) to replace the main image (class name 'jb-dt-main-image') with custom HTML code.
$('.jb-dt-main-image').html('<p>Text to be displayed in place of the first image.</p>');
}, 250);
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->I hope that makes it a little more understandable.
Essentially, you would give your 'juicebox' object a variable name (such as 'jb') and add the following code to your gallery's web page (below the gallery's embedding code), changing the HTML text as appropriate:
<script>
jb.onImageChange = function() {
if (jb.getImageIndex() === 1) {
setTimeout(function() {
$('.jb-dt-main-image').html('<p>Text to be displayed in place of the first image.</p>');
}, 250);
}
};
</script>I hope that helps.
Hi,
Works a treat!
Thanks. One more problem though.... when the browser is re-sized the text is replaced with original image - and you have to refresh the page to get the JS to fire again and return the text.
(To make the text seen, I had to give ".jb-dt-main-image" class some new rules - color: black; and font: arial;)
Thanks
Seb
Unfortunately, there will inevitably be unforeseen pitfalls when trying to make Juicebox do something it was not designed to do (especially when interacting directly with Juicebox CSS classes).
Perhaps the easiest way to overcome this problem might be to give your gallery fixed pixel dimensions (rather than percentage dimensions) so that the gallery is not resized dynamically if/when the browser window is resized.
Juicebox Support Forum → Juicebox-Pro Support → html text on a slide
Powered by PunBB, supported by Informer Technologies, Inc.