You're welcome!
I'm glad you've found a suitable way to integrate the languageList into your workflow.
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
You're welcome!
I'm glad you've found a suitable way to integrate the languageList into your workflow.
There are still $ characters which should be replaced with jQuery in the thumbsStatus() function. Apologies for missing them first time around.
Change:
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();... to:
var windowWidth = window.innerWidth ? window.innerWidth : jQuery(window).width();
var windowHeight = window.innerHeight ? window.innerHeight : jQuery(window).height();I am still hopeful that this is the root of the problem and that changing all instances of $ to jQuery in the custom code will work.
Also, it might help to check your web page with the W3C Markup Validation Service and fix any errors reported.
(I notice that there is an opening <div> tag before the <head> tag on your web page which should not be there.)
Rather than copy and paste the SEO content code generated by JuiceboxBuilder-Pro into your web page, you could do something like the following.
(1) Add the following code to your web page (inside the <div id="juicebox-container"></div> where you would ordinarily paste the SEO content code):
<?php include("juicebox-seo.php"); ?>(2) Create a new file named 'juicebox-seo.php' which loads the gallery's 'config.xml' file, parses the file, dynamically generates the SEO content code from the XML file's content and outputs it to the web page.
This method was first used for SimpleViewer (which does not generate SEO content code) by Mikael Kjellstrom on this web page.
I modified his code for use in Juicebox (before JuiceboxBuilder-Pro featured SEO support). Here it is:
<?php
######################################################
# Project: SimpleViewer SEO Gallery Plugin #
# Version: 2.02 #
# Author: Mikael Kjellstrom #
# License: Copyright (c) 2010 Mikael Kjellstrom #
######################################################
######################################################
# Adapted for Juicebox by Steven Speirs, 2013 #
######################################################
$imgpath = 'http://www.yourdomain.com/pathtogallery/'; // The path to the gallery
$altmaxchars = "50"; // The maximum characters of the TITLE and ALT tags taken from the title and caption
$doc = new DOMDocument();
$doc->load( 'config.xml' );
$gallery = $doc->getElementsByTagName( "juiceboxgallery" );
foreach( $gallery as $gallery ) {
$gallerytitle = $gallery->getAttribute('galleryTitle');
}
print "<div id=\"jbseo\">";
print "<h1>$gallerytitle</h1>";
$images = $doc->getElementsByTagName( "image" );
print "<ul>";
foreach( $images as $image ) {
$largephoto = $image->getAttribute('imageURL');
$photo = $image->getAttribute('thumbURL');
$titles = $image->getElementsByTagName( "title" );
$title = $titles->item(0)->nodeValue;
$alttitle = substr($title, 0, $altmaxchars);
$pos = strrpos($alttitle, " ");
if ($pos>0) {
$alttitle = substr($alttitle, 0, $pos);
}
$title = htmlspecialchars($title);
$alttitle = htmlspecialchars($alttitle);
$captions = $image->getElementsByTagName( "caption" );
$caption = $captions->item(0)->nodeValue;
$altcaption = substr($caption, 0, $altmaxchars);
$pos = strrpos($altcaption, " ");
if ($pos>0) {
$altcaption = substr($altcaption, 0, $pos);
}
$caption = htmlspecialchars($caption);
$altcaption = htmlspecialchars($altcaption);
print "<li style=\"list-style-type: none;\"><p><a href=\"$imgpath$largephoto\" target=\"_blank\"><img src=\"$imgpath$photo\" alt=\"$altcaption\" title=\"$alttitle\"/></a><br />$title<br />$caption</p></li>";
}
print "</ul>";
print "<p style=\"font-size: 10px;\">© 2010 · <a href=\"http://www.mkwebdesign.ca/tutorials/making-simpleviewer-seo-friendly/\" target=\"_blank\">Powered by SimpleViewer SEO Gallery Plugin</a></p>";
print "</div>";
?>You could modify this PHP script so that it can be used for different galleries by passing the path to each gallery as a query string. For example, for one gallery you could use something like the following (you may need to encode the 'path' variable):
<?php include("juicebox-seo.php?path=http://www.example.com/gallery1/"); ?>... and then in the script, change:
$imgpath = 'http://www.yourdomain.com/pathtogallery/'; // The path to the gallery ... to:
$imgpath = $_GET['path'];I hope this points you in the right direction.
Sorry. I missed a $. I've corrected my post above. Try:
jQuery(document).ready(function() {
thumbsStatus();
jQuery(window).resize(thumbsStatus);
loadGallery(a, b, c);
});Just a little bug in the last if-statement: i´ve changed "LEFT" to "Right" (in order to change the thumbs to the place they were before).
Thank you for pointing this out. I've now changed the error in my original post.
In the frontend, the <div id = "juicebox-container"> </ div> remains empty: - ((
The problem is likely to be that WordPress loads its own version of jQuery into your web page and you might have to change:
$(document).ready(function() {
thumbsStatus();
$(window).resize(thumbsStatus);
loadGallery(a, b, c);
});... to:
jQuery(document).ready(function() {
thumbsStatus();
jQuery(window).resize(thumbsStatus);
loadGallery(a, b, c);
});... in order to use this jQuery code in your WordPress web page.
Unfortunately, neither JuiceboxBuilder-Pro nor the Lightroom plugin feature support for the languageList configuration option in their interfaces.
(It is possible to include a custom languageList in WP-Juicebox as the gallery settings window has a Pro Options text area where you can manually enter any configuration option.)
However, after creating a gallery with the Lightroom plugin, you can open the gallery's 'config.xml' file in a plain text editor and add the languageList option as an attribute to the opening <juiceboxgallery> tag.
Alternatively, if you want your custom languageList to appear in all galleries created by the Lightroom plugin, you can modify the template file that Lightroom uses to generate the 'config.xml' files.
Open the 'juicebox_pro.lrwebengine/config.xml' file in a plain text editor and add your custom languageList on line 34 (after the opening "<juiceboxgallery") which is currently blank. The line number refers to the current version of the Lightroom plugin (v1.4.4.2).
For reference, more information about the languageList option can be found here.
Instructions for how to manually set configuration options can be found here.
@tejas.rana
Please see my reply to your query in this forum thread.
I apply height in percentage.
Please see this note regarding Using Percentage Heights.
but now it look stretch
If you use imageScaleMode="FILL", then images will be cropped to fill the gallery's image area.
If you want your images to be scaled within the gallery's image area without cropping and respecting their aspect ratios, then set imageScaleMode="SCALE_DOWN" (or SCALE if you want smaller images to be scaled up).
With imageScaleMode set to FILL, SCALE_DOWN or SCALE, images should not be stretched. If they are, then please check to see if you have any custom CSS rules on your web page which the gallery is inheriting and which are affecting the display of your gallery images.
there is huge gap show between slider and thumb images
Please see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?
also in MAC's Safari the caption is not working properly
Please explain what you mean by "not working properly". (For example, are the image captions invisible in Safari but visible in all other browsers or is the problem something else, such as caption placement?)
I hope the notes above will help but as you seen to be having so many different issues, it sounds like you might have some custom CSS rules on your web page that are affecting your gallery in many different ways.
Try viewing your gallery on a page of its own (using the 'index.html' page generated by JuiceboxBuilder-Pro) to see if the problems occur only when you embed the gallery in your own web page.
Also, it would be much easier to troubleshoot your problems if I were able to see your gallery for myself so please post the URL to your gallery so that I can investigate further. Thank you.
I was aware that Lightroom web engines folders (such as 'juicebox.lrwebengine') are regular folders on a PC but are seen as special packages on a Mac. I had a hunch that .app folders might be treated similarly and Googled to confirm it.
If you hadn't mentioned "There is a file /Applications/JuiceboxBuilder-Pro.app", I wouldn't have thought of it.
It always helps to have as much information as possible (even stuff that you think might not be relevant) so thank you for being so comprehensive with your problem descriptions!
When using the Media Library as a source of images, WP-Juicebox displays images attached to the post containing the gallery.
The problem seems to be that your gallery is sourced by Media Library images but there are no images attached to the post containing the gallery.
Please double-check that there are images attached to your gallery's post.
Edit post -> Add Media -> Insert Media -> Media Library -> Uploaded to this post
If there are no images listed here, then there are no images attached to the post and you will need to upload some images for your gallery.
Please note that WordPress natively allows each Media Library image to be attached to only one post and it is not possible to attach an image to multiple posts.
You can use existing images from your Media Library but only if they are not already attached to another post. Otherwise, you will need to upload the images again for your gallery.
You're welcome!
I'm glad it worked. Thank you for posting back to let me know.
There is a file /Applications/JuiceboxBuilder-Pro.app, but that's all I can find -- no folder.
Try right-clicking 'JuiceboxBuilder-Pro.app' and selecting 'Show Package Contents'.
I'm glad you've essentially found what you're looking for.
Thanks for sharing your findings and experiences.
I'm still not sure why searching your hard drive for 'spinner.gif' does not result in a hit for the location of JuiceboxBuilder-Pro's 'jbcore' folder though, especially after you have shown hidden file (although it sounds unlikely that, on a Mac, JuiceboxBuilder-Pro would be installed to a location which is hidden by default).
Please feel free to 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.
OK, please do!
Once the plugin has been installed, you should find the 'config.xml' file in this location:
Users/username/Library/Application Support/Adobe/Lightroom/Web Galleries/juicebox_pro.lrwebengine/config.xml
You should be able to go find the 'Web Galleries' folder from within Lightroom:
Edit -> Preferences -> Presets -> Location -> Show Lightroom Presets Folder...
You can then navigate inside the 'Lightroom' folder and then the 'Web Galleries' folder.
Alternatively, you could modify the 'config.xml' file before you install the plugin.
Just unzip the 'juicebox_pro_1.4.4.2.zip' file and you'll find the plugin's 'config.xml' template file in this location:
juicebox_pro_1.4.4.2/adobe-lightroom-plugin/juicebox_pro.lrwebengine/config.xml
Please note that on a Mac, juicebox_pro.lrwebengine is seen as a special package (rather than just a regular folder). To open the folder, you'll need to right-click the package and select 'Show Package Content'.
Also, bear in mind that the plugin's 'config.xml' file is a template file which generates an XML file (rather than an actual XML file). Configuration options can be entered as attributes to the opening <juiceboxgallery> tag on line 34 (which is currently blank). The line number refers to the current version of the plugin (v1.4.4.2).
I hope this helps.
You can rename (or relocate) a gallery's XML file and point towards it using the configUrl option in the embedding code.
For example, you could have 2 galleries. The 1st gallery's XML file could be named 'config1.xml' and the 2nd gallery's XML file could be named 'config2.xml'.
The embedding code for the galleries might look something like this:
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container-1",
configUrl: "config1.xml",
galleryWidth: "800",
galleryHeight: "600",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container-1"></div>
<script>
new juicebox({
containerId: "juicebox-container-2",
configUrl: "config2.xml",
galleryWidth: "800",
galleryHeight: "600",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container-2"></div>Please note that when embedding multiple galleries into a single HTML page, you should load the 'juicebox.js' file only once per page (rather than once per gallery).
Also, be sure to embed each gallery into a unique container (a <div> with a unique 'id').
Please see the Embedding Multiple Galleries support section for online examples.
Alternatively, instead of saving all your gallery XML files in the same directory, you could keep all your galleries separate in their individual folders, upload the complete folders (not just the contents) to your web server and embed the galleries using the baseUrl method as documented here.
Short descriptions for the configUrl and baseUrl configuration options can be found here.
I don't have a Mac but check the following path: /Applications/JuiceboxBuilder-Pro/template/jbcore/classic/img/spinner.gif
Otherwise, keep searching your hard drive for the 'spinner.gif' file. It should be there somewhere!
With regard to jAlbum, skins can be installed in two different places (in Program Files or Application Data) but rather than searching, perhaps the easiest thing would be to just repackage the skin with your customized 'jbcore' folder and then install the skin as usual (letting jAlbum place it where it needs to be).
A jAlbum skin is just a zip file with a .jaskin file extension (instead of .zip).
(1) Rename the skin file from 'Juicebox.jaskin' to 'Juicebox.zip' (this may not be necessary depending on how you perform Step #2).
(2) Unzip the file.
(3) Replace the stock 'jbcore' folder with your own ('Juicebox/res/juicebox/jbcore/').
(4) Re-zip the entire 'Juicebox' folder.
(5) Rename the file to 'Juicebox.jaskin'.
(6) Install the skin as usual.
When you initially extract the 'juicebox_pro_1.4.4.2.zip' file, you can find the Pro 'jbcore' folder in
'juicebox_pro_1.4.4.2/web/jbcore/' (as well as in the JuiceboxBuilder-Pro installed program directory) so you could use the 'jbcore' folder from there to at least get your jAlbum skin up and running.
The 2 most likely causes are:
(1) A conflicting plugin.
(2) Custom CSS code on your web page (from either your theme or another plugin) which the gallery is inheriting and which is interfering with the gallery display.
First of all, try disabling all plugins (other than WP-Juicebox) and re-enable them one by one (checking your gallery's display after each one) to see if you can find a plugin which is causing your problem.
Also, try temporarily reverting to a default WordPress theme (such as Twenty Sixteen) to see if this solves the problem.
You could also use your browser's developer tools (usually accessed via the F12 key) to see if you can figure out why there is a black box where the gallery should be.
I hope these notes help.
However, if you continue to experience difficulties, then please post the URL to your gallery's web page so that I can see the problem for myself and hopefully help further. Thank you.
You're welcome!
I'm glad to hear that a reboot seems to have solved your problem.
Just to clarify, there is nothing that you have to do before going to the Customize tab (or skipping it and going straight to Publish).
Hopefully you'll not encounter this strange problem again.
I'm glad you've got it working. Thank you for letting me know.
Just for clarification, you cannot use your Flickr User Id for Juicebox's flickrUserName. This configuration option uses your Flickr User Name only.
There is an alternative configuration option named flickrUserId but this is supported by Juicebox-Pro only.
For reference, the Flickr Pro Options can be found here.
Unfortunately, I am not familiar with Adobe Flash HTML5 Canvas documents but it might help to think of a Juicebox gallery as a complete self-contained web site. A Juicebox gallery is essentially a web page ('index.html') with many resource files (CSS, JavaScript, images, fonts, etc.).
If you can load a web page (or a small self-contained web site) into an Adobe Flash HTML5 Canvas document, then you should hopefully be able to load a Juicebox gallery (via the gallery's 'index.html' page).
This would be more like loading a gallery's 'index.html' page into an iframe than actually embedding the gallery into an existing web page by following the regular embedding instructions here. (The gallery is actually embedded into the 'index.html' page with the required embedding code. There is just nothing else on the page.)
I'm not sure if this will help (or if what you are trying to do is even possible) but it might at least point you in the right direction.
It looks like your Flickr User Name is Ali Baba El Marchoso. (16652437@N00 is your Flickr User Id.)
I found your Flickr User Name by entering your Flickr Id into this Flickr API Explorer page: https://www.flickr.com/services/api/exp … le.getInfo
Setting the security level to 'High' in Internet Explorer disables JavaScript ('Security Settings -> Scripting -> Active scripting').
Juicebox requires on JavaScript to work. This is mentioned in the banner at the top of our home page.
Use Juicebox to create responsive JavaScript image galleries for your web site, blog or portfolio.
Disabling JavaScript will prevent the gallery from being displayed. There is no way around this.
The only alternative would be to include SEO content code (generated by JuiceboxBuilder-Pro) in your web page. Please see the Search Engine Optimization (SEO) support section for details.
SEO content is added as HTML text and images inside a <noscript> tag. This content will also show on devices that do not support JavaScript. This content is not loaded by JS enabled devices which means it will not interfere with gallery smart preloading.
Try viewing this demo gallery (which includes SEO content code) as an example. If JavaScript is enabled, then the gallery will be displayed. If JavaScript is disabled, then the gallery images will be displayed in a vertical list along with the image titles and captions.
http://www.juicebox.net/demos/pro/sharing/
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.